Über MakeMyPalette
MakeMyPalette ist eine kostenlose Sammlung von CSS- und Farb-Tools für Webdesigner und Frontend-Entwickler. Jedes Tool läuft vollständig in Ihrem Browser — es werden keine Dateien hochgeladen, keine Daten an einen Server gesendet und nichts über die aktuelle Sitzung hinaus gespeichert.
Warum nur clientseitig?
Die meisten Design-Utilities senden Ihre Daten durch einen Server, auch wenn es technisch nicht notwendig ist. Wir gehen einen anderen Weg: Jede Berechnung, Konvertierung und Darstellungsoperation findet in Ihrem Browser mit JavaScript und der Canvas-API statt. Ihre Farben, Verläufe und Favicons verlassen Ihren Rechner nicht.
Das bedeutet, dass MakeMyPalette offline funktioniert, sobald die Seite geladen ist, ohne Latenz läuft und Ihre Privatsphäre standardmäßig respektiert.
Was Sie tun können
- Farbpaletten-Generator — Erzeuge komplementäre, analoge, triadische und weitere Farbharmonien aus jeder Grundfarbe. Exportiere als CSS-Variablen, Tailwind-Konfiguration, SCSS oder JSON.
- Farbformat-Konverter — Füge einen beliebigen Farbwert ein und sieh ihn sofort in HEX, RGB, RGBA, HSL, HSLA und HSV. Kopiere jedes Format mit einem Klick.
- Kontrast-Prüfer — Prüfe Vordergrund- und Hintergrundfarbpaare gegen WCAG 2.1 AA- und AAA-Anforderungen für normalen und großen Text.
- Farbmischer — Mische zwei Farben in beliebigem Verhältnis im RGB- oder HSL-Raum und kopiere sofort die resultierenden Hex-, RGB- und HSL-Werte.
- Palette aus Bild — Ziehe ein beliebiges Bild hinein und extrahiere die dominanten Farben mit Median-Cut-Quantisierung. Exportiere als CSS-Variablen, Tailwind-Konfiguration, SCSS oder JSON.
- Farbenblindheits-Simulator — Sieh deine Palette durch sieben Arten von Farbsehschwäche. Erkenne Paare, die für die ~8 % Nutzer mit Rot-Grün-Verwechslung kollidieren.
- Farbnamen-Suche — Finde die nächstliegende benannte CSS-Farbe zu jedem Hex mittels perzeptueller Lab-Distanz oder schlage den exakten Hex hinter jedem CSS-Schlüsselwort nach.
- Generator für zugängliche Paletten — Erstelle aus jeder Markenfarbe eine tonale Skala (50–950) und sieh die WCAG-AA/AAA-Kontrastbewertungen jedes Farbtons gegen Weiß, Schwarz und die übrigen Stufen.
- Verlaufs-Generator — Erstelle lineare, radiale und konische CSS-Verläufe mit mehreren Farbstopps, Winkelkontrolle und Echtzeitvorschau.
- Box-Shadow-Generator — Stapele mehrere Box-Schatten mit voller Kontrolle über Offset, Blur, Spread, Farbe und Inset. Kopiere das CSS sofort.
- Text-Shadow-Generator — Stapele Text-Shadow-Ebenen für Schlagschatten, Neon-Glühen, 3D-Schrift, Letterpress und lange Schatten. Live-Vorschau auf echtem Text, CSS sofort kopieren.
- CSS-Filter-Generator — Kombiniere Blur, Brightness, Contrast, Grayscale, Hue-Rotate, Invert, Opacity, Saturate und Sepia zu einem einzigen CSS-Filter mit Live-Vorschau auf Bild oder Text.
- Cubic-Bezier-Visualisierer — Ziehe die beiden Kontrollpunkte, um eigene cubic-bezier()-Easing-Kurven zu gestalten. Vergleiche mit ease, ease-in, ease-out und sieh die Timing-Kurve eine Live-Animation antreiben.
- Border-Radius-Vorschau — Passe alle vier Ecken unabhängig an oder nutze die 8-Werte-Elliptensyntax. Sieh die Form live aktualisieren.
- Clip-Path-Maker — Zeichne eigene Clip-Path-Polygone mit einem interaktiven Editor oder starte mit Presets wie Dreiecken, Sechsecken und Pfeilen.
- Favicon-Generator — Lade ein Bild hoch oder erstelle ein Buchstaben-Icon und lade alle PNG-Größen herunter, die du für moderne Browser und Web-Manifeste brauchst.
Gebaut mit
MakeMyPalette ist mit Next.js, TypeScript und Tailwind CSS gebaut. Der Quellcode wird von MakeMy Toolkit auf GitHub gepflegt.
Feedback
Fehler gefunden oder eine Funktionsanfrage? Öffnen Sie ein Issue im GitHub repository. Pull Requests sind willkommen.