De korte versie
- 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.
Op deze pagina
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. 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.
linear-gradient(90deg, #ff0000 0%, #ffff00 16.7%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.3%, #ff0000 100%)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 draaien grotendeels om lagere verzadiging.
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.
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.
Hex
#ff0000HSB
HSL
#7c3aedHSB
HSL
Hex
#0f766eHSB
HSL
Hex
#f97316HSB
HSL
#ffffffHSB
HSL
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 en HSL-kleuren gaat verder.
: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 */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.
Waarnemingsmodellen lossen dit op. OKLCH 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 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’.
Vragen die mensen stellen
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.
Geschreven door Gradiently
Het team achter Gradiently, een ontwerptool rond Marks: levende kleurverlopen die alles wat je ontwerpt op jou laten lijken.
Bekijk ons profiel