# Nyans, mättnad och ljusstyrka (HSB) enkelt förklarat

[Canonical HTML page](https://gradiently.design/sv/guide/hue-saturation-brightness)

Hexkoder är till för maskiner. Nyans, mättnad och ljusstyrka är hur människor faktiskt tänker på färg: vilken färg, hur stark, hur ljus. Lär dig de tre rattarna så blir varje färgväljare begriplig.

## The short version

- 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.

**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](https://gradiently.design/sv/guide/color-wheel). 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.

Nyans från 0 till 360 grader: `linear-gradient(90deg, #ff0000 0%, #ffff00 16.7%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.3%, #ff0000 100%)`

Hela nyansspannet vid maximal mättnad och ljusstyrka. Remsan börjar och slutar på rött eftersom nyans är en cirkel.

## 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](https://gradiently.design/sv/guide/muted-color-palettes) handlar mest om lägre mättnad.

- Mättnad 0 %: #808080
- Mättnad 25 %: #7f609f
- Mättnad 50 %: #7f40bf
- Mättnad 75 %: #7f20df
- Mättnad 100 %: #7f00ff

En violett nyans vid fast ljushet, där bara mättnaden ändras. Till vänster rent grått, till höger full färg.

## 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](https://gradiently.design/sv/guide/tints-tones-shades).

## 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.

| Färg | Hex | HSB | HSL |
| --- | --- | --- | --- |
| Rent rött | `#ff0000` | 0°, 100 %, 100 % | 0°, 100 %, 50 % |
| Violett | `#7c3aed` | 262°, 76 %, 93 % | 262°, 83 %, 58 % |
| Djup teal | `#0f766e` | 175°, 87 %, 46 % | 175°, 77 %, 26 % |
| Klar orange | `#f97316` | 25°, 91 %, 98 % | 25°, 95 %, 53 % |
| Vitt | `#ffffff` | Valfri nyans, 0 %, 100 % | Valfri nyans, valfri mättnad, 100 % |

Nyansen stämmer. Mättnaden och det tredje värdet gör det inte. Kontrollera alltid vilken modell en väljare använder innan du kopierar tal.

### 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()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl), och [HSL-färger](https://gradiently.design/sv/guide/hsl-colors) går längre.

```css
: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 */
```

En nyans, fyra jobb. Ljushet gör mjuka och djupa versioner. Mättnad gör den dämpade.

## 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.

- Gult, HSL 60° 100 % 50 %: #ffff00
- Grönt, HSL 120° 100 % 50 %: #00ff00
- Rött, HSL 0° 100 % 50 %: #ff0000
- Blått, HSL 240° 100 % 50 %: #0000ff

Fyra färger med exakt samma HSL-ljushet. Mot vitt klarar det gula ungefär 1,07:1 och det blå ungefär 8,6:1.

Perceptuella modeller löser det. [OKLCH](https://gradiently.design/sv/guide/oklch-explained) 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](https://gradiently.design/sv/guide/gradient-interpolation), 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”.

## FAQ

### 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.