HSL-farge: den enkleste måten å skrive farger i CSS på

En HSL-farge skrives med tre tall: fargetone, metning og lyshet. I CSS betyr hsl(262 83% 58%) en fargetone på 262 grader (fiolett), 83% metning (sterk) og 58% lyshet (litt over midtpunktet). Det er samme fiolett som #7c3bed, men du kan lese den. Vil du ha den lysere, øker du siste tall. Mykere, senker du det midterste. Denne egenskapen, én betydning per tall, gjør HSL til den enkleste måten å skrive farger for hånd på.

Hva fargetone, metning og lyshet betyr

Fargetone er en posisjon på fargesirkelen, angitt i grader. Rødt ligger ved 0 og igjen ved 360, gult ved 60, grønt ved 120, cyan ved 180, blått ved 240 og magenta ved 300. Å flytte fargetonen roterer fargen mens styrken holdes lik.

Metning er hvor mye farge det er. Ved 0% er alle fargetoner samme grå, og ved 100% er de så sterke som skjermen tillater. Lyshet går fra svart ved 0% til hvitt ved 100%, med ren fargetone ved 50%. Modellen dekkes bredere i fargetone, metning og lysstyrke, som også forklarer forskjellen mellom HSB i designapper og HSL i CSS.

HSL-syntaks i CSS

Det finnes to skrivemåter. Den moderne skiller verdiene med mellomrom og setter alfa etter en skråstrek. Den eldre bruker kommaer og en egen hsla()-funksjon. Nettlesere godtar begge, og hsl() tar nå også alfa, så hsla() er ikke lenger nødvendig. MDNs referanse for hsl() viser alle formene.

.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%);
}

Bygg en fargeskala ved å endre lysheten

Her viser HSL sin nytte. Hold fargetone og metning fast, endre lysheten trinnvis, og du får en familie av lyse og mørke nyanser som tydelig hører sammen. Her er én fiolett i sju trinn, med hekskoden hver konverteres til.

Kombiner dette med egendefinerte CSS-egenskaper, så bygger hele temaet på to tall. Lagre fargetone og metning én gang, og velg lyshet per rolle. Endre fargetonevariabelen, så går hele grensesnittet fra fiolett til blågrønt. Det er tanken bak 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 farger

Nyere nettlesere støtter også relativ fargesyntaks, som leser HSL-delene av en hvilken som helst farge og lar deg justere dem. hsl(from var(--brand) h s calc(l + 15%)) gir en lysere versjon av merkevarefargen, selv om den ble definert med heks. Kontroller gjeldende støtte på caniuse før du baserer deg på det, og behold en enkel reserveløsning. For å blande to farger fremfor å justere én, er color-mix() i CSS verktøyet.

Der HSL villeder deg

HSL er en omorganisering av RGB, ikke en modell av menneskets syn. Lysheten er et enkelt gjennomsnitt av den sterkeste og svakeste kanalen. Den tar derfor ikke hensyn til at øynene ser gult og grønt som langt lysere enn blått. Resultatet er at to farger med identisk HSL-lyshet kan virke helt forskjellige i lysstyrke.

Dette betyr noe på to områder. Først blir en skala med trinnvis HSL-lyshet ujevn mellom fargetoner. Gult ved 50% er altfor lyst til tekst, mens blått ved 50% består lett. Test alltid ekte par med en kontrastkontroll. Deretter vil gradienter og genererte paletter som roterer fargetonen ved fast lyshet, lysne og mørkne når de går gjennom gult og blått.

OKLCH beholder samme lettfattelige idé, lyshet, fargestyrke og fargetone, men måler lyshet slik øynene gjør. Starter du et nytt designsystem, er det et bedre standardvalg. Redigerer du eksisterende CSS eller vil ha en rask, lesbar justering, er HSL fortsatt helt fint.

Konverter HSL til heks og tilbake

Du trenger sjelden å regne selv, siden alle designverktøy og utviklerpaneler konverterer for deg. Klikk en fargeprøve i utviklerverktøyene i Chrome eller Firefox og bytt mellom formatene. Under panseret konverteres HSL først til RGB. RGB til heks er enkel regning med par, forklart i heks til RGB. Forvent små avrundingsforskjeller: hsl(262 83% 58%) blir #7c3bed, ett trinn unna #7c3aed du kanskje startet med. Hele prosentverdier kan nemlig ikke treffe alle de 16,7 millioner heksverdiene.

Designer du i Gradiently, berører du sjelden disse tallene. En Mark har sin egen palett, og med Pro lagrer merkevaresettet fargene dine så Designer bruker dem for deg.