Anleitung
- Gib eine Farbe ein oder füge sie ein, zum Beispiel #1e90ff, rgb(30 144 255) oder oklch(65% 0.18 250). Du kannst auch die Farbauswahl verwenden.
- Prüfe das Farbfeld, um sicherzugehen, dass es die gewünschte Farbe zeigt.
- Kopiere das gewünschte Format aus der Liste. Bei Werten mit Transparenz bleibt der Alpha-Wert erhalten.
So funktioniert es
Unterstützte Eingaben: HEX mit 3, 4, 6 oder 8 Ziffern (die 4. und 8. Ziffer stehen für Alpha), rgb() und rgba() mit Zahlen oder Prozentangaben, hsl() und hsla(), hwb(), oklch() sowie cmyk() mit Prozentangaben oder Zahlen von 0 bis 100. Sowohl die klassische Kommaschreibweise als auch die moderne Schreibweise mit Leerzeichen und „/ alpha“ werden unterstützt. Für den Farbton sind deg, turn, rad und grad zulässig. Benannte Farben wie „tomato“ werden nicht erkannt. Verwende stattdessen die Farbauswahl oder gib einen Farbcode ein.
Alle Umrechnungen erfolgen über sRGB. HSL und HWB sind einfache Umformungen der RGB-Werte und lassen sich daher exakt umrechnen. OKLCH ist ein wahrnehmungsbezogener Farbraum: Gleich große Helligkeitsabstufungen wirken ungefähr gleich unterschiedlich. Dadurch eignet er sich zum Erstellen von Farbpaletten. Die Berechnung basiert auf den veröffentlichten OKLab-Matrizen. Manche OKLCH-Farben liegen außerhalb des in sRGB darstellbaren Bereichs. Das Tool weist darauf hin und zeigt die nächstliegende darstellbare Farbe an.
CMYK wird mit der üblichen einfachen Formel berechnet (K = 1 − der größte RGB-Kanal). Das tatsächliche Druckergebnis hängt von Papier, Tinte und ICC-Profil ab. Betrachte diese Werte daher als Ausgangspunkt, nicht als Druckvorgabe.
Beispiele
Vom HEX-Farbcode einer Marke zu CSS
Ein Styleguide gibt den Farbcode #0b5d1e vor. Füge ihn ein, um rgb(11, 93, 30) für älteres CSS, hsl(133.9, 78.8%, 20.4%) zum manuellen Anpassen der Helligkeit und einen oklch()-Wert für moderne CSS-Farbfunktionen zu erhalten.
Eine Farbe mit Transparenz verstehen
rgba(0, 0, 0, 0.5) wird zu #00000080. Die letzten beiden HEX-Ziffern (80) geben den Alpha-Wert an: 128 von 255, also etwa 50 %.
Einen OKLCH-Wert aus einer Designdatei prüfen
oklch(70% 0.4 150) ist ein stark gesättigtes Grün, das sRGB-Bildschirme nicht darstellen können. Das Tool weist darauf hin und zeigt die nächstliegende sRGB-Farbe an. So siehst du, dass das Design auf den meisten Bildschirmen anders aussieht.
Häufig gestellte Fragen
Warum ändert sich der HEX-Wert manchmal um eins, wenn ich zu HSL und zurück umrechne?
HEX speichert pro Kanal ganze Zahlen von 0 bis 255. Werte in anderen Formaten werden für die Anzeige gerundet (HSL auf eine Nachkommastelle). Bei der Umrechnung eines gerundeten Werts zurück kann das Ergebnis daher um eine Einheit abweichen. Kopiere den HEX-Wert, wenn du das exakte Original benötigst.
Ist der CMYK-Wert für den Druck geeignet?
Nein, nicht ohne Weiteres. Der Wert wird mit einer einfachen Formel ohne Farbprofil berechnet. Druckereien verwenden Profile wie FOGRA oder GRACoL, die zu anderen Werten führen. Frage daher bei deiner Druckerei nach oder rechne die Farbe in einer farbverwalteten Anwendung um.
Was ist OKLCH, und kann ich es in CSS verwenden?
OKLCH beschreibt eine Farbe anhand ihrer wahrgenommenen Helligkeit, ihres Chroma (Buntheit) und ihres Farbtons. Aktuelle Versionen der gängigen Browser unterstützen oklch() in CSS. Wenn du ältere Browser unterstützt, solltest du einen HEX- oder rgb()-Fallback verwenden.
Was bedeutet ein 8-stelliger HEX-Farbcode?
#RRGGBBAA: Die letzten beiden Ziffern geben die Deckkraft an – von 00 (vollständig transparent) bis ff (vollständig deckend). Bei der vierstelligen Schreibweise #RGBA funktioniert es genauso, mit einer Ziffer pro Kanal.
Datenschutz
Farben werden in deinem Browser umgerechnet. Deine Eingaben werden weder übertragen noch gespeichert.