Een kleur omzetten tussen HEX, RGB en HSL
Gepubliceerd op · Bijgewerkt op 3 min leestijd
HEX, RGB en HSL zijn drie manieren om dezelfde kleur te schrijven. U komt ze tegen in een tekenprogramma, een stijlblad, een mockuptool of een merkgids, en u springt voortdurend van het ene naar het andere. Het hulpmiddel toont alle drie tegelijk en accepteert de gangbare notaties.
Drie notaties van dezelfde kleur
Kleuren verkennen toont standaard de drie vormen, met een voorbeeld van de kleur. HEX is een reeks van zes cijfers en letters voorafgegaan door een hekje. RGB geeft de hoeveelheden rood, groen en blauw, van 0 tot 255. HSL beschrijft de tint in graden, de verzadiging en de helderheid in procenten, wat vaak intuïtiever is om een kleur lichter of donkerder te maken. Voor het groen #2F4A3F:
| Vorm | Resultaat |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
De drie knoppen HEX, RGB en HSL van het paneel beperken het resultaat tot één vorm, handig om zo te kopiëren.
Geaccepteerde notaties
| Notatie | Voorbeeld | Resultaat in HEX |
|---|---|---|
| Korte HEX | #fff | #ffffff |
| HEX met transparantie | #2F4A3F80 | #2f4a3f80 |
| RGB met komma's | rgb(47, 74, 63) | #2f4a3f |
| RGB met spaties | rgb(47 74 63) | #2f4a3f |
| RGB in procenten | rgb(100%, 0%, 0%) | #ff0000 |
| HSL met spaties | hsl(156 22% 24%) | #304b40 |
Kleurnamen zoals "red" en waarden buiten 0 tot 255 zoals rgb(300, 0, 0) worden geweigerd met een bericht dat de geaccepteerde notaties opsomt.
Transparantie
Een transparantie wordt in HEX met acht cijfers geschreven, of na een schuine streep met spaties. De kleur rgb(47 74 63 / 50%) geeft #2f4a3f80 in HEX en rgba(47, 74, 63, 0.5) in RGB. Omgekeerd geeft #2F4A3F80 een dekking van 0,502, want 80 in hexadecimaal is 128 van 255.
Waarom een heen-en-terugreis één niveau verschilt
HSL wordt in gehele getallen getoond: tint in graden, verzadiging en helderheid in procenten. Terug van HSL naar HEX komt u dus op een naburige kleur uit, niet altijd op die waarmee u begon.
| Begin | Getoonde HSL | Terug naar HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
Het verschil is één niveau per kanaal, onzichtbaar voor het oog. Bewaar voor een designtoken of een merk de oorspronkelijke HEX als referentie en ga niet via HSL.
Grijzen
Een grijs heeft nul verzadiging en een tint zonder effect: #808080 geeft rgb(128, 128, 128) en hsl(0, 0%, 50%).
Wat het hulpmiddel niet meet
Een formaatconversie zegt niets over leesbaarheid. Het hulpmiddel berekent het contrast tussen een tekst en zijn achtergrond niet: controleer dat apart voordat u publiceert. Het geval van een QR-code, waar het contrast bepaalt of hij leesbaar is, komt aan bod in Een QR-code maken die in een keer scant.
Voor welk gebruik
Een grafisch ontwerper die een kleur aan een ontwikkelaar doorgeeft, iemand die een stijlblad aanpast, een leraar die een handout voorbereidt: dezelfde kleur wordt afhankelijk van het hulpmiddel op drie manieren geschreven.
Een conversie controleren
- Plak de kleur in het veld: het voorbeeld moet overeenkomen met wat u verwacht.
- Kopieer de vorm die uw systeem vraagt.
- Om de exacte kleur te bewaren, bewaart u de HEX of de RGB in plaats van de HSL.
Veelgestelde vragen
- Hoe zet u HEX om in RGB?
- Plak de kleur in het hulpmiddel, dat de drie vormen tegelijk toont, bijvoorbeeld #2F4A3F, rgb(47, 74, 63) en hsl(156, 22%, 24%).
- Waarom verandert een heen-en-terugreis via HSL de kleur met één niveau?
- HSL wordt in gehele getallen getoond. Bewaar de oorspronkelijke HEX als referentie.
- Hoe schrijft u een transparantie?
- In HEX met acht cijfers, of in RGB met een schuine streep, bijvoorbeeld rgb(47 74 63 / 50%).
- Controleert het hulpmiddel de leesbaarheid van de tekst?
- Nee, het berekent het contrast tussen een tekst en zijn achtergrond niet: controleer dat apart.