# Tint, verzadiging en helderheid (HSB) eenvoudig uitgelegd

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

Hexcodes zijn voor machines. Tint, verzadiging en helderheid zijn hoe mensen echt over kleur denken: welke kleur, hoe sterk, hoe licht. Leer de drie knoppen en elke kleurenkiezer wordt logisch.

## The short version

- Tint, verzadiging en helderheid, oftewel HSB, beschrijft een kleur met drie getallen: tint is de hoek van de kleur op het wiel, verzadiging is zijn intensiteit en helderheid is hoeveel licht hij heeft.
- HSB heet ook HSV, waarbij V staat voor value; beide namen beschrijven hetzelfde model.
- HSL is een naaste verwant waarin een lichtheid van 50 procent de zuivere kleur geeft en 100 procent altijd wit.
- Ontwerptools als Figma en Photoshop bieden HSB-kiezers, terwijl CSS hsl() ondersteunt maar geen HSB.
- Noch HSB noch HSL komt overeen met hoe helder kleuren voor het oog lijken, dus waarnemingsmodellen als OKLCH zijn beter voor gelijkmatige schalen.

**Tint, verzadiging en helderheid** (HSB) is een manier om elke kleur te beschrijven met drie eenvoudige knoppen. **Tint** is welke kleur het is, uitgedrukt als hoek van 0 tot 360 graden rond het kleurenwiel. **Verzadiging** is hoe intens hij is, van grijs op 0 procent tot volle kleur op 100 procent. **Helderheid** is hoeveel licht hij heeft, van zwart op 0 procent tot de helderste versie van die kleur op 100 procent. Zie je kleuren eenmaal zo, dan is een palet bijstellen geen gokwerk meer.

## Tint: welke kleur

Tint is positie op het [kleurenwiel](https://gradiently.design/nl/guide/color-wheel). Op schermwielen zit rood op 0 graden, groen op 120 en blauw op 240, met geel, cyaan en magenta ertussen. Omdat tint een hoek is, wordt kleurharmonie simpele rekenkunde: tel 180 graden op voor een complement, 120 voor een triade.

Tint van 0 tot 360 graden: `linear-gradient(90deg, #ff0000 0%, #ffff00 16.7%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.3%, #ff0000 100%)`

Het volledige tintbereik op maximale verzadiging en helderheid. De strook begint en eindigt op rood omdat tint een cirkel is.

## Verzadiging: hoe sterk

Verzadiging bepaalt hoeveel van de tint aanwezig is. Verlaag haar en een kleur loopt leeg richting grijs; verhoog haar en de kleur wordt levendig. De meeste verfijnde paletten liggen ruim onder volle verzadiging. Volledig verzadigde kleuren schreeuwen, wat klopt voor een actiesticker en vermoeiend is voor een hele website. [Gedempte kleurenpaletten](https://gradiently.design/nl/guide/muted-color-palettes) draaien grotendeels om lagere verzadiging.

- Verzadiging 0%: #808080
- Verzadiging 25%: #7f609f
- Verzadiging 50%: #7f40bf
- Verzadiging 75%: #7f20df
- Verzadiging 100%: #7f00ff

Eén violette tint op vaste lichtheid, waarbij alleen de verzadiging verandert. Links zuiver grijs, rechts volle kleur.

## Helderheid: hoeveel licht

In HSB is helderheid hoe verlicht de kleur is. Op 0 procent is elke kleur zwart, welke tint of verzadiging ook. Op 100 procent krijg je de helderste versie die het scherm voor die tint en verzadiging kan tonen. Voor een bleek pastel in HSB houd je de helderheid hoog en verlaag je de verzadiging, wat wit bijmengt. Dat is precies het idee achter [tinten, tonen en schakeringen](https://gradiently.design/nl/guide/tints-tones-shades).

## HSB versus HSL: het verschil waar iedereen over struikelt

HSL ziet er bijna identiek uit: tint, verzadiging, **lichtheid**. De tint is dezelfde. Wat verschilt is de derde knop. In HSL is lichtheid 50 procent de zuivere kleur, 0 procent zwart en 100 procent altijd wit. In HSB is helderheid 100 procent de zuivere kleur bij volle verzadiging en kom je alleen bij wit door ook de verzadiging te verlagen. Ook de verzadigingsgetallen verschillen tussen de twee, dus dezelfde kleur heeft in elk andere waarden.

| Kleur | Hex | HSB | HSL |
| --- | --- | --- | --- |
| Zuiver rood | `#ff0000` | 0°, 100%, 100% | 0°, 100%, 50% |
| Violet | `#7c3aed` | 262°, 76%, 93% | 262°, 83%, 58% |
| Diep teal | `#0f766e` | 175°, 87%, 46% | 175°, 77%, 26% |
| Felloranje | `#f97316` | 25°, 91%, 98% | 25°, 95%, 53% |
| Wit | `#ffffff` | Elke tint, 0%, 100% | Elke tint, elke verzadiging, 100% |

De tint komt overeen; verzadiging en de derde waarde niet. Check altijd welk model een kiezer gebruikt voordat je getallen kopieert.

### HSB (ook HSV genoemd)

- Helderheid 100% met verzadiging 100% is de zuivere kleur
- Wit vraagt helderheid 100% en verzadiging 0%
- Gebruikt in veel kiezers van ontwerptools, waaronder Photoshop en Figma
- Niet direct beschikbaar in CSS

### HSL

- Lichtheid 50% is de zuivere kleur
- Lichtheid 100% is altijd wit
- Native te schrijven in CSS als `hsl()`
- Makkelijk voor lichtere en donkerdere versies

## HSL gebruiken in CSS

CSS begrijpt `hsl()` rechtstreeks, wat handig is voor thema’s. Houd de tint in een variabele en je kunt de kleur van een hele interface met één getal verschuiven. Er is ook `hwb()` (hue, whiteness, blackness), dat qua geest dichter bij HSB ligt. Details staan op [de hsl()-pagina van MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) en [HSL-kleuren](https://gradiently.design/nl/guide/hsl-colors) gaat verder.

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

Eén tint, vier taken. Lichtheid maakt de zachte en diepe versies; verzadiging maakt de gedempte.

## Waarom gelijke lichtheid er niet gelijk uitziet

HSB en HSL zijn geometrie, geen waarneming. Zuiver geel en zuiver blauw zitten allebei op HSL-lichtheid 50 procent, maar geel lijkt veel helderder: volgens de WCAG-formule is zijn relatieve luminantie ongeveer 0,93 tegen 0,07 bij blauw. Zet er witte tekst op en het verschil is duidelijk. Daarom kan een palet dat je bouwt door de HSL-lichtheid gelijkmatig te stappen klonterig ogen, en daarom moet tekstcontrast altijd gecontroleerd worden en niet aangenomen.

- Geel, HSL 60° 100% 50%: #ffff00
- Groen, HSL 120° 100% 50%: #00ff00
- Rood, HSL 0° 100% 50%: #ff0000
- Blauw, HSL 240° 100% 50%: #0000ff

Vier kleuren op exact dezelfde HSL-lichtheid. Tegen wit haalt het geel ongeveer 1,07:1 en het blauw ongeveer 8,6:1.

Waarnemingsmodellen lossen dit op. [OKLCH](https://gradiently.design/nl/guide/oklch-explained) behoudt het vriendelijke idee van lichtheid, chroma en tint, maar zijn lichtheid volgt wat het oog ziet, zodat stappen gelijkmatig lijken. Voor snelle aanpassingen zijn HSB en HSL perfect; voor een merkschaal of een [gradiënt zonder modderige midden](https://gradiently.design/nl/guide/gradient-interpolation) pak je OKLCH.

## Snelle manieren om een kleur met HSB bij te stellen

- **Te luid:** verlaag de verzadiging met 15 tot 25 punten voordat je iets anders aanraakt.
- **Te flets:** verhoog de verzadiging lichtjes of schuif de tint een paar graden warmer.
- **Een hoverstatus nodig:** verlaag de helderheid met ongeveer 10 punten.
- **Een achtergrondtint nodig:** houd de tint, laat de verzadiging fors zakken en duw de helderheid richting 100.
- **Twee kleuren botsen:** schuif de ene tint dichter naar de andere of demp een van de twee.

Begin je liever bij een afgewerkte look dan bij drie schuifjes, dan laat de Markt van Gradiently je Marks zoeken op kleurwoorden zoals ‘diep teal’ of ‘warme perzik’.

## FAQ

### Wat is tint, verzadiging en helderheid?

Tint is de hoek van een kleur op het kleurenwiel, verzadiging is hoe intens hij is en helderheid is hoeveel licht hij heeft. Samen beschrijven ze elke schermkleur.

### Is HSB hetzelfde als HSV?

Ja. HSV staat voor hue, saturation, value, en value betekent hetzelfde als helderheid.

### Wat is het verschil tussen HSB en HSL?

In HSB is helderheid 100 procent bij volle verzadiging de zuivere kleur. In HSL is lichtheid 50 procent de zuivere kleur en 100 procent wit.

### Kan ik HSB in CSS gebruiken?

Niet rechtstreeks. CSS ondersteunt `hsl()`, `hwb()` en `oklch()`, dus reken HSB-waarden om naar een daarvan.

### Wat is het verschil tussen tint en verzadiging?

Tint is welke kleur het is, zoals rood of blauw. Verzadiging is hoe sterk die kleur is, van grijs tot levendig.