Kleurkiezer: Hex, RGB, HSL - en de contrastcontrole die ik heb overgeslagen

Ons merk oranje is #E99537. Ik vind het leuk. Het is warm, het is niet dezelfde sinaasappel als alle anderen, en het zit naast ons blauw zonder een gevecht.

Ik heb het maandenlang als linkkleur op wit gebruikt.

Dan heb ik de cijfers eigenlijk gelopen. #E99537 in #FFFFFF geeft een contrastverhouding van 2.38:1. WCAG 2.1 SC 1.4.3 Vereist 4.5:1 voor normale tekst. Het maakt de 3:1 bar niet eens schoon voor vrijgevig tekst. Elke oranje link op die site was, volgens de standaard die ik beweerde belangrijk te vinden, onleesbaar - en het had er prima uitgezien voor mij, op mijn monitor, in mijn kantoor, met mijn ogen.

Dat is het ding over kleur: je perceptie ervan is geen meting. #E99537 Op onze marine #0F172A greep 7.50:1, comfortabel AAA. Dezelfde kleur, een compleet ander oordeel en geen enkele hoeveelheid loensen zou me hebben verteld. je moet het berekenen.

de kleurenkiezer Op Toolz.dev converteert u tussen HEX, RGB en HSL en toont u de contrastverhouding, in de browser, zonder upload. Deze gids is wat ik wou dat ik had gelezen voordat ik die links stuurde.

tl;dr: goed doen hers Voor statische waarden, HSL wanneer je maar wilt ontlenen een kleur (hoverstatussen, paletten, donkere modus) omdat lichtheid een getal is waarvan u kunt aftrekken, en RGBA/HSL wanneer je alfa nodig hebt Contrast is 4,5:1 voor hoofdtekst en 3:1 voor grote tekst - check it, don't eyeball it. kleurenkiezer doet de conversies en de verhouding. Neem dan uw haltes naar de Gradiëntgenerator.

Hex, RGB, HSL: Wat is het werkelijke verschil?

Ze beschrijven allemaal dezelfde sRGB-kleuren. Wat verschilt is welke vragen elk gemakkelijk te beantwoorden maakt.

hers

Drie bytes in hexadecimaal. #4466EE is rood 44 (68), groen 66 (102), blauw EE (238). snelschrift #RGB werkt alleen als elk paar verdubbeld is - #FF0000 stort in #F00, maar #4466EE kan niet worden ingekort. Het 8-cijferige formulier voegt alfa toe: #4466EE80 is ongeveer 50% ondoorzichtig.

Het is de standaard in CSS omdat het compact en ondubbelzinnig is. Het is ook volledig ondoorzichtig voor menselijke lectuur, daarom heb ik nog nooit naar een hex-code gekeken en geweten wat ik moet veranderen om het een beetje minder verzadigd te maken.

RGB

Dezelfde drie kanalen, decimaal, 0-255. Moderne CSS Color 4-syntaxis laat de komma's vallen: rgb(68 102 238 / 80%). RGB is wat je wilt in JavaScript, Canvas en WebGL, omdat het het formaat is dat alles wat downstream daadwerkelijk verbruikt en je kunt er rekenen op doen.

HSL - degene die zijn plaats verdient

Hue (0-360° rond het wiel), verzadiging (0-100%), lichtheid (0-100%). #4466EE is hsl(228, 83%, 60%).

Dit is waarom dat ertoe doet. Een hoverstatus van een knop moet "dezelfde kleur hebben, iets donkerder". In HSL is het aftrekken:

.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 staten, één tint, geen ontwerptool. Dit is 90% van de reden waarom HSL in mijn toolkit staat.

De vangst - en het & # 39; is een echte - is dat HSL-lichtheid dat is nee perceptueel. hsl(60 100% 50%) (geel) en hsl(240 100% 50%) (blauw) Beide claimen 50% lichtheid, en een van hen zal uw netvlies verbranden, terwijl de andere bijna zwart is. Dat is het probleem dat Oklch oplost.

Okl, kort

CSS-kleurniveau 4 brengt oklch(L C H), waar ik is waargenomen lichtheid. Twee kleuren met dezelfde L zien er echt even helder uit. Het is het juiste hulpmiddel voor het genereren van een tonale helling waarbij elke stap gelijkmatig aanvoelt, en het is wat ik vandaag voor een nieuw ontwerpsysteem zou gebruiken. het is ook waarom linear-gradient(in oklch, blue, yellow) does't ga grijs in het midden - zie de CSS-Gradiator Generatorgids.

cmyk

Alleen afdrukken CSS heeft geen CMYK Als een merkgids u CMYK-waarden overhandigt, moet iemand deze converteren naar sRGB, en de conversie is bij benadering omdat de gamuts echt verschillen - er zijn cyans waarop een printer kan drukken en #39;t, en omgekeerd Krijgen allebei Waarden gedefinieerd in de merkgids in plaats van de ene naar de andere te converteren en te hopen.

Hoe kan ik tussen hen converteren?

Hex → RGB is slechts basisconversie. #4466EE → gesplitst in 44, 66, EE → 68, 102, 238.

RGB → HSL omvat het vinden van max/min-kanalen, het ontlenen van lichtheid aan hun gemiddelde, dan verzadiging en tint van daaruit. Het is vijftien regels code, en ik heb die vijftien regels uit het geheugen precies nul keer geschreven. Voor een eenmalige kleurenkiezer doet het meteen. Voor 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('');

En degene die er daadwerkelijk toe doet: relatieve luminantie en contrastverhouding, rechtstreeks van de WCAG-definitiepiepsel

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

Let op die groene coëfficiënten: 0,2126 rood, 0,7152 groen, 0,0722 blauw. Groen draagt ruwweg zeventig procent van waargenomen helderheid. Dat is de reden waarom een heldergroen en helder blauw bij identieke HSL-lichtheid in niets op elkaar lijken, en het is de hele reden dat perceptuele kleurruimten bestaan.

Welke contrastverhoudingen moet ik eigenlijk raken?

Sommige reële getallen, allemaal berekend in plaats van geraden:

Er vallen twee dingen uit die tafel.

#767676 is de lichtste grijs die AA op wit doorgeeft. nee #888, niet #999. Elke 'gedempte secundaire tekst' die ik in het wild zie, is er een paar schakeringen voorbij. het onthouden waard.

Dezelfde merkkleur kan passeren en falen, afhankelijk van waar je het neerzet. Onze sinaasappel is onbruikbaar als een schakel op wit en uitstekend als accent op marine. Dat is geen fout in de kleur; het is een beperking waar de kleur mag leven. Toen ik het eenmaal zo had ingekaderd, werd de ontwerpbeslissing gemakkelijker, niet moeilijker.

Hoe bouw ik een palet dat niet tegen zichzelf vecht?

Kies een tint. variëren lichtheid. Dat is de hele methode, en HSL maakt het 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%);
}

Merk op dat de verzadiging aan de donkere kant iets daalt. Het constant houden van de verzadiging terwijl de lichtheid daalt, levert stappen op die er steeds harder en neoner uitzien - een kleine desaturatie aan de onderkant zorgt ervoor dat een helling eerder ontworpen dan gegenereerd aanvoelt.

noem dan dingen door rol, niet door uiterlijk, dus een rebranding is een wijziging van één regel in plaats van een zoek-en-vervanging in veertig bestanden:

: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;
  }
}

Donkere modus is geen inversie

Draai je palet niet om. Twee dingen breken onmiddellijk:

1. Verzadigde kleuren worden luider op donkere achtergronden. Een levendig blauw dat leest als "Professional" op wit leest als "vibrerende" op bijna-zwart. Til lichtheid op, laat een beetje verzadiging vallen.
2. Pure zwarte achtergronden veroorzaken halatie- heldere tekst aan #000 smeermiddelen voor mensen met astigmatisme. Gebruik een zeer donkergrijsblauw (#0F172A, #111827) in plaats daarvan. Het geeft je ook een plek om te gaan voor verhoogde oppervlakken, wat puur zwart niet doet.

Harmonieschema's, eerlijk

De regel waar ik steeds op terugkom: Eén primair, één accent, een grijze helling. Alles daarbuiten moet zijn bestaan rechtvaardigen.

Wat maakt mensen nog meer wakker?

Kleur alleen is nooit genoeg

Ongeveer 1 op de 12 mannen en 1 op de 200 vrouwen hebben een vorm van kleurzichttekort. Als rood-betekenaars-fout en groen-means-succes jouw slechts Signaal, een betekenisvol deel van uw gebruikers ziet twee identieke grijze badges. Voeg een pictogram toe, voeg een woord toe. WCAG SC 1.4.1 is hier expliciet over en het kost je er een <span>.

De test van één seconde: screenshot van uw gebruikersinterface, desatureer deze en kijk of het nog steeds werkt. Als dat niet het geval is, doet kleur het dragen van draagkrachten, het zou niet alleen moeten doen.

Focusringen hebben ook contrast nodig

Focus-indicatoren zijn UI-componenten en vallen onder de 3:1-regel tegen aanliggend kleuren - wat betekent dat een focusring moet contrasteren met zowel het element dat hij omringt als de pagina erachter Een subtiele blauwe omtrek op een blauwe knop is een veel voorkomende en volledig onzichtbare mislukking.

Ontwerp in het grijs eerst

Bouw de hele lay-out in grijstinten. Het dwingt de hiërarchie om uit grootte, gewicht en afstand te komen - en dat is waar hiërarchie behoren komen van. Voeg kleur als laatste toe, als nadruk. Interfaces die op deze manier zijn gebouwd, zijn bijna per ongeluk toegankelijk en overleven de donkere modus zonder een herschrijving.

De kleurkiezer gebruiken

1. Open de kleurenkiezer.
2. Sleep het spectrum in of plak een bekende waarde in het HEX-, RGB- of HSL-veld - de andere worden in stap bijgewerkt.
3. Let op de HSL. Dat is je werkformaat.
4. Genereer de helling door H en S vast te houden en L te stappen.
5. Controleer elk tekst-/achtergrondpaar met de 4.5:1-regel vooruit Het gaat naar een stylesheet, niet nadat een klant je erover heeft gemaild.

Alles draait in uw tabblad Niets wordt geüpload - dat kunt u in ongeveer tien seconden bevestigen in het deelvenster DevTools Netwerk.

Veelgestelde vragen

Wat is het verschil tussen HEX en RGB?

Niets, semantisch - ze coderen dezelfde drie sRGB-kanalen HEX schrijft ze in basis 16 (#4466EE), RGB in decimaal (rgb(68 102 238)). HEX is compacter en is de CSS-conventie; RGB is gemakkelijker te berekenen in JavaScript. Kies per context, niet per principe.

Welk kleurformaat moet ik gebruiken in CSS?

Hex voor statische waarden die je gewoon transcribeert. HSL op elk moment dat u nodig heeft ontlenen een kleur - zweeftoestanden, uitgeschakelde toestanden, een tonale helling, een dark-mode variant - omdat lichtheid een getal is dat je kunt aanpassen HSLA of RGBA wanneer je alfa nodig hebt OKLCH als je ' We bouwen een nieuw ontwerpsysteem en willen perceptueel gelijkmatige stappen.

Hoe weet ik of mijn kleuren toegankelijk zijn?

Bereken de contrastverhouding WCAG 2.1 AA heeft 4,5:1 nodig voor normale tekst, 3:1 voor grote tekst (18pt, of 14pt vet) en voor UI-componenten Oordeel niet op oog - #E99537 Op wit ziet er prima uit en scoort 2,38:1. Controleer ook of er geen informatie wordt overgebracht door alleen kleur.

Wat is het lichtste grijs dat ik kan gebruiken voor tekst op wit?

#767676, die landt om 4,54:1 - nauwelijks over de 4,5:1 AA-lijn. #999999 is slechts 2.85:1 en mislukt. Als je AAA wilt, #595959 Precies 7.00:1.

Waarom komt HSL-lichtheid niet overeen met de waargenomen helderheid?

Omdat HSL een eenvoudige wiskundige transformatie van RGB is, geen model van menselijk zicht. Het oog is veel gevoeliger voor groen dan voor blauw - de WCAG-luminantieformule weegt groen bij 0,7152 en blauw bij 0,0722 - dus hsl(60 100% 50%) (geel) en hsl(240 100% 50%) (blauw) lijken niets op elkaar ondanks dat ze beide 50% lichtheid claimen. OKLCH bestaat specifiek om dit op te lossen.

Hoe bouw ik een palette in de donkere modus?

Draai de lichte niet om. Bouw een tweede palet: een donkergrijze achtergrond in plaats van puur zwart (zuiver zwart veroorzaakt halatie voor lezers met astigmatisme), lichtere en iets minder verzadigde versies van je accenten en tekst die 39; gebroken wit is in plaats van #FFFFFF. Wissel ze met CSS-aangepaste eigenschappen onder prefers-color-scheme: dark.

Wat is de beste kleur voor een call-to-action-knop?

Er is't een Het bewijs voor " orange converteert best" is dun en meestal folklore Het gaat erom dat de CTA contrasteert met alles eromheen en dat dezelfde kleur overal op de site hetzelfde betekent Als je pagina meestal blauw is, werkt een oranje CTA - vanwege het contrast, niet de oranje.

Kan ik CMYK-kleuren op internet gebruiken?

Nee - CSS heeft geen CMYK-notatie, en de gamuts don't kaart schoon, dus elke conversie is een benadering Als u merkconsistentie nodig hebt over print en scherm, definieer beide waarden in de merkgids vanaf het begin in plaats van de ene in de andere om te zetten.

Hoe converteer ik een hex-kleur naar RGB?

Splits de zescijferige hex in drie paren en lees elk paar als een basis-16-getal van 0 tot 255. #4466EE HALD rgb(68, 102, 238): 44 is 68, 66 is 102 en EE is 238. Een driecijferige steno zoals #46E breidt eerst uit door elk cijfer te verdubbelen. De kleurkiezer doet deze conversie onmiddellijk, in beide richtingen.

Wat is een HEX-kleurcode?

Een hex-kleurcode is een zescijferige, basis-16-weergave van een sRGB-kleur, waarbij elk twee cijfers wordt gebruikt voor de rode, groene en blauwe kanalen na een voorloop #. #FFFFFF is wit en #000000 is zwart. een optioneel zevende en achtste cijfer Voeg een alfa (opacity) kanaal toe, zoals in #4466EE80.

inpakken

Kleurwerk heeft twee helften en de meesten van ons doen alleen de eerste. Een palet kiezen is de leuke, subjectieve helft. Het verifiëren ervan - luminantie, contrast, kleurenblinde leesbaarheid, donkermodusgedrag - is de helft die ' s gewoon rekenen, en het ' is de helft die beslist of mensen daadwerkelijk kunnen lezen wat je hebt gebouwd.

De rekenkunde is niet moeilijk. Het is gewoon iets dat je moet beginnen te beginnen, en ik heb maanden niet op mijn eigen site, in een kleur die ik zelf heb uitgekozen, maandenlang niet op mijn eigen site gekozen.

de kleurenkiezer Converteert tussen Hex, RGB en HSL en geeft u de contrastverhouding, gratis en volledig in uw browser. Combineer het met de Gradiëntgenerator voor melanges die hun contrast van begin tot eind behouden, en zie de rest van de plank in de Handleiding voor productiviteitstools voor .