Kleurkiezer

Kies een kleur op het wiel, verfijn deze op het verzadigings- en helderheidsvlak en lees ze terug in elk formaat dat uw project gebruikt, van #RRGGBB tot oklch(). Deze tool doet ook wat andere kleurkiezers overslaan: drie wielweergaven inclusief het traditionele schilders-RYB-wiel, harmonieregels die zelf een palet samenstellen, een alfakanaal en export van het hele palet met een klik als CSS-variabelen, SCSS of JSON. Alles wordt berekend in uw browser.

RYB of RGB? Drie kleurenwielen in plaats van een

De keuzelijst Wielmodus verandert hoe de tinten op het wiel liggen:

• HSV en HSL zijn digitale wielen. Tinten liggen zoals licht ze op een scherm mengt. Ze verschillen in het vierkante vlak: bij HSV is de helderste hoek de pure tint, bij HSL staan pure tinten op middelste lichtheid met wit erboven.
• RYB (schilders) ordent tinten zoals schilders ze leren: rood, geel en blauw als primaire kleuren, met oranje, groen en paars ertussen (zie het RYB-kleurmodel op Wikipedia, Engels). Het verschil merkt u vooral bij harmonieën. Op het RYB-wiel is het complement van rood groen en het complement van blauw oranje, de klassieke paren uit de schilderkunst. Een digitaal wiel plaatst rood tegenover cyaan. Als een “complementair” palet van een gewone kleurkiezer u ooit vreemd voorkwam, is dit de reden.

Kleurharmonieën: een palet dat zichzelf samenstelt

Kies een regel bij Kleurharmonie. Het wiel markeert de bijpassende kleuren en eronder verschijnt een kant-en-klaar palet:

• Complementair: een tegenoverliggende kleur. Het sterkste contrast, geschikt voor een enkel accent naast uw hoofdkleur.
• Split-complementair: de twee buren van de tegenoverliggende kleur. Bijna even veel contrast, maar makkelijker in balans te houden.
• Triadisch: drie tinten gelijk verdeeld over het wiel. Levendig en toch stabiel als een tint domineert en de andere twee spaarzaam worden gebruikt.
• Tetradisch (vierkant): vier tinten. Rijke schema’s voor illustraties en grafieken, lastig in balans te houden in een app-interface.
• Analoog: de dichtstbijzijnde buren. Een rustige combinatie voor achtergronden en verlopen.
• Monochroom: een tint in meerdere lichtheidsniveaus. De veiligste keuze voor knopstatussen (hover, actief, uitgeschakeld).

Kopieer het hele palet met een klik in het formaat dat u kiest: gewone HEX, RGB, HSL, OKLCH, kant-en-klare CSS custom properties (--color-1: …), SCSS-variabelen of JSON voor in de code. Wilt u weten of het palet ook goed werkt voor mensen die kleuren moeilijk uit elkaar houden? Maak een schermafbeelding en zet deze om naar grijstinten.

HEX, RGB, HSL, OKLCH en CMYK converteren: plak alles, krijg alles

De invoervelden accepteren vrijwel elke kleurnotatie: #f80, #ff8800, achtcijferige hex met alfa, rgb() en rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 en benoemde CSS-kleuren zoals rebeccapurple. Wat u ook invoert, u krijgt zeven gesynchroniseerde uitvoerwaarden: HEX, RGB, HSL, HSV, LCH, OKLCH en CMYK, elk met een eigen kopieerknop.

De schuifregelaar Dekking (alfa) onder de voorbeeldweergave zet de uitvoerwaarden om naar hun transparante vormen #RRGGBBAA, rgba() en hsla(). De voorbeeldweergave wordt op een schaakbordpatroon getekend, zodat u de transparantie meteen ziet.

De dichtstbijzijnde Tailwind CSS-kleur bij elke kleur

Twee labels onder de voorbeeldweergave benoemen de kleur: de dichtstbijzijnde CSS-kleurnaam (handig voor snelle prototypes) en het dichtstbijzijnde Tailwind-token, bijvoorbeeld orange-500. Zo blijft u binnen uw designsysteem en hoeft u geen eenmalige waarden te verzinnen. Klik op een label om het te kopiëren.

Dit beantwoordt de vraag die bij elke design-overdracht terugkomt: de ontwerper stuurde een hexcode, welke Tailwind-klasse komt daar het dichtst bij? De match wordt berekend tegen het standaardpalet van Tailwind CSS 4 (zie de Tailwind-documentatie, Engels), zodat u het token meteen in een klassenaam kunt gebruiken.

Welk kleurformaat gebruikt u het beste?

Formaat	Volledige naam	Wanneer gebruiken
HEX	Hexadecimal	De standaard voor het web. Kort, overal ondersteund, makkelijk te kopiëren. Acht cijfers voegen alfa toe.
RGB	Red, Green, Blue	Zo denken schermen. Drie lichtkanalen van 0 tot 255. Het formaat dat de meeste API’s en canvas-code verwachten.
HSL	Hue, Saturation, Lightness	Voor aanpassen op het oog. “Iets lichter” of “minder verzadigd” betekent een enkel getal wijzigen.
HSV	Hue, Saturation, Value	Grafische software. Het model achter de kleurkiezers in Photoshop en GIMP.
LCH	Lightness, Chroma, Hue	Perceptueel uniform. Gelijke stappen in getallen ogen als gelijke visuele stappen, iets wat HSL alleen maar doet alsof.
OKLCH	OK Lightness, Chroma, Hue	De moderne keuze voor CSS. Corrigeert de tintverschuivingen in blauwtinten waar LCH last van heeft. Ondersteund door alle actuele browsers en geschikt voor design-tokens.
CMYK	Cyan, Magenta, Yellow, Key	Richtlijn voor drukwerk. Een benaderende conversie om mee naar de drukker te gaan, de uiteindelijke waarden bepaalt het kleurprofiel van de drukker.

Waarom OKLCH perceptueel uniformer is dan oudere modellen, legt Björn Ottosson, de ontwerper van de Oklab-kleurruimte, uit in zijn oorspronkelijke artikel (Engels). Syntax en browserondersteuning staan samengevat op MDN (Engels). Hoe het drukmodel werkt, beschrijft Wikipedia bij CMYK.

Kleine dingen die tijd besparen

• Geschiedenis onthoudt zichzelf. De laatste 24 kleuren overleven een paginaverversing. Ze blijven alleen in de opslag van uw browser en worden nergens naartoe verzonden.
• Pipet. In browsers met de EyeDropper API (Chrome en Edge) kiest u een kleur van waar dan ook op uw scherm, ook buiten het browservenster. Kleur uit een foto of logobestand nodig? Gebruik de online kleurenpipet.
• Toetsenbordbediening. Het wiel en het verzadigingsvlak reageren op de pijltjestoetsen, zodat u een kleur in kleine stapjes bijstelt.
• Voorinstellingen bieden veelgebruikte basiskleuren als u gewoon een snel startpunt nodig heeft.

Veelgestelde vragen

Hoe zet ik OKLCH om naar HEX?

Plak een oklch()-waarde in het OKLCH-veld en alle andere uitvoerwaarden, inclusief HEX, worden meteen herberekend. Het werkt ook andersom: voer een HEX-code in en lees de bijbehorende oklch() af. Een kanttekening: OKLCH kan ook kleuren buiten het sRGB-bereik beschrijven, en die worden afgekapt tot wat sRGB kan tonen. Een zeer verzadigde oklch() ziet er daardoor op een breedgamutscherm anders uit dan de HEX-versie ervan.

Kan ik oklch() gebruiken in productie-CSS?

Ja. Alle actuele versies van Chrome, Edge, Firefox en Safari ondersteunen oklch(), en het is een populaire notatie geworden voor design-tokens (Tailwind CSS 4 definieert er zijn hele palet mee). Voor zeer oude browsers zet u een HEX-fallback op de regel ervoor. Deze tool geeft u beide waarden.

Waarom verandert de harmonie als ik naar het RYB-wiel schakel?

Omdat wat "tegenover" ligt, afhangt van hoe de tinten over de cirkel zijn verdeeld. Het RYB-wiel verdeelt de pigmentprimairen gelijkmatig, zodat complementaire paren overeenkomen met wat schilders leren: rood en groen, blauw en oranje, geel en paars. De wielen HSV en HSL verdelen tinten op basis van lichtmenging, waardoor ze rood met cyaan combineren. Geen van beide is fout: RYB volgt de traditionele kunstopleiding, HSV en HSL volgen wat schermen doen.

Kan ik de CMYK-waarden vertrouwen voor drukwerk?

Zie ze als richtlijn. De echte omzetting voor drukwerk hangt af van het ICC-profiel van de drukker, het papier en de inkt. Dezelfde RGB-kleur komt er anders uit op gestreken en ongestreken papier. De waarden hier gebruiken de standaardformule, die u dicht in de buurt brengt, maar de definitieve proefdruk is aan uw drukker.

Waar is de pipetknop in Firefox of Safari?

Die is met opzet verborgen. De EyeDropper API (MDN, Engels) waarop de knop steunt, is momenteel alleen beschikbaar in browsers op basis van Chromium (Chrome, Edge, Opera). Alle andere functies van de tool werken overal, alleen het kiezen van het scherm ontbreekt. Heeft u een kleur uit een afbeelding nodig? Gebruik de online kleurenpipet, die in elke browser werkt.

Blijft mijn kleurgeschiedenis privé?

Ja. De geschiedenis staat in de localStorage van uw browser, op uw apparaat. Niets dat u kiest, plakt of kopieert wordt ergens naartoe verzonden. De hele tool draait als JavaScript in uw browser, wat u kunt controleren op het tabblad Netwerk van uw ontwikkelaarstools.