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 angeblich interessierte, unlesbar - und er hatte für mich, auf meinem Monitor, in meinem Büro, mit meinen Augen völlig in Ordnung ausgesehen.

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 benötigen Kontrast ist 4,5:1 für Fließtext und 3:1 für großen Text - überprüfen Sie es, don't eyeball it. 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 - die, die ihren 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 es's ist echt - ist, dass HSL-Leichtheit 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) does' in der Mitte nicht grau werden - siehe die CSS-Gradientengenerator-Anleitungdrohen

CMYK

Nur drucken CSS hat keine CMYK Wenn ein Markenführer Ihnen CMYK-Werte gibt, muss jemand sie in sRGB umwandeln, und die Konvertierung ist ungefähr, weil die Spielräume wirklich unterschiedlich sind - es gibt Zyanen, die ein Drucker treffen kann, dass Ihr Monitor kann' t, und umgekehrt. Holen 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 das, was tatsächlich zählt - relative Leuchtdichte 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%);
}

Sättigung am dunklen Ende leicht abfallend Halten Sättigung konstant, während Leichtigkeit fällt erzeugt Schritte, die immer rauer und neoniger aussehen - eine kleine Entsättigung am unteren Ende ist es, die eine Rampe fühlen sich entworfen statt 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 heißt, ein Fokusring muss sowohl mit dem Element, das er umgibt, als auch mit der Seite dahinter kontrastieren. Ein subtiler blauer Umriss auf einer blauen Schaltfläche 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 dazu, sich aus Größe, Gewicht und Abstand zu ergeben - und hier ist die 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 an oder fügen Sie einen bekannten Wert in das HEX-, RGB- oder HSL-Feld ein - die anderen aktualisieren ihn schrittweise.
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 in Ihrem Tab. 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 kodieren 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 - Hover-Zustände, deaktivierte Zustände, eine Tonrampe, eine Dark-Mode-Variante - denn Helligkeit ist eine Zahl, die Sie anpassen können. HSLA oder RGBA, wenn Sie Alpha benötigen. OKLCH, wenn Sie & #39; bauen ein neues Designsystem auf und möchten wahrnehmungsmäßig gleichmäßige Schritte.

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 (18 pt, oder 14 pt fett) und für UI-Komponenten Nicht nach Auge - beurteilen #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, das 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 des menschlichen Sehens Das Auge reagiert weitaus empfindlicher auf Grün als auf Blau - die WCAG-Luminanzformel gewichtet Grün mit 0,7152 und Blau mit 0,0722 - also 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 ' t. Die Beweise für " orange konvertiert best" ist dünn und hauptsächlich Folklore. Entscheidend ist, dass der CTA mit allem drumherum kontrastiert und dass überall auf der Website die gleiche Farbe dasselbe bedeutet Wenn Ihre Seite größtenteils blau ist, funktioniert ein orangefarbener CTA - wegen des Kontrasts nicht das Orange.

Kann ich CMYK-Farben im Web verwenden?

Nein - CSS hat keine CMYK-Notation, und die Gamuts don' t bilden sauber ab, so dass jede Konvertierung eine Näherung ist Wenn Sie Markenkonsistenz über Druck und Bildschirm benötigen, definieren Sie beide Werte im Markenführer von Anfang an, anstatt einen in den anderen umzuwandeln.

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 unterhaltsame, subjektive Hälfte. Die Überprüfung - Leuchtdichte, Kontrast, farbenblinde Lesbarkeit, Dunkelmodusverhalten - ist die Hälfte, die & #39;s nur arithmetisch und it& #39; ist die Hälfte, die darüber entscheidet, ob Menschen 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