HEX-kleurkiezer
Veelgebruikte voorinstellingen
Kies een kleur met het visuele kleurveld van je browser of typ een HEX-waarde van drie of zes tekens. De kiezer berekent RGB, HSL, een geschatte CMYK-waarde, relatieve luminantie en de exacte contrastverhoudingen tegen wit en zwart. De kleur wordt in deze browser verwerkt en niet aan de stappen-URL toegevoegd.
Zo kies je een kleur
-
1
Begin met een voorbeeld of kleurveld
Kies een voorbeeldkleur of open de ingebouwde kleurkiezer van je browser.
-
2
Voer een exacte HEX-waarde in
Typ drie tekens zoals #F60 of zes zoals #FF6600. De korte vorm wordt correct uitgebreid.
-
3
Bekijk de berekende notaties
Zie HEX, RGB, HSL, geschat CMYK en relatieve sRGB-luminantie bij elkaar.
-
4
Controleer contrast en kopieer
Vergelijk de kleur met wit en zwart en kopieer daarna de benodigde HEX-, RGB- of HSL-waarde.
Kleurnotaties in de praktijk
Elk kleurmodel beantwoordt een net andere vraag.
Notatie-overzicht
| Notatie | Onderdelen | Waar je die gebruikt |
|---|---|---|
| HEX | #RRGGBB | CSS, ontwerptools, merkrichtlijnen |
| RGB | rood 0–255, groen 0–255, blauw 0–255 | CSS rgb(), beeldbewerkers |
| HSL | kleurtoon 0–360°, verzadiging %, lichtheid % | CSS hsl(), designsystemen |
| CMYK | cyaan %, magenta %, geel %, key/zwart % | Drukwerk, prepress |
Toegankelijk contrast
WCAG 2.2 definieert minimale contrastverhoudingen tussen tekst en achtergrond:
- AA voor normale tekst: ≥ 4,5:1
- AA voor grote tekst (18 pt of 14 pt vet): ≥ 3:1
- AAA voor normale tekst: ≥ 7:1
De kleurkiezer berekent de verhouding tegen wit en tegen zwart in real time. Als een specifieke voorgrondkleur belangrijk is, controleer dan elk kleurenpaar met een aparte contrastchecker.
Tips
- HEX is de standaard in de meeste ontwerptools, maar de korte hex van drie tekens (
#F60) staat voor#FF6600, niet voor#F06060. - HSL werkt prettig voor paletten: zet de kleurtoon vast en varieer de lichtheid voor tinten en schaduwen.
- CMYK en RGB zijn niet perfect naar elkaar om te rekenen, CMYK-druk hangt af van het drukprofiel. Controleer drukwerk altijd met een proef op echt papier.
- Ontwerp je voor moderne CSS, overweeg dan OKLCH voor stappen in lichtheid die visueel gelijkmatiger aanvoelen.
Veelgestelde vragen
Photoshop past een kleurprofiel toe, meestal sRGB voor schermen en vaak een ander profiel voor drukwerk. Browsers behandelen HEX-waarden zonder profiel als sRGB. Staat je document op Adobe RGB of ProPhoto, dan blijven de pixelwaarden gelijk, maar verschuift de waargenomen kleur.
Ja, allebei beschrijven ze puur rood: rood staat op 255 en groen en blauw staan op 0. HEX is alleen de tweecijferige hexadecimale notatie voor elke kanaalwaarde van 0 tot 255.
Kies je primaire kleur en kopieer de HSL-waarde. Houd in CSS of een ontwerpprogramma kleurtoon en verzadiging vast en pas de lichtheid aan. Controleer elk voorgrond-achtergrondpaar afzonderlijk.
De huidige kleur blijft maximaal 30 minuten in dit browsertabblad beschikbaar voor de begeleide stappen. De waarde wordt niet aan de URL toegevoegd en niet via Livewire verzonden. Opnieuw beginnen, het tabblad sluiten, browsergegevens wissen of verlopen verwijdert de kleur.
Gerelateerde tools
Binair naar hex-converter
Converteer binaire invoer naar een gewone uppercase hexwaarde. Niet-binaire tekens worden genegeerd en voorloopnullen blijven niet behouden.
BBCode naar HTML-converter
Converteer BBCode (bulletin-board markup) naar schone HTML. Verwerkt opmaaktags, lijsten, quotes, code, afbeeldingen, links en tabellen.
ASCII naar binair-converter
Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.
Base64 naar Hex converteren
Converteer een Base64-string naar de onderliggende bytes als hexadecimaal. Handig voor het inspecteren van tokens, sleutels, certificaten en JWTs.
Binair naar ASCII-converter
Plak binaire data (spatiegescheiden bytes of een lange bitstream) en krijg de ASCII-tekst die die data vertegenwoordigt. Verwerkt 7-bit en 8-bit encodings.
Kleurenpaletgenerator
Genereer monochromatische, analoge, complementaire, triadische of tetradische paletten vanuit een HEX-basiskleur en exporteer kopieerklare CSS-variabelen.