Farbauswahl: Hex, RGB, HSL – und der Kontrast-Check, den ich übersprungen habe

Unsere Marke Orange ist #E99537drohen Ich mag es. Es ist warm, es ist nicht das gleiche Orange wie alle anderen und es sitzt kampflos neben unserem Blau.

Ich habe es monatelang als Linkfarbe auf Weiß verwendet.

Dann habe ich die Zahlen tatsächlich ausgeführt. #E99537 auf #FFFFFF gibt ein Kontrastverhältnis von 2.38:1drohen WCAG 2.1 SC 1.4.3 Erfordert 4,5:1 für normalen Text. Es löscht nicht einmal die 3: 1-Bar für weit Text Jeder orange Link auf dieser Seite war nach dem Standard, den ich mir zu interessieren hatte, unlesbar - und es sah für mich vollkommen gut aus, auf meinem Monitor, in meinem Büro, mit meinen Augen.

Das ist die Sache mit Farbe: Ihre Wahrnehmung ist keine Maßnahme. #E99537 Auf unserer Marine #0F172A Partitur 7.50: 1, bequem aaa. Gleiche Farbe, völlig anderes Urteil und keine Schielen darüber hätte mir gesagt. Sie müssen es berechnen.

der Farbpflücker Auf toolz.dev konvertiert zwischen Hex, RGB und HSL und zeigt Ihnen das Kontrastverhältnis im Browser ohne Upload. Diese Anleitung ist das, was ich mir wünsche, bevor ich diese Links versendete.

tl; dr: einsetzen verhexen Für statische Werte, HSL Wann immer Sie müssen ableiten eine Farbe (Hover-Zustände, Paletten, dunkler Modus), da Helligkeit eine Zahl ist, von der Sie abziehen können, und RGBA/HSLA Wenn Sie Alpha brauchen. Der Kontrast beträgt 4,5: 1 für Körpertext und 3: 1 für großen Text - überprüfen Sie ihn, werfen Sie ihn nicht auf den Punkt. Farbpflücker Macht die Umsätze und das Verhältnis. Dann machen Sie Ihre Stopps zum Gradientengeneratordrohen

Hex, RGB, HSL: Was ist der eigentliche Unterschied?

Sie alle beschreiben die gleichen SRGB-Farben. Was sich unterscheidet, ist, welche Fragen jeder leicht zu beantworten macht.

verhexen

Drei Bytes in Hexadezimal. #4466EE ist rot 44 (68), grün 66 (102), blau EE (238). Stenografie #RGB Funktioniert nur, wenn jedes Paar verdoppelt wird — #FF0000 bricht zusammen #F00, aber #4466EE kann nicht gekürzt werden. Das 8-stellige Formular fügt Alpha hinzu: #4466EE80 ist ungefähr 50% undurchsichtig.

Es ist die Standardeinstellung in CSS, weil es kompakt und eindeutig ist. Es ist auch völlig undurchsichtig für das menschliche Lesen, weshalb ich noch nie einen Hex-Code gesehen habe und weiß, was ich ändern muss, um ihn etwas weniger gesättigt zu machen.

RGB

Gleiche drei Kanäle, dezimal, 0–255. Moderne CSS Color 4 Syntax lässt die Kommas fallen: rgb(68 102 238 / 80%)drohen RGB ist das, was Sie in JavaScript, Canvas und WebGL wollen, da es das Format ist, das alles, was der Downstream tatsächlich verwendet, und Sie können darauf arithmetisch machen.

HSL - derjenige, der seinen Platz verdient

Farbton (0–360° um das Rad), Sättigung (0–100%), Leichtigkeit (0–100%). #4466EE ist hsl(228, 83%, 60%)drohen

Hier ist das der Grund. Ein Button-Schwebezustand sollte "die gleiche Farbe, etwas dunkler" sein. In Hex ist das eine unbeantwortbare Frage. In HSL ist es Subtraktion:

.btn {
  background: hsl(228 83% 60%);   /* #4466EE */
}
.btn:hover  { background: hsl(228 83% 52%); }  /* darker  */
.btn:active { background: hsl(228 83% 44%); }  /* darker still */
.btn:disabled { background: hsl(228 22% 70%); } /* desaturated, lifted */

Vier Zustände, ein Farbton, kein Designwerkzeug. Dies ist 90% der Gründe, warum HSL in meinem Toolkit enthalten ist.

Der Haken - und er ist ein echter - ist, dass HSL-Leichtigkeit ist nicht Wahrnehmungsvermögen. hsl(60 100% 50%) (gelb) und hsl(240 100% 50%) (Blau) Beide behaupten 50% Leichtigkeit, und einer von ihnen verbrennt Ihre Netzhaut, während der andere fast schwarz ist. Das ist das Problem, das Oklch löst.

Oklch, kurz

CSS-Farbstufe 4 bringt oklch(L C H), wo l ist wahrgenommen Leichtigkeit. Zwei Farben mit dem gleichen L wirken wirklich gleich hell. Es ist das richtige Werkzeug, um eine Tonrampe zu erzeugen, bei der sich jeder Schritt gleichmäßig anfühlt, und das ist das, was ich heute für ein neues Designsystem verwenden würde. es ist auch warum linear-gradient(in oklch, blue, yellow) in der Mitte nicht grau - siehe das CSS-Gradientengenerator-Anleitungdrohen

CMYK

Nur drucken. CSS hat kein CMYK. Wenn ein Markenführer Ihnen CMYK-Werte übergibt, muss jemand in sRGB umgewandelt werden, und die Konvertierung ist ungefähr, da sich die Farbpaletten wirklich unterscheiden - es gibt Cyane, die ein Drucker treffen kann, den Ihr Monitor nicht kann, und umgekehrt. bekommen beide Werte, die in der Markenführung definiert sind, anstatt ineinander zu konvertieren und zu hoffen.

Wie konvertiere ich zwischen ihnen?

Hex → RGB ist nur die Basiskonvertierung. #4466EE → Aufteilen in 44, 66, EE → 68, 102, 238.

RGB → HSL beinhaltet das Auffinden von Max / Min-Kanälen, Ableiten von Leichtigkeit aus ihrem Durchschnitt, dann von dort Sättigung und Farbton. Es sind fünfzehn Codezeilen, und ich habe diese fünfzehn Zeilen genau null mal aus dem Speicher geschrieben. Für ein einmaliges, Farbpflücker macht es sofort. Für Code:

const hexToRgb = (hex) => {
  const n = parseInt(hex.replace('#', ''), 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
};

const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');

Und derjenige, der tatsächlich zählt - relatives Luminanz- und Kontrastverhältnis, direkt aus dem WCAG-Definition:

const luminance = (hex) => {
  const { r, g, b } = hexToRgb(hex);
  const [R, G, B] = [r, g, b]
    .map(v => v / 255)
    .map(v => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
};

const contrast = (a, b) => {
  const [x, y] = [luminance(a), luminance(b)].sort((m, n) => n - m);
  return (x + 0.05) / (y + 0.05);
};

contrast('#E99537', '#FFFFFF'); // 2.38  ← the one that got me
contrast('#E99537', '#0F172A'); // 7.50

Beachten Sie diese grünen Koeffizienten: 0,2126 rot, 0,7152 grün, 0,0722 blau. Grün trägt ungefähr Siebzig Prozent der wahrgenommenen Helligkeit. Deshalb sieht ein helles Grün und ein helles Blau bei identischer HSL-Helligkeit nicht gleich aus, und es ist der Grund, warum Wahrnehmungsfarbräume existieren.

Welche Kontrastverhältnisse muss ich eigentlich erreichen?

Einige reelle Zahlen, alle berechnet statt erraten:

Zwei Dinge fallen aus diesem Tisch.

#767676 ist das leichteste Grau, das AA auf Weiß passiert. nicht #888, nicht #999drohen Jede "gedämpfte Sekundärtext" Farbe, die ich in freier Wildbahn sehe, ist ein oder zwei Farbtöne hinter sich. Auswendiglernen wert.

Die gleiche Markenfarbe kann je nach dem Ort, an dem Sie sie einsetzen, passieren und scheitern. Unser Orange ist als Link auf Weiß unbrauchbar und als Akzent auf Navy ausgezeichnet. Das ist kein Fehler in der Farbe; es ist eine Einschränkung, wo die Farbe leben darf. Sobald ich es so gerahmt hatte, wurde die Designentscheidung einfacher und nicht schwieriger.

Wie baue ich eine Palette, die nicht selbst kämpft?

Wählen Sie einen Farbton. Leichtigkeit variieren. Das ist die gesamte Methode, und HSL macht sie mechanisch:

:root {
  /* One hue: 228. Nine steps of lightness. */
  --blue-50:  hsl(228 83% 96%);
  --blue-100: hsl(228 83% 91%);
  --blue-200: hsl(228 83% 84%);
  --blue-300: hsl(228 83% 76%);
  --blue-400: hsl(228 83% 68%);
  --blue-500: hsl(228 83% 60%);  /* #4466EE — the brand colour */
  --blue-600: hsl(228 83% 50%);
  --blue-700: hsl(228 78% 41%);
  --blue-800: hsl(228 72% 33%);
  --blue-900: hsl(228 66% 25%);
}

Beachten Sie, dass die Sättigung am dunklen Ende leicht abnimmt. Wenn Sie die Sättigung konstant halten, während die Leichtigkeit fällt, werden Schritte erzeugt, die immer härter und neonartiger aussehen. Eine kleine Entsättigung am Boden sorgt dafür, dass sich eine Rampe eher anfühlt als erzeugt.

Dann nennen Sie die Dinge nach Rolle, nicht nach Erscheinung, also ist ein Rebrand eine einzeilige Änderung statt eines Suchens und Ersetzens in vierzig Dateien:

:root {
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-text: #0F172A;
  --color-text-muted: #6B7280;   /* 4.83:1 on white — checked */
  --color-surface: #F8FAFC;
  --color-border: #E5E7EB;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--blue-400);  /* lift it — dark bg needs a lighter primary */
    --color-text: #F8FAFC;
    --color-text-muted: #9CA3AF;
    --color-surface: #1E293B;
    --color-border: #374151;
  }
}

Der dunkle Modus ist keine Inversion

Drehen Sie Ihre Palette nicht um. Zwei Dinge brechen sofort:

1. Gesättigte Farben werden auf dunklen Hintergründen lauter. Ein lebendiges Blau, das als "Professional" auf Weiß gelesen wird, wird als "vibrierend" auf fast schwarz angezeigt. Leichtigkeit heben, Sättigung ein wenig fallen lassen.
2. Reine schwarze Hintergründe verursachen Halation - heller Text auf #000 Abstriche für Menschen mit Astigmatismus. Verwenden Sie ein sehr dunkelgraublau (#0F172A, #111827) stattdessen. Es gibt Ihnen auch einen Platz für erhöhte Oberflächen, was reines Schwarz nicht tut.

Harmonie, ehrlich

Die Regel, auf die ich immer wieder zurückkomme: Ein primärer, ein Akzent, eine graue Rampe. Alles darüber hinaus muss seine Existenz rechtfertigen.

Was stolpert sonst noch?

Farbe allein ist nie genug

Etwa 1 von 12 Männern und 1 von 200 Frauen haben eine Form von Farbsehensmangel. Wenn Rot-Mittel-Fehler und Grün-Mittel-Erfolg Ihr nur Signal, ein sinnvolles Stück Ihrer Benutzer sieht zwei identische graue Abzeichen. Fügen Sie ein Symbol hinzu, fügen Sie ein Wort hinzu. WCAG SC 1.4.1 ist explizit darüber und es kostet Sie eine <span>drohen

Der einsekündige Test: Screenshot Ihrer Benutzeroberfläche, entsättigen Sie und sehen, ob es noch funktioniert. Wenn dies nicht der Fall ist, sollte die Farbe tragende Arbeit leisten, sollte sie nicht alleine tun.

Fokusringe brauchen auch Kontrast

Fokusindikatoren sind UI-Komponenten und fallen unter die 3:1-Regel gegen angrenzend Farben - Das bedeutet, dass ein Fokusring sowohl das Element, das er umgibt, als auch die dahinterliegende Seite kontrastieren muss. Ein subtiler blauer Umriss auf einem blauen Knopf ist ein häufiger und völlig unsichtbarer Fehler.

Design in Grau zuerst

Bauen Sie das gesamte Layout in Graustufen auf. Es zwingt die Hierarchie, aus Größe, Gewicht und Abstand zu kommen - wo Hierarchie sollte kommen von. Fügen Sie Farbe als Betonung hinzu. Auf diese Weise erstellte Schnittstellen sind fast aus Versehen zugänglich und überleben den Dark-Modus ohne eine Neuschreibung.

Verwenden des Farbwählers

1. Öffne das Farbpflückerdrohen
2. Ziehen Sie das Spektrum oder fügen Sie einen bekannten Wert in das Feld Hex, RGB oder HSL ein - die anderen werden in Schritt aktualisiert.
3. Beachten Sie die HSL. Das ist Ihr Arbeitsformat.
4. Erzeugen Sie die Rampe, indem Sie h und s halten und L treten.
5. Überprüfen Sie jedes Text- / Hintergrundpaar mit der 4,5: 1-Zeile vor Es geht in ein Stylesheet, nicht nachdem ein Kunde Ihnen eine E-Mail darüber geschickt hat.

Alles läuft auf Ihrer Registerkarte. Es wird nichts hochgeladen – das können Sie im DevTools Network Panel in etwa zehn Sekunden bestätigen.

Häufig gestellte Fragen

Was ist der Unterschied zwischen Hex und RGB?

Nichts semantisch - sie codieren die gleichen drei sRGB-Kanäle. Hex schreibt sie in Basis 16 (#4466EE), RGB in dezimal (rgb(68 102 238)).). Hex ist kompakter und ist die CSS-Konvention, RGB ist in JavaScript einfacher zu berechnen. Auswahl pro Kontext, nicht nach Prinzip.

Welches Farbformat soll ich in CSS verwenden?

Hex für statische Werte, die Sie gerade transkribieren. HSL jederzeit ableiten Eine Farbe - Schwebezustände, deaktivierte Zustände, eine Tonrampe, eine Dunkelmodus-Variante - weil Helligkeit eine Zahl ist, die Sie einstellen können. HSLA oder RGBA, wenn Sie Alpha benötigen. OKLCH, wenn Sie ein neues Designsystem aufbauen und wahrnehmungsmäßig gleichmäßige Schritte wünschen.

Woher weiß ich, ob meine Farben zugänglich sind?

Berechnen Sie das Kontrastverhältnis. WCAG 2.1 AA benötigt 4,5:1 für normalen Text, 3:1 für großen Text (18pt oder 14-Punkt-Fett) und für UI-Komponenten. Nicht nach dem Auge urteilen - #E99537 Auf Weiß sieht gut aus und punktet 2,38:1. Überprüfen Sie auch, dass keine Informationen nur durch Farbe übermittelt werden.

Was ist das leichteste Grau, das ich für Text auf Weiß verwenden kann?

#767676, die bei 4,54: 1 landet - kaum über der 4,5: 1-AA-Linie. #999999 ist nur 2,85: 1 und scheitert. Wenn Sie AAA wollen, #595959 Hits genau 7.00:1.

Warum passt HSL-Leichtigkeit nicht mit der wahrgenommenen Helligkeit?

Denn HSL ist eine einfache mathematische Transformation von RGB, kein Modell menschlicher Sicht. Das Auge ist weitaus grüner als gegenüber blau - die WCAG-Luminanzformel wiegt grün bei 0,7152 und blau bei 0,0722 - so hsl(60 100% 50%) (gelb) und hsl(240 100% 50%) (Blau) Sie sehen nicht gleich aus, obwohl beide 50% Leichtigkeit behaupten. OKLCH existiert speziell, um dies zu beheben.

Wie erstelle ich eine Dark Mode-Palette?

Umkehren Sie das Licht nicht um. Erstellen Sie eine zweite Palette: einen dunkelgraublauen Hintergrund statt reines Schwarz (reines Schwarz verursacht eine Halation für Leser mit Astigmatismus), hellere und etwas weniger gesättigte Versionen Ihrer Akzente und Text, der eher cremefarben als #FFFFFFdrohen Tauschen Sie sie mit CSS-Benutzerdefinierten Eigenschaften aus prefers-color-scheme: darkdrohen

Was ist die beste Farbe für einen Call-to-Action-Button?

Es gibt keine. Der Beweis für "orange konvertiert am besten" ist dünn und meistens folklorisch. Was zählt ist, dass der CTA mit allem um ihn herum kontrastiert und dass die gleiche Farbe überall auf der Website dasselbe bedeutet. Wenn Ihre Seite größtenteils blau ist, funktioniert ein orangefarbener CTA - wegen des Kontrasts nicht der Orange.

Kann ich CMYK-Farben im Web verwenden?

Nein - CSS hat keine CMYK-Notation, und die Farbfelder werden nicht sauber abgelegt, sodass jede Konvertierung eine Annäherung darstellt. Wenn Sie Markenkonsistenz über Druck und Bildschirm benötigen, definieren Sie beide Werte in der Markenanleitung von Anfang an, anstatt eine in die andere zu konvertieren.

Wie konvertiere ich eine Hex-Farbe in RGB?

Teilen Sie das sechsstellige Hex in drei Paare und lesen Sie jedes Paar als Basis-16-Zahl von 0 bis 255. #4466EE wird rgb(68, 102, 238): 44 ist 68, 66 ist 102 und EE 238. Eine dreistellige Kurzschrift wie z. #46E Erweitert sich zuerst, indem jede Ziffer verdoppelt wird. Der Farbwähler führt diese Umwandlung sofort in beide Richtungen durch.

Was ist ein Hex-Farbcode?

Ein Hex-Farbcode ist eine sechsstellige Basis-16-Darstellung einer sRGB-Farbe, wobei nach einer Führung jeweils zwei Ziffern für die Kanäle Rot, Grün und Blau verwendet werden #drohen #FFFFFF ist weiß und #000000 ist schwarz. Eine optionale siebte und achte Ziffer fügen einen Alpha-(Opazitäts-) Kanal hinzu, wie in #4466EE80drohen

Abschluss

Farbarbeit hat zwei Hälften und die meisten von uns machen nur die erste. Die Auswahl einer Palette ist die lustige, subjektive Hälfte. Die Überprüfung - Helligkeit, Kontrast, farbblinde Lesbarkeit, Verhalten im Dunkeln - ist die Hälfte, die nur arithmetisch ist, und es ist die Hälfte, die entscheidet, ob die Leute tatsächlich lesen können, was Sie gebaut haben.

Die Arithmetik ist nicht schwer. Es ist nur etwas, was Sie müssen anstellenUnd ich habe monatelang auf meiner eigenen Seite eine Farbe in einer Farbe, die ich mir ausgesucht habe.

der Farbpflücker Konvertiert zwischen Hex, RGB und HSL und gibt Ihnen das Kontrastverhältnis, kostenlos und vollständig in Ihrem Browser. Kombiniere es mit dem Gradientengenerator Für Mischungen, die ihren Kontrast von Ende zu Ende halten und den Rest des Regals in der Handbuch für Entwicklerproduktivitätstoolsdrohen