Kleuromzetter

Zo gebruik je de Kleuromzetter

1. 1. Voer een kleur in. Plak of typ hem in een notatie die het veld accepteert — #336699, rgb(51 102 153), hsl(210 50% 40%), hwb(210 20% 40%), cmyk(67%, 33%, 0%, 40%) of een CSS-naam zoals rebeccapurple. Een kale 51 102 153 wordt als RGB gelezen.
2. 2. Of gebruik de kiezer. De kiezer stelt de kleur in en behoudt de transparantie die je al hebt getypt.
3. 3. Kopieer wat je nodig hebt. Elke notatie heeft een eigen kopieerknop, en CSS kopiëren geeft je de HEX-, RGB-, HSL- en OKLCH-waarden als aangepaste eigenschappen voor een stylesheet.
4. 4. Controleer de naam. De tool toont het CSS-sleutelwoord als je kleur er precies één is (rebeccapurple is #663399) en het dichtstbijzijnde sleutelwoord als dat niet zo is.

Hoe de omrekeningen werken

Alles wordt omgezet via sRGB, de kleurruimte waarin een browser tekent. Een HEX-code is gewoon RGB in grondtal 16: #336699 is rood 0x33 = 51, groen 0x66 = 102, blauw 0x99 = 153. De andere notaties schikken dezelfde drie getallen opnieuw.

• HSL beschrijft een kleur als tint (een hoek op het kleurenwiel, 0–360°), verzadiging en helderheid. Met het grootste kanaal max en het kleinste min (elk gedeeld door 255) is de helderheid (max + min) ÷ 2, en de verzadiging (max − min) ÷ (1 − |2L − 1|). De tint komt van welk kanaal het grootst is.
• HSV (ook HSB genoemd) houdt dezelfde tint, maar meet de waarde als max en de verzadiging als (max − min) ÷ max. Het is het model dat de meeste kleurkiezers tekenen.
• HWB is witheid (min) en zwartheid (1 − max) bovenop een zuivere tint; het is makkelijker te begrijpen dan HSL als je een tint of schaduw wilt. Als witheid plus zwartheid 100% bereikt, is het resultaat een grijs.
• CMYK wordt getoond als de eenvoudige apparaatomrekening: K = 1 − max, daarna is elk van C, M en Y (1 − kanaal − K) ÷ (1 − K). Er komen geen inkten, papier of profiel aan te pas.
• OKLCH is helderheid, chroma en tint in de OKLab-ruimte van Björn Ottosson, die CSS Color 4 ondersteunt als oklch(). Gelijke stappen in L lijken veel meer op gelijke stappen in helderheid dan in RGB of HSL.

Waarom CMYK hier geen drukkleur is

Schermen voegen licht toe in rood, groen en blauw; drukkers brengen cyaan, magenta, geel en zwart inkt op papier aan. De twee gamuts verschillen, en de inkt op de pagina hangt af van het papier, de pers en het ICC-profiel dat ze beschrijft. Een formule die alleen van RGB uitgaat, kan dat niet weten, dus de CMYK hierboven is een notatie, geen voorspelling: puur schermblauw #0000ff wordt 100% cyaan en 100% magenta, wat drukt als een doffer violet. Voor een poster of een gedrukte figuur geef je de drukker het bestand in RGB en vraag je naar hun profiel, of converteer je met dat profiel in een ontwerpprogramma.

Afronding, begrenzing en transparantie

• Afronding. HEX en rgb() bevatten hele getallen van 0 tot 255, dus een kleur die als hsl(210 50% 41%) is getypt, wordt afgerond op de dichtstbijzijnde 8-bitwaarde. Die terugrekenen geeft een iets andere HSL — het 8-bitraster is grover dan dat van HSL.
• Kanalen buiten bereik. Waarden buiten het bereik worden begrensd, zoals browsers dat doen: rgb(300 0 0) wordt #ff0000, en een negatief kanaal wordt 0.
• Tintunits. deg, grad, rad en turn worden geaccepteerd, en de tint wikkelt zich: −150° is hetzelfde als 210°.
• Alfa. #rrggbbaa, #rgba en / 50% werken allemaal. De alfa wordt in de 8-cijferige HEX opgeslagen op 8 bits, dus 50% wordt 80 en leest terug als 50,2%.

Veelgestelde vragen

Hoe zet ik HEX om naar RGB?

Splits de zes cijfers in drie paren en lees elk paar als een getal in grondtal 16: #336699 is 33, 66 en 99, wat 51, 102 en 153 is. Plak de HEX-code in het veld en de RGB-waarde verschijnt meteen, samen met HSL, HWB, HSV, CMYK en OKLCH.

Wat is het verschil tussen HSL en HSV?

Beide gebruiken dezelfde tinthoek. HSL zet wit op volle helderheid, ongeacht de verzadiging, dus het midden is de zuivere kleur; HSV zet de zuivere kleur op volle waarde en verzadiging, en wit op nul verzadiging. HSL is wat CSS ondersteunt als hsl(), terwijl HSV (of HSB) is wat de meeste kleurkiezers tonen.

Is de CMYK-waarde nauwkeurig voor drukwerk?

Nee. Het is de eenvoudige omrekening van RGB zonder inkt, papier of ICC-profiel. Ze beschrijft dezelfde getallen anders, in plaats van te voorspellen wat een pers zal drukken. Kleuren buiten het gamut van de printer, zoals felle schermblauwen en -groenen, drukken doffer. Gebruik het profiel van je drukker voor alles wat ertoe doet.

Wat betekent de dichtstbijzijnde CSS-naam?

CSS definieert 148 kleursleutelwoorden. Als je kleur er precies één is, toont de tool die zonder voorbehoud. Anders toont hij het sleutelwoord dat het dichtst bij ligt in OKLab, een ruimte die zo is opgebouwd dat de afstand overeenkomt met het waargenomen verschil — handig om een kleur in een opmerking een naam te geven, niet als vervanging van de code.

Waarom verandert mijn HSL-waarde een beetje na een heen-en-terugomrekening?

HEX en RGB slaan elk kanaal op als een van 256 waarden, en HSL past niet één-op-één op dat raster. Een kleur die in HSL is getypt, wordt afgerond op de dichtstbijzijnde RGB-waarde, en de getoonde HSL wordt berekend uit de afgeronde waarde. Vanuit een HEX-code is elke omrekening exact tot de getoonde precisie.

Wordt mijn kleurgegevens ergens naartoe gestuurd?

Nee. De omrekening is gewone rekenkunde in je browser; wat je typt wordt niet geüpload of opgeslagen.