HSL-farver: den venligste måde at skrive farver i CSS

En HSL-farve skrives som tre tal: nuance, mætning og lyshed. I CSS betyder hsl(262 83% 58%) en nuance på 262 grader (violet), 83% mætning (kraftig) og 58% lyshed (lidt over midten). Det er den samme violet som #7c3bed, men du kan læse den. Vil du have den lysere? Hæv det sidste tal. Blødere? Sænk det midterste. Den ene egenskab, én betydning pr. tal, er grunden til, at HSL er den venligste måde at skrive farver i hånden.

Hvad nuance, mætning og lyshed betyder

Nuance er en position på farvecirklen, angivet i grader. Rød ligger på 0 og igen på 360, gul på 60, grøn på 120, cyan på 180, blå på 240 og magenta på 300. Når du flytter nuancen, roterer farven, mens dens styrke bevares.

Mætning er, hvor meget farve der er. Ved 0% er alle nuancer den samme grå; ved 100% er den så kraftig, som skærmen tillader. Lyshed går fra sort ved 0% til hvid ved 100%, med den rene nuance ved 50%. Modellen gennemgås bredere i nuance, mætning og lysstyrke, som også forklarer, hvordan HSB i designprogrammer adskiller sig fra HSL i CSS.

HSL-syntaks i CSS

Der er to stavemåder. Den moderne adskiller værdierne med mellemrum og sætter alfa efter en skråstreg. Den ældre bruger kommaer og en separat hsla()-funktion. Browsere accepterer begge, og hsl() tager nu også alfa, så hsla() er ikke længere nødvendig. MDN’s reference til hsl() viser alle former.

.button {
  /* modern syntax */
  background: hsl(262 83% 58%);

  /* with 80% opacity */
  background: hsl(262 83% 58% / 0.8);

  /* older comma syntax, still valid */
  background: hsla(262, 83%, 58%, 0.8);

  /* hue can carry a unit */
  background: hsl(262deg 83% 58%);
}

Byg en farveskala ved at ændre lysheden

Det er her, HSL gør sig fortjent til sin plads. Hold nuance og mætning fast, gå trinvis gennem lysheden, og du har en familie af toner og skygger, der tydeligvis hører sammen. Her er én violet i syv trin med den hex, hver af dem omregnes til.

Kombinér det med CSS custom properties, så hænger hele dit tema på to tal. Gem nuance og mætning én gang, og vælg så en lyshed pr. rolle. Skift nuancevariablen, og hele brugerfladen går fra violet til petrol, hvilket er idéen bag CSS-variabler til temaer.

:root {
  --brand-h: 262;
  --brand-s: 83%;

  --brand-50:  hsl(var(--brand-h) var(--brand-s) 95%);
  --brand-200: hsl(var(--brand-h) var(--brand-s) 85%);
  --brand-500: hsl(var(--brand-h) var(--brand-s) 58%);
  --brand-800: hsl(var(--brand-h) var(--brand-s) 30%);
}

/* a teal theme is one line */
.theme-teal {
  --brand-h: 175;
}

Relative farver

Nyere browsere understøtter også relativ farvesyntaks, som læser HSL-delene af en hvilken som helst farve og lader dig justere dem. hsl(from var(--brand) h s calc(l + 15%)) giver en lysere version af brandfarven, uanset hvad den er, selv hvis den blev defineret i hex. Tjek den aktuelle understøttelse på caniuse, før du stoler på det, og behold en enkel reserveløsning. Til at blande to farver i stedet for at justere én er color-mix() i CSS værktøjet.

Hvor HSL snyder dig

HSL er en omarrangering af RGB, ikke en model af menneskets syn. Dens lyshed er et simpelt gennemsnit af den lyseste og den svageste kanal, så den ignorerer, at vores øjne ser gul og grøn som langt lysere end blå. Resultatet: to farver med identisk HSL-lyshed kan se helt forskellige ud i lysstyrke.

Det betyder noget to steder. For det første bliver en skala bygget ved at gå trinvis gennem HSL-lysheden ujævn på tværs af nuancer: en gul ved 50% er alt for lys til tekst, mens en blå ved 50% let består. Test altid rigtige par med en kontrasttjekker. For det andet bliver gradienter og genererede paletter, der roterer nuancen ved fast lyshed, lysere og mørkere, når de passerer gul og blå.

OKLCH beholder den samme venlige idé (lyshed, farvestyrke, nuance), men måler lyshed, som øjnene gør. Starter du et nyt designsystem, er den det bedre standardvalg; redigerer du eksisterende CSS eller vil lave en hurtig, læselig justering, er HSL stadig helt fin.

Omregning fra HSL til hex og tilbage

Du behøver sjældent at regne selv, for alle designværktøjer og browserens udviklerværktøjer omregner for dig: klik på en farveprøve i udviklerværktøjerne i Chrome eller Firefox, og skift mellem formaterne. Bag kulisserne omregnes HSL først til RGB, og RGB til hex er simpel regning med par, forklaret i hex til RGB. Regn med bittesmå afrundingsforskelle: hsl(262 83% 58%) lander på #7c3bed, ét trin fra den #7c3aed, du måske startede med, fordi hele procenter ikke kan ramme hver eneste af de 16,7 millioner hexværdier.

Designer du i Gradiently, rører du sjældent disse tal: en Mark har sin egen palet, og med Pro gemmer brandkittet dine farver, så Designer anvender dem for dig.