Großer Text, 24 px
Fließtext mit 15 px. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich.
RGB in HSL umrechnen: rgb(128, 0, 128) ist hsl(300, 100 %, 25 %), Lila liegt also bei 300° Farbton, voll gesättigt und eher dunkel. Praktisch, um Helligkeit oder Sättigung anzupassen, ohne den Farbton zu verändern.
Anleitung
- Tippe auf das große Farbfeld, um den Farbwähler zu öffnen, nimm mit der Pipette eine Farbe vom Bildschirm auf oder tippe in ein Feld.
- Füge eine beliebige CSS-Farbe (#hex, rgb(), hsl(), hwb(), oklch(), lab(), Farbnamen …) in ein Feld oder irgendwo auf der Seite ein.
- Tippe auf Kopieren neben einem Format. Mit Deckkraft fügst du Transparenz hinzu.
- In der Palette macht ein Tipp das Feld zur aktuellen Farbe; lange drücken (oder Rechtsklick) kopiert den HEX-Wert. Unter Kontrast Text- und Hintergrundfarbe setzen und einen Vorschlag antippen, um ein durchgefallenes Paar zu korrigieren.
- WCAG 2.1 verlangt 4,5:1 für normalen Text (AA) und 7:1 für AAA. Großer Text (24 px oder 18,66 px fett) braucht 3:1 für AA und 4,5:1 für AAA. UI-Elemente und Grafiken brauchen 3:1.
- Vorschläge behalten Farbton und Sättigung und ändern nur die Helligkeit (in OKLCH) bis zum nächsten passenden Wert.
- Halbtransparente Farben werden vor der Berechnung mit dem Hintergrund verrechnet.
- CMYK-Werte sind eine einfache Umrechnung; für den Druck das Farbprofil der Druckerei verwenden.
- Zuletzt verwendete Farben werden nur in diesem Browser gespeichert.
Die Farbformate erklärt
HEX ist der sechsstellige Code aus CSS und Designprogrammen: #1E88E5 bedeutet Rot 1E (30), Grün 88 (136) und Blau E5 (229). RGB schreibt dieselben Werte dezimal von 0 bis 255. HSL beschreibt Farbton (0–360°), Sättigung und Helligkeit und macht es leicht, eine Farbe abzudunkeln oder abzuschwächen. HSV ist das Modell hinter den meisten Farbwähler-Quadraten.
OKLCH ist ein neueres CSS-Format auf Basis des wahrnehmungsgleichen Oklab-Raums: Gleiche Helligkeitsschritte wirken gleich groß – ideal für Farbskalen und barrierearme Paletten. CMYK beschreibt den Farbauftrag im Druck; hier ist es eine einfache Umrechnung ohne Profil, für exakte Druckfarben das Profil deiner Druckerei verwenden.
Von Hand umrechnen
Von HEX zu RGB: den Code in drei Paare teilen und jedes aus dem 16er-System umrechnen – #FF6347 ergibt 255, 99, 71. Von RGB zu CMYK: K = 1 − max(R, G, B) / 255, dann C = (1 − R/255 − K) / (1 − K), M und Y genauso; reines Orange rgb(255, 165, 0) ist cmyk(0 %, 35 %, 100 %, 0 %). Das Tool erledigt das sofort und versteht Farbnamen, rgb(), hsl(), hwb(), lab() und oklch().
Eine Palette aufbauen
Aufhellungen mischen die Farbe mit Weiß, Abdunklungen mit Schwarz – das ergibt Stufen für Hintergründe, Rahmen und Hover-Zustände. Harmonische Paletten drehen den Farbton: komplementär (180°), analog (±30°), triadisch (120°) und tetradisch (90°-Schritte). Zuletzt genutzte Farben bleiben nur in diesem Browser.
Häufige Fragen
Wie rechne ich HEX in RGB um?
Den HEX-Code in ein beliebiges Feld einfügen und den RGB-Wert kopieren. Von Hand den Code in Paare teilen und jedes aus dem Hexadezimalsystem umrechnen: #1E88E5 ist rgb(30, 136, 229).
Wie nehme ich eine Farbe vom Bildschirm auf?
Auf die Pipette tippen und irgendwo auf den Bildschirm klicken. Das klappt in Browsern mit EyeDropper-API, etwa Chrome und Edge am Desktop.
Was ist OKLCH und wozu dient es?
OKLCH ist ein CSS-Farbformat aus Helligkeit, Chroma und Farbton auf Basis des Oklab-Modells. Ändert man nur die Helligkeit, entstehen gleichmäßige Stufen mit gleichbleibendem Farbton – das schafft HSL nicht.
Stimmen die CMYK-Werte für den Druck?
Sie sind eine mathematische Umrechnung ohne Farbprofil. Das Druckergebnis hängt von Papier, Farbe und Maschine ab; für Markenfarben die CMYK-Werte aus dem Profil deiner Druckerei nehmen.
Kann ich Transparenz hinzufügen?
Ja. Deckkraft verschieben, und alle Formate passen sich an: HEX erhält ein Alpha-Paar (#RRGGBBAA), die CSS-Funktionen einen Alpha-Wert.
Wird mein Farbverlauf gespeichert?
Zuletzt genutzte Farben werden nur in diesem Browser auf deinem Gerät gespeichert. Nichts wird an einen Server gesendet.