Ueberblick
Das Tool ist sinnvoll, wenn du eine Farbe in mehreren Formaten pruefen willst, ohne zwischen Programmen zu wechseln. Es zeigt denselben Farbton als HEX, RGB und HSL, damit du das Format kopieren kannst, das zu CSS, Komponenten-Spezifikation oder Designdokument passt. Besonders praktisch ist es bei Markenfarben, bei der Abstimmung mit Entwicklung und beim Pruefen von Theme-Tokens. Die Werte aktualisieren sich gemeinsam, sodass du Abstufungen leichter vergleichen und Farbreferenzen sauber uebernehmen kannst.
Anwendungsfaelle
- Theme-Token pruefenEinen Token-Farbwert als HEX, RGB und HSL kontrollieren, bevor er in ein Designsystem oder Stylesheet wandert.
- Markenfarbe abgleichenSicherstellen, dass eine Markenfarbe in Designdateien, Dokumentation und Webauftritt identisch bleibt.
- Zustandsfarben fuer KomponentenHover-, Active- oder Focus-Farben untersuchen und das exakte Format aus dem Code festhalten.
So funktioniert es
- 1
Farbe mit dem Waehler auswaehlen oder HEX-Wert eingeben.
- 2
Das Tool berechnet die passenden RGB- und HSL-Werte.
- 3
Das benoetigte Format fuer CSS, Dokumentation oder Komponentenstil kopieren.
Beispiele
Blau fuer Primärbutton
Eingabe: #2563EB
Ausgabe: HEX #2563EB, RGB 37, 99, 235, HSL 221, 83%, 53%
Geeignet fuer eine starke UI-Farbe, die in Styles und Spezifikationen exakt dokumentiert werden muss.
Dunkler Neutralton
Eingabe: rgb(17, 24, 39)
Ausgabe: HEX #111827, RGB 17, 24, 39, HSL 220, 39%, 11%
Hilfreich zum Pruefen eines dunklen Neutraltons fuer Karten, Flaechen oder Text.
Sanftes Gruen fuer Erfolg
Eingabe: hsl(142, 72%, 29%)
Ausgabe: HEX #14913E, RGB 20, 145, 62, HSL 142, 72%, 29%
Praktisch, wenn ein Design den Farbwert als HSL speichert und CSS HEX oder RGB braucht.
FAQ
Kann ich auch ein anderes Farbformat als HEX eingeben?
Ja. Wenn das eingefuegte Format unterstuetzt wird, zeigt das Tool die passenden HEX-, RGB- und HSL-Werte an.
Warum aendern sich die Werte bei kleinen Bewegungen des Waehler?
Jede kleine Bewegung waehlt einen anderen Farbton, deshalb aktualisieren sich die Zahlen sofort. Das ist normal und hilft beim genauen Festlegen des Farbpunktes.
Worin liegt hier der Unterschied zwischen RGB und HSL?
RGB beschreibt den Anteil von Rot, Gruen und Blau. HSL stellt die Farbe als Farbton, Saettigung und Helligkeit dar und ist oft angenehmer zum Vergleichen von Abstufungen.
Warum sehen kopierte Werte in einer anderen App manchmal anders aus?
Manche Apps runden Kanaele oder stellen Alpha und Anzeige anders dar. Vergleiche daher vor allem die Zahlenwerte, nicht nur die Vorschau.