Kort fortalt
- Nuance, mætning og lysstyrke, eller HSB, beskriver en farve med tre tal: nuance er farvens vinkel på cirklen, mætning er dens styrke, og lysstyrke er, hvor meget lys den har.
- HSB kaldes også HSV, hvor V står for value; de to navne beskriver den samme model.
- HSL er en nær slægtning, hvor en lyshed på 50 procent giver den rene farve, og 100 procent altid giver hvid.
- Designværktøjer som Figma og Photoshop har HSB-vælgere, mens CSS understøtter hsl(), men ikke HSB.
- Hverken HSB eller HSL svarer til, hvor lyse farver ser ud for øjet, så perceptuelle modeller som OKLCH er bedre til at bygge jævne skalaer.
På denne side
Nuance, mætning og lysstyrke (HSB, efter de engelske hue, saturation og brightness) er en måde at beskrive enhver farve med tre enkle drejeknapper. Nuance er, hvilken farve det er, angivet som en vinkel fra 0 til 360 grader rundt om farvecirklen. Mætning er, hvor intens den er, fra grå ved 0 procent til fuld farve ved 100 procent. Lysstyrke er, hvor meget lys den har, fra sort ved 0 procent til den lyseste version af farven ved 100 procent. Når du først ser farver på den måde, holder det op med at være gætværk at justere en palet.
Nuance: hvilken farve
Nuance er positionen på farvecirklen. På skærmens farvecirkler ligger rød på 0 grader, grøn på 120 og blå på 240, med gul, cyan og magenta imellem. Fordi nuance er en vinkel, bliver farveharmonier simpel regning: læg 180 grader til for en komplementærfarve, 120 for en triade.
linear-gradient(90deg, #ff0000 0%, #ffff00 16.7%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.3%, #ff0000 100%)Mætning: hvor stærk
Mætning styrer, hvor meget af nuancen der er til stede. Sænk den, og en farve drænes mod grå; hæv den, og farven bliver kraftig. De fleste raffinerede paletter ligger et godt stykke under fuld mætning. Fuldt mættede farver råber, hvilket er rigtigt til et udsalgsmærke og trættende til en hel hjemmeside. Dæmpede farvepaletter handler mest om lavere mætning.
Lysstyrke: hvor meget lys
I HSB er lysstyrke, hvor oplyst farven er. Ved 0 procent er alle farver sorte, uanset nuance eller mætning. Ved 100 procent får du den lyseste version, skærmen kan vise for den nuance og mætning. For at lave en bleg pastel i HSB holder du lysstyrken høj og sænker mætningen, hvilket blander hvid ind. Det er præcis idéen bag toner, nuancer og skygger.
HSB vs. HSL: forskellen, der snyder alle
HSL ser næsten identisk ud: nuance, mætning, lyshed. Nuancen er den samme. Det er den tredje drejeknap, der er forskellig. I HSL er lyshed 50 procent den rene farve, 0 procent er sort, og 100 procent er altid hvid. I HSB er lysstyrke 100 procent den rene farve, når mætningen er fuld, og du når kun hvid ved også at sænke mætningen. Mætningstallene er også forskellige mellem de to, så den samme farve har forskellige værdier i hver.
#ff0000HSB
HSL
#7c3aedHSB
HSL
Hex
#0f766eHSB
HSL
Hex
#f97316HSB
HSL
#ffffffHSB
HSL
HSB (også kaldet HSV)
- Lysstyrke 100% med mætning 100% er den rene farve
- Hvid kræver lysstyrke 100% og mætning 0%
- Bruges i mange designværktøjers vælgere, blandt andet Photoshop og Figma
- Ikke tilgængelig direkte i CSS
HSL
- Lyshed 50% er den rene farve
- Lyshed 100% er altid hvid
- Skrives direkte i CSS som
hsl() - Nem til at lave lysere og mørkere versioner
Brug HSL i CSS
CSS forstår hsl() direkte, hvilket gør den praktisk til temaer. Hold nuancen i en variabel, så kan du flytte en hel brugeflades farve med ét tal. Der er også hwb() (hue, whiteness, blackness), som i ånden ligger tættere på HSB. Detaljerne står på MDN’s side om hsl(), og HSL-farver går videre.
: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 lige lyshed ikke ser lige lys ud
HSB og HSL er geometri, ikke perception. Ren gul og ren blå ligger begge på HSL-lyshed 50 procent, men gul ser langt lysere ud: efter WCAG-formlen er dens relative luminans omkring 0,93 mod blås 0,07. Sæt hvid tekst på hver, og forskellen er tydelig. Det er derfor, en palet bygget ved at gå jævnt gennem HSL-lysheden kan se ujævn ud, og derfor skal tekstkontrast altid tjekkes, ikke antages.
Perceptuelle modeller løser det. OKLCH beholder den venlige idé om lyshed, kroma og nuance, men dens lyshed følger det, øjet ser, så trinnene ser jævne ud. Til hurtige justeringer er HSB og HSL perfekte; til en brandskala eller en gradient uden mudrede midter skal du bruge OKLCH.
Hurtige måder at justere en farve med HSB
- For høj: sænk mætningen med 15 til 25 point, før du rører noget andet.
- For mat: hæv mætningen en smule, eller skub nuancen et par grader varmere.
- Brug for en hover-tilstand: sænk lysstyrken med omkring 10 point.
- Brug for en baggrundstone: behold nuancen, sænk mætningen kraftigt, og skub lysstyrken op nær 100.
- To farver støder sammen: flyt den ene nuance tættere på den anden, eller dæmp en af dem.
Vil du hellere starte fra et færdigt udtryk end fra tre skydere, kan du på Markedet i Gradiently søge i Marks med farveord som »dyb petrol« eller »varm fersken«.
Spørgsmål, folk stiller
Hvad er nuance, mætning og lysstyrke?
Nuance er en farves vinkel på farvecirklen, mætning er, hvor intens den er, og lysstyrke er, hvor meget lys den har. Sammen beskriver de enhver skærmfarve.
Er HSB det samme som HSV?
Ja. HSV står for hue, saturation, value, og value betyder det samme som brightness, altså lysstyrke.
Hvad er forskellen på HSB og HSL?
I HSB er lysstyrke 100 procent ved fuld mætning den rene farve. I HSL er lyshed 50 procent den rene farve, og 100 procent er hvid.
Kan jeg bruge HSB i CSS?
Ikke direkte. CSS understøtter hsl(), hwb() og oklch(), så omregn HSB-værdier til en af dem.
Hvad er forskellen på nuance og mætning?
Nuance er, hvilken farve det er, som rød eller blå. Mætning er, hvor stærk farven er, fra grå til kraftig.
Skrevet af Gradiently
Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.
Se vores profil