Color Picker – kleurenkiezer en kleurcode-omzetter

Ja, je kunt de Color Picker gratis en zonder registratie gebruiken. Alle omrekeningen gebeuren direct in je browser: geen upload, geen logging en geen serververzoek. Alleen de pagina-URL neemt de huidige kleur over als ?color=, zodat je die via een link kunt delen of als bladwijzer kunt opslaan.

Klik op het gekleurde veld naast ‘Dichtstbijzijnde CSS-kleur:’, kies de verzadiging en helderheid in het vierkant en daaronder de kleurtoon. De HEX-code staat bovenaan het resultaat en kun je met de kopieerknop overnemen. Ken je de kleur al als RGB, HSL, HSV of CMYK? Typ de waarde dan in het bijbehorende veld. Voor een kleur uit een foto of screenshot gebruik je de Image Color Picker, want deze tool kan geen afbeeldingen uitlezen. Naar de Image Color Picker

Typ of plak de waarde in het RGB-veld, bijvoorbeeld 24, 232, 136 of rgb(24, 232, 136). Het HEX-veld toont meteen #18e888 en HSL, HSV en CMYK worden ook bijgewerkt. Andersom voer je de HEX-code met of zonder # in het HEX-veld in. Beide notaties beschrijven dezelfde schermkleur: HEX schrijft de drie RGB-waarden van 0 tot 255 als hexadecimale paren van 00 tot ff.

RGB beschrijft een kleur aan de hand van de hoeveelheden rood, groen en blauw licht die een scherm mengt. HSL (kleurtoon/verzadiging/lichtheid) en HSV (kleurtoon/verzadiging/helderheid) zijn twee verschillende, voor mensen intuïtievere omzettingen van dezelfde RGB-waarde. HSL is geschikt om een kleur lichter of donkerder te maken; HSV om kleuren te kiezen op basis van kleurtoon, verzadiging en helderheid. CMYK (cyaan/magenta/geel/zwart) beschrijft daarentegen geen lichtmenging, maar het mengen van inkt of toner voor drukwerk.

De CMYK-waarde is een vereenvoudigde, puur rekenkundige benadering zonder kleurprofiel en wordt afgerond op hele procenten. Ze helpt je een schermkleur voor drukwerk in te schatten, maar vervangt geen drukproef met het profiel van je drukkerij. Je kunt CMYK bijvoorbeeld invoeren als 0%, 61%, 72%, 0% of cmyk(0%, 61%, 72%, 0%).

Ja. Met de schuifregelaar voor dekking stel je 0 tot 100 % in. Het resultaat toont de kleur dan als rgba() en hsla(), die je kunt kopiëren. Voer je een waarde met alfa in, zoals een HEX-code van 4 of 8 tekens (#rrggbbaa), rgba() of hsla(), dan neemt de schuifregelaar die dekking over zodra je het veld verlaat. De HEX-code in het resultaat blijft zes tekens lang.

De verhouding loopt van 1:1 tot 21:1 en geeft aan hoe goed twee kleuren, zoals tekst en achtergrond, van elkaar te onderscheiden zijn. De niveaus in de tool: AAA vanaf 7:1, AA vanaf 4.5:1 voor normale tekst en AA (grote tekst) vanaf 3:1 voor grote of vetgedrukte tekst. De Color Picker toont de verhouding van jouw kleur ten opzichte van zwart en wit. Voor willekeurige voor- en achtergrondkleuren gebruik je de Contrast Checker. Naar de Contrast Checker

Naast het kleurveld toont de tool de dichtstbijzijnde CSS-kleur. Daarvoor berekent hij de euclidische afstand tussen jouw kleur en elke benoemde CSS-kleur in de RGB-kleurruimte en noemt de kleur die het dichtst in de buurt komt, bijvoorbeeld tomato voor #ff6347. Is het geen exacte overeenkomst, dan staat er ‘vergelijkbaar’ achter. Je kunt de naam kopiëren en in CSS gebruiken in plaats van de HEX-code, al is hij bij ‘vergelijkbaar’ slechts een benadering.