Farbkonverter

Fünf verschiedene Arten, denselben Pixel zu benennen

Ein Konverter, der HEX, RGB, HSL, HSV und CMYK verarbeitet, berührt fünf ganz unterschiedliche Arten, dasselbe Wahrnehmungsphänomen zu beschreiben. Sie wurden von verschiedenen Menschen, in verschiedenen Jahrzehnten, für verschiedene Maschinen und mit verschiedenen Prioritäten erfunden. Einen Wert von einer Notation in eine andere zu schieben sieht aus wie triviale Arithmetik, und an der Oberfläche ist es das normalerweise, aber die Geschichten erklären, warum jede Notation überhaupt existiert, und die Mathematik erklärt, warum das Hin und Her zwischen ihnen nicht immer verlustfrei ist.

HEX, Basis-16-Kurzschreibweise für sRGB-Tripel

Die hexadezimale Farbnotation geht CSS um einige Jahre auf Workstations und in Grafikdateiformaten voraus, aber ihre universelle Web-Bedeutung wurde durch die CSS1-Empfehlung festgelegt, die das W3C am 17. Dezember 1996 veröffentlichte. CSS1 war die Arbeit von Håkon Wium Lie und Bert Bos: Lie hatte Cascading Style Sheets am CERN im Oktober 1994 vorgeschlagen, und Bos schloss sich dem Projekt am INRIA im Juli 1995 an. Vor CSS hatte HTML 1.0 überhaupt keinen Begriff von Farbe, sein anfänglicher Satz von 18 Tags war streng strukturell. Eine Hex-Farbe ist eine Drei-Byte- (oder Vier-Byte-, mit Alpha) Ganzzahl, die der Browser in Rot-, Grün- und Blau-Kanäle aufteilt. Die 6-stellige Form #RRGGBB gibt jedem Kanal einen 8-Bit-Wert, 0-255, kodiert in zwei Hex-Ziffern. Die 3-stellige Kurzschreibweise #RGB ist exakt äquivalent zur 6-stelligen Form mit jeder Ziffer verdoppelt, also sind #F0A und #FF00AA dieselbe Farbe. CSS Color Module Level 4 fügte formell 4-stellige (#RGBA) und 8-stellige (#RRGGBBAA) Formen mit Alpha-Kanal hinzu, wobei 00 vollständig transparent und FF vollständig undurchsichtig ist. Browser-Unterstützung kam in Chrome 62, Firefox 49, Safari 10 und Edge 79, sodass sie 2026 im Wesentlichen universell ist. Hex ist beliebt, weil es kurz, kopierbar-einfügbar und eindeutig ist, background: #1e90ff überlebt Kopieren/Einfügen zwischen Figma, VS Code, Slack und E-Mail, ohne dass jemand an Leerzeichen oder Kommas denken muss.

RGB, Maxwells Dreifarben-Prinzip, digital umgesetzt

Die „RGB"-Idee, dass jede Farbe, die das Auge sieht, durch Mischen kontrollierter Mengen dreier Grundlichter erreicht werden kann, geht der Farbfotografie voraus. James Clerk Maxwell schlug sie erstmals in seinem Papier von 1855 „Experiments on Colour, as Perceived by the Eye, with Remarks on Colour Blindness" vor, das er der Royal Society of Edinburgh vorlegte. Sechs Jahre später, am 17. Mai 1861, demonstrierte Maxwell das Prinzip öffentlich: Er ließ den Fotografen Thomas Sutton drei Schwarz-Weiß-Platten eines Tartan-Bandes anfertigen, jede durch einen roten, grünen oder blauen Filter aufgenommen, und projizierte dann die drei Platten durch dieselben Filter auf eine Leinwand zurück. Die überlagerten Projektionen produzierten ein erkennbar farbiges Bild, die weltweit erste Farbfotografie durch additive Synthese. Maxwells additives RGB wurde die Grundlage jeder elektronischen Anzeige seither. Modernes Web-RGB bedeutet speziell sRGB, den „standard RGB"-Farbraum, der von Hewlett-Packard und Microsoft 1996 vorgeschlagen wurde (Autoren Michael Stokes und Ricardo Motta von HP, Matthew Anderson und Srinivasan Chandrasekar von Microsoft) und als IEC 61966-2-1:1999 standardisiert wurde. Die Motivation war prosaisch: Das frühe Web brauchte einen Farbraum, der einfach genug war, um standardmäßig angenommen zu werden, robust genug, um auf billigen CRTs akzeptabel auszusehen, und klein genug, um Bilddateien nicht aufzublähen. Fünfundzwanzig Jahre später ist es immer noch der Standardarbeitsraum jedes Browsers, jedes JPEG und jedes PNG, das kein eingebettetes ICC-Profil trägt. In CSS wird RGB als rgb(255, 0, 153) (Legacy-Komma-Syntax) oder rgb(255 0 153) (modern leerzeichengetrennt, gemäß CSS Color Level 4) geschrieben.

HSL und HSV, Alvy Ray Smiths Wahrnehmungsachsen

RGB ist hervorragend für Hardware (ein Display hat buchstäblich rote, grüne und blaue Sub-Pixel) und nutzlos für die menschliche Intuition. Niemand passt ein Webdesign an, indem er argumentiert, er wolle „zwölf Einheiten mehr Grün und sieben weniger Rot". Designer denken in Begriffen von Farbton (welche Farbe), Sättigung (wie lebendig) und Helligkeit (wie hell). Die Umwandlung wurde von Alvy Ray Smith in seinem SIGGRAPH 1978-Papier „Color Gamut Transform Pairs" formalisiert, veröffentlicht in der August-Ausgabe 1978 von Computer Graphics, Seiten 12-19. Smith war am New York Institute of Technology Computer Graphics Lab, nachdem er zuvor bei Xerox PARC gearbeitet hatte. Das Papier merkte an, dass die RGB-zu-HSV-Transformation zum Zeitpunkt ihrer Veröffentlichung bereits „etwa vier Jahre lang erfolgreich verwendet" worden war in Frame-Buffer-Malprogrammen, Smith dokumentierte Arbeitspraxis, nicht eine Erfindung von Grund auf. Er wurde 1990 gemeinsam mit dem SIGGRAPH Computer Graphics Achievement Award ausgezeichnet, unter anderem für „das HSV (auch bekannt als HSB) Farbraummodell". HSL und HSV teilen sich eine Farbtonachse (ein Winkel, 0°-360°, um ein Farbrad: 0° Rot, 120° Grün, 240° Blau) und eine Sättigungsachse (0% Grau bis 100% rein), aber sie unterscheiden sich in ihrer dritten Achse. HSV (Hue, Saturation, Value) behandelt V als das Maximum der RGB-Kanäle, reines Weiß erfordert V=100% UND S=0%, reines Rot ist V=100%, S=100%; sowohl Weiß als auch Rot leben oben auf dem Zylinder. HSL (Hue, Saturation, Lightness) behandelt L als den Mittelpunkt der hellsten und dunkelsten Kanäle, reines Weiß ist L=100% unabhängig von S, reines Rot ist L=50%, S=100%; Weiß lebt oben auf dem Zylinder, die lebendigsten Farben leben am Äquator. HSL wurde speziell für CSS gewählt, weil seine Symmetrie um L=50% dazu passt, wie Designer über Tönungen und Schattierungen denken.

CMYK, das subtraktive Modell des Druckers

Während Monitore Licht emittieren (additiv: mehr ist heller, alle drei auf Maximum = Weiß), absorbiert Tinte Licht (subtraktiv: mehr ist dunkler, alle drei auf Maximum = Schwarz, in der Theorie). Vierfarbdruck, Cyan, Magenta, Gelb, plus eine schwarze „Key"-Platte, wurde in den 1890er Jahren erstmals kommerziell für Farbillustrationen in Zeitungen eingesetzt. Der Eagle Printing Ink Company wird allgemein der erste echte Vierfarb-Nass-Tinte-Prozess 1906 zugeschrieben. Das „K" kommt von „key" (die Platte, die alle anderen registriert, traditionell die schwarze Detailplatte), nicht von „black", weshalb das Modell CMYK und nicht CMYB ist. Die Key-Platte existiert aus vier praktischen Gründen: 100% C, M und Y in echter Tinte zu kombinieren ergibt ein schlammiges dunkles Braun, kein echtes Schwarz, weil echte Pigmente nicht perfekt rein sind; Dreifarbenschwarz verschwendet Tinte und verlangsamt das Trocknen; nasses Dreifarbenschwarz lässt Papier sich wellen und reißen; und Schrift und feine Konturen brauchen eine einzige hochkontrastige Platte für Schärfe.

Die Konversionsmathematik, kurz gefasst

HEX ↔ RGB ist trivial, teile den Hex-String in drei zweistellige Teilstrings und parse jeden als eine Basis-16-Ganzzahl mit parseInt(hex, 16); kehre um mit n.toString(16).padStart(2, '0'). RGB → HSL ist max/min-Mathematik: Chroma = max(R,G,B) − min(R,G,B); Helligkeit = (max + min) / 2; Sättigung = Chroma / (1 − |2L − 1|); der Farbton wird über eine stückweise Formel berechnet, die den dominanten Kanal nimmt und seine Position in einen Winkel in einem von sechs 60°-Sektoren des Farbtonkreises übersetzt. (Einige Implementierungen verwenden atan2, aber Smiths Papier von 1978 vermied Trigonometrie absichtlich aus Performance-Gründen, atan2 war eine teure Instruktion auf einem 1970er-Jahre-Framebuffer, und die stückweise Formel ist geblieben, weil sie dieselbe Antwort schneller gibt.) HSL → RGB kehrt den Prozess über eine stückweise lineare Abbildung mit Chroma und einem Offset um, das das Chroma-Tripel auf den richtigen Punkt der Helligkeitsachse übersetzt. RGB ↔ HSV verwendet dasselbe Skelett, aber mit einer anderen vertikalen Achse: V = M statt L = (M+m)/2, und S = Δ/M statt des helligkeitsbewussten Divisors. RGB ↔ CMYK verwendet die einfache Formel K = 1 − max(R,G,B), dann C, M, Y als (1 − Kanal − K) / (1 − K). Das ist mathematisch selbstkonsistent, beschreibt aber nicht, wie irgendeine echte Druckmaschine die Farbe reproduzieren wird, siehe den Druck-Vorbehalt unten.

Das Round-Trip-Problem

Konvertiere #7A3D5C (HEX) → HSL → HEX. Du erhältst nicht unbedingt #7A3D5C zurück. Die Gründe sind völlig prosaisch. Ganzzahlige Truncierung: HEX-Kanäle sind Ganzzahlen 0-255; HSL-Umwandlungen erzeugen Floats; das Runden von (1, 121.987, 47.512) auf Ganzzahlen verliert Sub-Pixel-Informationen, die der Round-Trip nicht wiederherstellen kann. Float64-Ungenauigkeit: JavaScripts einziger numerischer Typ ist der IEEE 754 doppelt-präzise binäre Float, mit einer 52-Bit-Mantisse, die etwa 15-17 signifikante Dezimalziffern gibt, genug für eine einzelne Konvertierung, aber sammelt sich an, wenn du viele Operationen verkettest. Asymmetrische Abbildungen: mehrere verschiedene (R,G,B)-Tripel können auf dasselbe (H,S,L)-Tripel abbilden, wenn das Chroma null ist (jedes Grau hat einen undefinierten Farbton; Konventionen wählen H = 0 oder bewahren das vorherige H). Für ein pragmatisches Browser-Werkzeug ist das in Ordnung, der Benutzer hat #7A3D5C eingegeben, sieht (322°, 32%, 36%) in HSL und erhält #7A3D5C (oder #7A3E5D, um eins daneben) zurück. Solange das angezeigte Farbmuster dem entspricht, was das Auge erwartet, ist die Reise gut. Aber es lohnt sich, ehrlich zu sein: verlustfreier Round-Trip ist nicht garantiert.

Moderne CSS-Farbräume jenseits von sRGB

Jahrzehntelang bedeutete „Web-Farbe" sRGB und nur sRGB. Diese Annahme brach 2015, als Apple den iMac Ende 2015 als „den ersten Consumer-Computer mit eingebautem Wide-Gamut-Display" auslieferte, der Apples Display P3-Farbraum unterstützt. P3 entstand als DCI-P3, definiert 2005 von der Digital Cinema Initiative für Kinoprojektion. Apples Display P3-Variante behielt DCIs Primärfarben bei, wechselte aber den Weißpunkt zu D65 (der sRGBs entspricht) und übernahm sRGBs Tonwiedergabekurve, um es für Desktop-/Mobile-Anzeige statt für abgedunkelte Kinos geeignet zu machen. Das Gamut von Display P3 ist etwa 25% größer in der Fläche als sRGB und lässt Telefone und Laptops messbar lebendigere Rots und Grüns zeigen. Damit CSS Farben außerhalb von sRGB beschreiben kann, führte der W3C im CSS Color Module Level 4 die color()-Funktion mit einem expliziten Farbraum-Parameter ein: color(srgb 1 0.5 0.2), color(display-p3 1 0.5 0.2), color(rec2020 1 0.5 0.2). Vordefinierte Farbräume umfassen srgb, srgb-linear, display-p3, a98-rgb (Adobe RGB), prophoto-rgb, rec2020, xyz, xyz-d50 und xyz-d65. Auf einem normalen sRGB-Display wird eine außerhalb des Gamuts liegende P3-Farbe auf das nächstgelegene sRGB-Äquivalent gamut-gemappt, das das Display zeigen kann.

CSS Color Level 4 fügte auch lab(), lch(), oklab() und oklch() als erstklassige Funktionen hinzu. lab() und lch() verwenden den CIE 1976 L*a*b*-Farbraum, standardisiert von der Commission Internationale de l'Éclairage 1976, der erste weit verbreitete perzeptuell-uniforme Farbraum, mit a*- und b*-Achsen, die rot-grünen und blau-gelben Gegenfarbenpaaren entsprechen, die dem entsprechen, wie das menschliche visuelle System Farbe tatsächlich codiert. Im Dezember 2020 veröffentlichte der schwedische Entwickler Björn Ottosson „A perceptual color space for image processing" in seinem Blog und stellte Oklab vor. Ottosson hatte Jahre in der Spielebranche damit verbracht, einfache Farbmanipulationen durchzuführen, und kam zu dem Schluss, dass jeder existierende Farbraum dabei in irgendeiner Weise versagte. Oklab ist speziell auf Bildverarbeitungsoperationen abgestimmt: Gradienten zwischen zwei Oklab-Farben bleiben perzeptuell glatt, und Helligkeitsanpassungen in Oklab fühlen sich wie Helligkeitsanpassungen für das menschliche Auge an. Die zylindrische Form, OKLCH, ist das, was die meisten Designer tatsächlich schreiben. Oklab wurde ein Jahr nach dem Blog-Beitrag, im Dezember 2021, zu CSS Color Level 4 hinzugefügt und ist jetzt der Standard-Interpolationsraum für CSS-Gradienten in Browsern, die Color Level 4 implementieren. Die Tailwind CSS v4 Farbpalette wird aus OKLCH-Koordinaten generiert. Die color-mix()-Funktion (CSS Color Module Level 5) wurde in Safari 16.2 (Dezember 2022), Chrome 111 (März 2023) und Firefox 113 (Mai 2023) ausgeliefert, was sie seit Mai 2023 in allen Browsern baseline-verfügbar macht.

Mini-Geschichte der Farbtheorie

Web-Farbkonverter stehen am Ende eines 360-jährigen Bogens des Versuchs, Farbe systematisch zu verstehen. Die bemerkenswerten Meilensteine: Newton (1665-66) verwendete ein Glasprisma, um Sonnenlicht in das sichtbare Spektrum zu zerlegen und identifizierte sieben Farben in seiner Opticks. Goethe (1810) veröffentlichte Zur Farbenlehre, eine anti-newtonsche Abhandlung, die mehr an den perzeptuellen und emotionalen Dimensionen der Farbe als an ihrer Physik interessiert war, falsch in der Wissenschaft, aber richtig darin, dass die Wahrnehmung wichtig ist. Maxwell (1855/1861) wie oben behandelt. Itten (1961) veröffentlichte Kunst der Farbe am Bauhaus und kodifizierte das 12-Ton-Farbrad und die sieben Arten von Farbkontrast, die heute noch in Designschulen gelehrt werden. Pantone (1963) führte das Pantone Matching System (PMS) ein, das die Farbkommunikation zwischen Designern und Druckern in einen nummerierten Katalog verwandelte, eine Pantone-Nummer bedeutete genau dieselbe Farbe bei jedem Drucker der Welt, der das System abonnierte. Der Web-Farbstapel erbt von all diesen Traditionen: Newton gibt uns das sichtbare Spektrum, Maxwell die additiven Primärfarben, Itten das Designschul-Vokabular komplementärer und analoger Schemata, Pantone die praktische Tatsache, dass eine Zahl für eine perzeptuelle Erfahrung stehen kann.

Barrierefreiheit: WCAG-Kontrast auf was auch immer du wählst

Sobald du eine Farbe hast, musst du wissen, ob du Text darauf platzieren kannst. WCAG 2.1 Erfolgskriterium 1.4.3 (Kontrast, Minimum) erfordert ein Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text (definiert als 18pt / 24 CSS-Pixel regulär oder 14pt / 19 CSS-Pixel fett). Das Kontrastverhältnis wird aus der relativen Luminanz berechnet: (L1 + 0.05) / (L2 + 0.05), wobei L1 die Luminanz der helleren Farbe und L2 die dunklere ist, und Luminanz eine gewichtete Summe der gamma-decodierten R-, G-, B-Kanäle mit Gewichten 0.2126, 0.7152 und 0.0722 (entspricht der menschlichen Augenempfindlichkeit für diese Wellenlängen). WCAG 2.1 SC 1.4.6 (Verbessert) erhöht die Latte auf 7:1 normal / 4,5:1 groß für AAA-Konformität. WCAG 2.1 SC 1.4.11 deckt Nicht-Text-Kontrast (UI-Komponenten, Fokus-Indikatoren, grafische Objekte, die für das Verständnis erforderlich sind) bei 3:1 ab. Das neuere APCA (Advanced Perceptual Contrast Algorithm) ist ein Ersatz im Forschungsstadium, der besser zum wahrgenommenen Kontrast für Fließtext passt und für WCAG 3 evaluiert wird, er gibt einen direktionalen Lc-Wert zurück, wobei ±60 das ungefähre Äquivalent von WCAGs 4,5:1 ist. Überprüfe Farbpaare immer gegen die tatsächliche Kontrastformel, nicht dein Auge; Designer überschätzen konsistent, wie lesbar Niedrigkontrast-Paarungen sind.

Der ehrliche Druck-Vorbehalt: Naives CMYK ist kein echtes CMYK

Die einfache Formel K = 1 − max(R,G,B), die jeder Browser-Konverter verwendet, ist mathematisch selbstkonsistent, der Round-Trip RGB → CMYK → RGB gibt genau dasselbe RGB zurück, modulo Gleitkomma. Aber sie beschreibt nicht, wie irgendeine echte Druckmaschine diese Farbe auf Papier reproduzieren wird. Eine echte RGB-zu-CMYK-Umwandlung braucht drei Dinge, die dieses Werkzeug nicht liefern kann: ein Ziel-ICC-Profil (das die Drucker- + Papierkombination definiert, beschichtetes Papier absorbiert Tinte anders als unbeschichtetes, und High-End-Druckmaschinen laufen mit anderen Profilen als Desktop-Tintenstrahldrucker), eine Rendering-Absicht (perzeptuell, relativ-kolorimetrisch, Sättigung, absolut-kolorimetrisch, sie tauschen ab, wie out-of-gamut-Farben hineingequetscht werden), und ein echtes kolorimetrisches Modell (CIE Lab als geräteunabhängige Mittelschicht, mit vollständigen ICC-Profil-Lookup-Tabellen auf jeder Seite). Das ist es, was Adobe Photoshop hinter seinem CMYK-Konvertierungsmenü tut und was professionelle Prepress-Software (Esko, Heidelberg Prinect, Caldera) für Produktionsarbeit tut. Die naive Formel ist in Ordnung, um die Beziehung zwischen additiven und subtraktiven Farbmodellen zu verstehen, und nützlich für Erstexploration von Farbe, aber wenn du Dateien an einen kommerziellen Drucker sendest, mache die Umwandlung in Photoshop (oder dem bevorzugten Werkzeug deines Druckers) mit dem richtigen ICC-Profil geladen, der sichtbare Unterschied kann erheblich sein.

Benannte Farben und die Rebeccapurple-Geschichte

CSS3 liefert 147 benannte Farben (148, wenn man den Alias aqua = cyan zählt), die aus einer Mischung der ursprünglichen 16 benannten Farben aus HTML 4 und der längeren Liste des X11-Windows-Systems geerbt wurden. Die zuletzt hinzugefügte benannte Farbe hat eine Geschichte. Am 7. Juni 2014 starb die Tochter des Web-Standards-Verfechters Eric Meyer, Rebecca, am Tag nach ihrem sechsten Geburtstag an einer aggressiven Form von Hirntumor. Rebeccas Lieblingsfarbe war Lila. Innerhalb weniger Tage schlugen Mitglieder der CSS Working Group, angeführt vom Editor Tab Atkins Jr., vor, rebeccapurple (#663399) der CSS Color Level 4-Spezifikation als benannte Farbe hinzuzufügen, in ihrem Gedenken. Die Farbe wurde im Juni 2014 hinzugefügt und kurz danach in Browsern ausgeliefert. Der Hex-Wert wurde speziell als der Wert gewählt, den Eric Meyer selbst auf seiner Website verwendet hatte. rebeccapurple ist jetzt in der Tabelle der benannten Farben jedes Browsers, die einzige Gedenkfarbe in der CSS-Spezifikation und eine Erinnerung daran, dass die trockenen technischen Spezifikationen des Webs von Menschen geschrieben werden, die bemerken, wenn einer von ihnen trauert.

Häufig gestellte Fragen

Welches Format soll ich in CSS verwenden?

Alle drei Primärformate funktionieren in modernem CSS. HEX ist das kompakteste und am weitesten verbreitete, großartig für statische Farben, bei denen du einen Wert einmal ausgewählt hast und ihn überallhin kopieren möchtest. RGB ist hilfreich, wenn du Werte programmatisch berechnen oder mit Bilddaten arbeiten musst (die Canvas-API spricht RGB nativ). HSL ist am besten, wenn du Designsystem-Farbvariationen erstellen möchtest, Helligkeit oder Sättigung anpassen, während der Farbton festgelegt bleibt, was so ist, wie Tailwinds Farbpalette seine vollständigen Rampen aufbaut. Für 2026-Designsysteme ist OKLCH (in CSS Color Level 4) zunehmend die richtige Antwort für neue Arbeit, es interpoliert perzeptuell-glatt zwischen zwei beliebigen Farben, was für Gradienten und glatte Rampengenerierung wichtig ist.

Was ist der Unterschied zwischen #FFF und #FFFFFF?

Drei-stelliges Hex ist eine Kurzschreibweise, bei der jede Ziffer verdoppelt wird: #FFF = #FFFFFF, #09C = #0099CC, #F0A = #FF00AA. Beide sind gültiges CSS, aber die sechsstellige Form unterstützt alle 16.777.216 sRGB-Farben, während die dreistellige Form nur 4.096 unterstützt (jeder Kanal auf 16 verschiedene Werte begrenzt). Drei-stelliges Hex ist prägnant, aber leicht eingeschränkt; sechs Ziffern ist die volle sRGB-Palette. CSS Color Module Level 4 definiert auch vier- und achtstellige Formen (mit Alpha), wobei #F008 zu #FF000088 und #F00 zu #FF0000 expandiert.

Kann ich Farben mit Transparenz (Alpha) konvertieren?

Dieses Werkzeug konzentriert sich derzeit auf undurchsichtige Farben. Für Alpha unterstützt CSS rgba(r, g, b, a), hsla(h, s%, l%, a) und 8-stelliges Hex (#RRGGBBAA) als separate Notationen; CSS Color Level 4 lässt dich auch rgb(r g b / a%) und hsl(h s% l% / a%) mit einem schrägstrich-getrennten Alpha schreiben. Die 8-stellige Hex-Form ist seit etwa 2017 baseline-verfügbar (Chrome 62, Firefox 49, Safari 10).

Wird meine CMYK-Umwandlung dem entsprechen, was aus dem Drucker kommt?

Wahrscheinlich nicht genau. Die einfache Mathematik, die dieses Werkzeug verwendet, ist kolorimetrisch selbstkonsistent (RGB → CMYK → RGB gibt dasselbe RGB zurück), berücksichtigt aber nicht das ICC-Profil deiner spezifischen Drucker- + Papierkombination, die Rendering-Absicht (perzeptuell, relativ-kolorimetrisch usw.) oder die Punktzunahme-Charakteristik der Presse. Für druckgebundene Arbeit mache die endgültige CMYK-Umwandlung in Photoshop oder dem bevorzugten Werkzeug deines Druckers mit dem richtigen ICC-Profil geladen, der sichtbare Unterschied zwischen einer naiven Umwandlung und einer profilbewussten kann erheblich sein, besonders für gesättigte Rots und Blaus am Rand des CMYK-Gamuts.

Was ist mit OKLCH und den modernen CSS-Farbräumen?

Modernes CSS unterstützt oklab(), oklch(), lab(), lch() und color(display-p3 ...) für breitere-Gamut- und perzeptuell-uniforme Farbarbeit. Browser-Unterstützung für diese ist seit etwa 2023 baseline (Safari 16.4, Chrome 111, Firefox 113 für oklch(); color() mit benannten Räumen wurde etwas früher in Safari ausgeliefert). Sie werden in diesem Konverter noch nicht angezeigt, teilweise weil die Mathematik schwieriger in kompakter Form anzuzeigen ist (Lab hat signierte Achsen, die nicht auf einen 0-100%-Schieberegler abbilden) und teilweise weil die meisten aktuellen Produktions-Workflows immer noch sRGB anvisieren. Wenn du in einem modernen Designsystem arbeitest, das OKLCH verwendet (Tailwind CSS v4 zum Beispiel), verwende das Tooling dieses Systems für die Farbgenerierung; dieser Konverter ist die richtige Antwort für Legacy-sRGB-Arbeit.

Werden meine Daten irgendwohin gesendet?

Nein. Die Farbumwandlung ist reine Arithmetik, es gibt nichts, was der Server tun könnte, was dein Browser nicht kann. Jede Umwandlung läuft lokal in JavaScript. Du kannst es im Netzwerk-Tab von DevTools verifizieren, während du die Farbe änderst: Es gibt keine ausgehenden Anfragen. Nimm die Seite offline (Flugmodus), nachdem sie geladen ist, und der Konverter wird immer noch funktionieren.

Verwandte Tools