Fargetone, metning og lysstyrke (HSB) enkelt forklart

Fargetone, metning og lysstyrke (HSB) er en måte å beskrive enhver farge på med tre enkle innstillinger. Fargetone forteller hvilken farge det er, som en vinkel fra 0 til 360 grader rundt fargesirkelen. Metning forteller hvor intens den er, fra grått ved 0 prosent til full farge ved 100 prosent. Lysstyrke er hvor mye lys den har, fra svart ved 0 prosent til den lyseste utgaven av fargen ved 100 prosent. Når du ser farger slik, slipper du å gjette når du justerer en palett.

Fargetone: hvilken farge

Fargetone er plasseringen på fargesirkelen. På skjermens fargesirkler ligger rødt ved 0 grader, grønt ved 120 og blått ved 240, med gult, cyan og magenta mellom dem. Fordi fargetone er en vinkel, blir fargeharmonier enkel regning: legg til 180 grader for en komplementærfarge og 120 for en triade.

Metning: hvor sterk

Metning styrer hvor mye av fargetonen som er til stede. Senk den, så nærmer fargen seg grått; øk den, så blir fargen sterkere. De fleste raffinerte paletter ligger godt under full metning. Fullt mettede farger roper, noe som passer på et salgsklistremerke, men er slitsomt på et helt nettsted. Dempede fargepaletter handler i stor grad om lavere metning.

Lysstyrke: hvor mye lys

I HSB forteller lysstyrke hvor opplyst fargen er. Ved 0 prosent er alle farger svarte, uansett fargetone eller metning. Ved 100 prosent får du den lyseste utgaven skjermen kan vise for den fargetonen og metningen. For å lage en lys pastell i HSB holder du lysstyrken høy og senker metningen, som blander inn hvitt. Det er nettopp tanken bak lyse, dempede og mørke fargevarianter.

HSB og HSL: forskjellen mange snubler i

HSL ser nesten identisk ut: fargetone, metning og lyshet. Fargetonen er den samme. Forskjellen ligger i den tredje innstillingen. I HSL er lyshet på 50 prosent den rene fargen, 0 prosent er svart, og 100 prosent er alltid hvitt. I HSB gir lysstyrke på 100 prosent den rene fargen ved full metning, og du når bare hvitt ved også å senke metningen. Metningstallene er også forskjellige, så den samme fargen har ulike verdier i hver modell.

Bruk HSL i CSS

CSS forstår hsl() direkte, som gjør det praktisk for temaer. Behold fargetonen i en variabel, så kan du endre fargen i et helt grensesnitt med ett tall. Det finnes også hwb() (fargetone, hvithet og svarthet), som ligger nærmere HSB i tankegangen. Du finner detaljer på MDNs side om hsl(), og HSL-farger går mer i dybden.

:root {
  --hue: 262;
  --brand: hsl(var(--hue) 83% 58%);   /* #7c3aed */
  --brand-soft: hsl(var(--hue) 83% 92%);
  --brand-deep: hsl(var(--hue) 70% 28%);
  --brand-muted: hsl(var(--hue) 25% 55%);
}

/* Change --hue to 175 and the whole set turns teal */

Hvorfor lik lyshet ikke ser lik ut

HSB og HSL handler om geometri, ikke persepsjon. Rent gult og rent blått har begge HSL-lyshet på 50 prosent, men gult ser mye lysere ut: etter WCAG-formelen er den relative luminansen omtrent 0,93 mot blått sitt 0,07. Legg hvit tekst på begge, så blir forskjellen tydelig. Derfor kan en palett bygd med jevne trinn i HSL-lyshet se ujevn ut, og derfor må tekstkontrast alltid sjekkes, aldri tas for gitt.

Perseptuelle modeller løser dette. OKLCH beholder den intuitive tanken om lyshet, kroma og fargetone, men lysheten følger det øyet ser, slik at trinnene ser jevne ut. HSB og HSL er perfekte for raske justeringer; velg OKLCH til en merkevareskala eller en gradient uten grumsete midtpartier.

Raske måter å justere en farge med HSB

• For sterk: senk metningen med 15 til 25 poeng før du endrer noe annet.
• For blass: øk metningen litt, eller flytt fargetonen noen grader i varmere retning.
• Trenger en tilstand ved musepeker: senk lysstyrken med omtrent 10 poeng.
• Trenger en lys bakgrunnsfarge: behold fargetonen, senk metningen kraftig og øk lysstyrken til nær 100.
• To farger krasjer: flytt den ene fargetonen nærmere den andre, eller demp en av dem.

Hvis du heller vil begynne med et ferdig uttrykk enn med tre skyveknapper, lar Markedet i Gradiently deg søke etter Marker med fargeord som «deep teal» eller «warm peach».