Online Kleurkiezer
Kies een kleur op het wiel, verfijn deze op het verzadigingsvlak, en lees hem terug in elk formaat dat uw project spreekt — van #RRGGBB tot oklch(). Deze kleurkiezer doet ook de dingen die andere tools overslaan: drie wielgeometrieën inclusief het schilders-RYB-wiel, harmonie-overlays die voor u een palet samenstellen, een alfakanaal, en export van het volledige palet met één klik als CSS-variabelen, SCSS of JSON. Dit alles wordt lokaal in uw browser berekend.
Drie wielen, niet één
De keuzelijst Wielmodus verandert de geometrie van het wiel zelf:
- HSV en HSL zijn de digitale wielen — tinten geordend zoals RGB-schermen licht mengen. Ze verschillen in hoe het vierkante vlak zich gedraagt: bij HSV is de helderste hoek de pure tint, bij HSL staan pure tinten op 50% lichtheid met wit erboven.
- RYB (schilders) ordent tinten zoals kunstenaars ze leerden: rood, geel en blauw als primaire kleuren, met oranje, groen en paars ertussen. De praktische waarde blijkt bij harmonieën — op het RYB-wiel is het complement van rood groen en het complement van blauw oranje, de klassieke pigmentparen, terwijl een digitaal wiel rood met cyaan paart. Zag een “complementair” palet van een gewone kleurkiezer er ooit vreemd uit voor uw ogen? Dit is de reden.
Harmonieën die het palet voor u samenstellen
Kies een regel onder Kleurharmonie en het wiel markeert de bijpassende kleuren, die verschijnen als een kant-en-klaar palet:
- Complementair — één tegenoverliggende kleur. Het sterkste contrast; gebruik het voor één accent tegenover een dominante merkkleur.
- Split-complementair — de twee buren van het complement. Bijna net zoveel contrast, veel makkelijker in balans te brengen.
- Triadisch — drie gelijkmatig verdeelde tinten. Levendig maar stabiel; laat één tint domineren en gebruik de andere twee spaarzaam.
- Tetradisch (vierkant) — vier tinten. Rijke schema’s voor illustraties en datavisualisatie; lastig in balans te brengen bij UI-werk.
- Analoog — de directe buren. Weinig spanning, goed voor achtergronden en gradiënten.
- Monochroom — één tint in oplopende lichtheid. De veiligste keuze voor interfacestatussen (hover, actief, uitgeschakeld).
Het palet-paneel kopieert de hele set met één klik, in het formaat dat u kiest: gewoon HEX, RGB, HSL, OKLCH, kant-en-klare CSS custom properties (--color-1: …), SCSS-variabelen of JSON om aan code door te geven.
Plak alles, lees alles
De invoervelden accepteren vrijwel elke kleurnotatie die u erin gooit: #f80, #ff8800, 8-cijferige hex met alfa, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, of CSS-kleurnamen zoals rebeccapurple. Wat er ook binnenkomt, er komen zeven gesynchroniseerde uitvoerwaarden terug: HEX, RGB, HSL, HSV, LCH, OKLCH en CMYK, elk met een eigen kopieerknop.
Twee hulpchips onder de preview benoemen de kleur voor u: de dichtstbijzijnde CSS-kleurnaam (handig voor snelle prototypes en om over kleuren te praten) en het dichtstbijzijnde Tailwind-token (bijv. orange-500), zodat u binnen uw designsysteem kunt blijven in plaats van eenmalige waarden te verzinnen.
Sleep de alfa-schuifregelaar onder de preview en de uitvoerwaarden schakelen om naar hun transparante vormen — #RRGGBBAA, rgba(), hsla() — met de preview getoond op een schaakbordpatroon, zodat u de transparantie kunt beoordelen.
Welk formaat moet u gebruiken?
| Formaat | Volledige naam | Wanneer te gebruiken? |
|---|---|---|
| HEX | Hexadecimaal | De standaard voor het web. Compact, universeel ondersteund, gemakkelijk te kopiëren. 8 cijfers voegen alfa toe. |
| RGB | Rood, Groen, Blauw | Hoe schermen denken. Drie lichtkanalen, 0–255. Het formaat dat de meeste API’s en canvas-code verwachten. |
| HSL | Tint, Verzadiging, Lichtheid | Voor mensen die handmatig aanpassen. “Iets lichter” of “minder verzadigd” is één enkele cijferwijziging. |
| HSV | Tint, Verzadiging, Waarde | Grafische software. Het model achter de kleurkiezers in Photoshop en GIMP. |
| LCH | Lichtheid, Chroma, Tint | Perceptueel uniform. Gelijke numerieke stappen zien er visueel ook gelijk uit — wat HSL beweert te zijn. |
| OKLCH | OK-Lichtheid, Chroma, Tint | De moderne CSS-keuze. Corrigeert de tintverschuivingen van LCH in blauwtinten; ondersteund in alle huidige browsers en ideaal voor design-tokensystemen. |
| CMYK | Cyaan, Magenta, Geel, Zwart (Key) | Georiënteerd op print. Een benaderende conversie om met printontwerpers te communiceren — de definitieve waarden komen altijd van het kleurprofiel van de drukker. |
Kleine dingen die tijd besparen
- Geschiedenis houdt zichzelf bij. De laatste 24 kleuren waarmee u heeft gewerkt overleven een paginaverversing — alleen opgeslagen in de lokale opslag van uw browser, nooit ergens geüpload.
- Pipet. In browsers met de EyeDropper API (Chrome en Edge) kunt u een kleur kiezen van waar dan ook op uw scherm, zelfs buiten het browservenster.
- Toetsenbordbediening. Het wiel en het verzadigingsvlak reageren op de pijltjestoetsen voor pixelprecieze aanpassingen.
- Voorinstellingen dekken de gangbare basiskleuren wanneer u gewoon snel een startpunt nodig heeft.
Veelgestelde vragen (FAQ)
Is oklch() veilig om te gebruiken in productie-CSS?
Ja. Alle huidige versies van Chrome, Edge, Firefox en Safari ondersteunenoklch(), en het is de voorkeursnotatie geworden voor design-tokens (Tailwind CSS 4 definieert zijn volledige palet erin). Voor zeer oude browsers zet u op de vorige regel een HEX-fallback klaar — deze tool geeft u beide waarden.