# Kleurkiezer

> Kleurenwiel in HSV, HSL en RYB, kant-en-klare harmonieën, conversie HEX, RGB, HSL, OKLCH, CMYK plus dichtstbijzijnde Tailwind-token. Gratis, geen installatie.

URL: https://acrafto.com/nl/online-kleurkiezer/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

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](https://en.wikipedia.org/wiki/RYB_color_model) 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](https://acrafto.com/nl/afbeeldingen-naar-grijstinten-converteren-online/).

## 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](https://tailwindcss.com/docs/colors), 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](https://bottosson.github.io/posts/oklab/) (Engels). Syntax en browserondersteuning staan samengevat op [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (Engels). Hoe het drukmodel werkt, beschrijft [Wikipedia bij CMYK](https://nl.wikipedia.org/wiki/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](https://acrafto.com/nl/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](https://nl.wikipedia.org/wiki/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](https://developer.mozilla.org/en-US/docs/Web/API/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](https://acrafto.com/nl/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.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))