Kortversionen
- Nyans, mättnad och ljusstyrka, HSB, beskriver en färg med tre tal: nyansen är färgens vinkel på hjulet, mättnaden är dess styrka och ljusstyrkan är hur mycket ljus den har.
- HSB kallas också HSV, där V står för value. De två namnen beskriver samma modell.
- HSL är en nära släkting där en ljushet på 50 procent ger den rena färgen och 100 procent alltid ger vitt.
- Designverktyg som Figma och Photoshop har HSB-väljare, medan CSS stöder hsl() men inte HSB.
- Varken HSB eller HSL motsvarar hur ljusa färger ser ut för ögat, så perceptuella modeller som OKLCH är bättre för att bygga jämna skalor.
På den här sidan
Nyans, mättnad och ljusstyrka (HSB) är ett sätt att beskriva vilken färg som helst med tre enkla rattar. Nyans är vilken färg det är, angiven som en vinkel från 0 till 360 grader runt färghjulet. Mättnad är hur stark den är, från grått vid 0 procent till full färg vid 100 procent. Ljusstyrka är hur mycket ljus den har, från svart vid 0 procent till den ljusaste versionen av färgen vid 100 procent. När du ser färger så slutar det vara gissningar att justera en palett.
Nyans: vilken färg
Nyans är en position på färghjulet. På skärmhjul ligger rött på 0 grader, grönt på 120 och blått på 240, med gult, cyan och magenta emellan. Eftersom nyans är en vinkel blir färgharmonier enkel aritmetik: lägg till 180 grader för en komplementfärg, 120 för en triad.
linear-gradient(90deg, #ff0000 0%, #ffff00 16.7%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.3%, #ff0000 100%)Mättnad: hur stark
Mättnad styr hur mycket av nyansen som finns. Sänk den så töms färgen mot grått. Höj den så blir färgen stark. De flesta förfinade paletter ligger långt under full mättnad. Fullt mättade färger skriker, vilket är rätt för ett rea-klistermärke och tröttsamt för en hel webbplats. Dämpade färgpaletter handlar mest om lägre mättnad.
Ljusstyrka: hur mycket ljus
I HSB är ljusstyrka hur upplyst färgen är. Vid 0 procent är varje färg svart, oavsett nyans eller mättnad. Vid 100 procent får du den ljusaste versionen skärmen kan visa för den nyansen och mättnaden. För att göra en blek pastell i HSB behåller du hög ljusstyrka och sänker mättnaden, vilket blandar in vitt. Det är precis tanken bakom toner och skuggor.
HSB mot HSL: skillnaden som får alla att snubbla
HSL ser nästan identiskt ut: nyans, mättnad, ljushet. Nyansen är densamma. Det som skiljer är den tredje ratten. I HSL är ljushet 50 procent den rena färgen, 0 procent är svart och 100 procent är alltid vitt. I HSB är ljusstyrka 100 procent den rena färgen när mättnaden är full, och du når bara vitt genom att också sänka mättnaden. Mättnadstalen skiljer sig också mellan de två, så samma färg har olika värden i vardera.
Hex
#ff0000HSB
HSL
#7c3aedHSB
HSL
Hex
#0f766eHSB
HSL
Hex
#f97316HSB
HSL
#ffffffHSB
HSL
HSB (kallas också HSV)
- Ljusstyrka 100 % med mättnad 100 % är den rena färgen
- Vitt kräver ljusstyrka 100 % och mättnad 0 %
- Används i många designverktygs väljare, bland annat Photoshop och Figma
- Finns inte direkt i CSS
HSL
- Ljushet 50 % är den rena färgen
- Ljushet 100 % är alltid vitt
- Skrivs direkt i CSS som
hsl() - Lätt att göra ljusare och mörkare versioner
Att använda HSL i CSS
CSS förstår hsl() direkt, vilket gör det bekvämt för teman. Spara nyansen i en variabel så kan du flytta ett helt gränssnitts färg med ett tal. Det finns också hwb() (hue, whiteness, blackness), som till andan är närmare HSB. Detaljer finns på MDN:s sida för hsl(), och HSL-färger går längre.
: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 */Varför lika ljushet inte ser lika ut
HSB och HSL är geometri, inte perception. Rent gult och rent blått ligger båda på HSL-ljushet 50 procent, men gult ser långt ljusare ut: enligt WCAG-formeln är dess relativa luminans omkring 0,93 mot blåttets 0.07. Lägg vit text på vardera och skillnaden är uppenbar. Det är därför en palett byggd genom att stega HSL-ljushet jämnt kan se ojämn ut, och varför textkontrast alltid måste kontrolleras, inte antas.
Perceptuella modeller löser det. OKLCH behåller den vänliga idén om ljushet, färgstyrka och nyans, men dess ljushet följer det ögat ser, så stegen ser jämna ut. För snabba justeringar är HSB och HSL perfekta. För en varumärkesskala eller en gradient som undviker leriga mellanpartier, välj OKLCH.
Snabba sätt att justera en färg med HSB
- För högljudd: sänk mättnaden med 15 till 25 punkter innan du rör något annat.
- För platt: höj mättnaden något, eller putta nyansen några grader mot varmare.
- Behöver ett hovertillstånd: sänk ljusstyrkan med ungefär 10 punkter.
- Behöver en bakgrundston: behåll nyansen, sänk mättnaden kraftigt och tryck ljusstyrkan nära 100.
- Två färger krockar: flytta den ena nyansen närmare den andra, eller dämpa en av dem.
Om du hellre utgår från en färdig look än från tre reglage låter Gradientlys Marknad dig söka Marks på färgord som ”djup petrol” eller ”varm persika”.
Vanliga frågor
Vad är nyans, mättnad och ljusstyrka?
Nyans är en färgs vinkel på färghjulet, mättnad är hur stark den är och ljusstyrka är hur mycket ljus den har. Tillsammans beskriver de vilken skärmfärg som helst.
Är HSB samma sak som HSV?
Ja. HSV står för hue, saturation, value, och value betyder detsamma som ljusstyrka.
Vad är skillnaden mellan HSB och HSL?
I HSB är ljusstyrka 100 procent vid full mättnad den rena färgen. I HSL är ljushet 50 procent den rena färgen och 100 procent är vitt.
Kan jag använda HSB i CSS?
Inte direkt. CSS stöder hsl(), hwb() och oklch(), så konvertera HSB-värden till en av dem.
Vad är skillnaden mellan nyans och mättnad?
Nyans är vilken färg det är, som rött eller blått. Mättnad är hur stark färgen är, från grått till stark.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil