Kleurkiezer

Wat is een kleurkiezer?

Een kleurkiezer is een online tool waarmee je kleuren voor webdesign, grafisch werk en UI/UX-ontwikkeling visueel kunt kiezen en kunt omzetten naar formaten zoals HEX, RGB en HSL. Met het kleurwiel en de selector voor verzadiging en lichtheid vind je snel de tint die je zoekt. Omdat ook dekking (alpha) wordt ondersteund, kun je bovendien kleurcodes in RGBA- en HSLA-indeling genereren.

Deze tool werkt rechtstreeks in je browser, dus je hoeft geen apart programma te installeren. In browsers die de EyeDropper API ondersteunen, zoals Chrome en Edge, kun je kleuren direct van elk deel van je scherm ophalen. Zo neem je snel kleuren over uit ontwerpvoorbeelden of afbeeldingen.

Wanneer gebruik je deze tool?

• Webontwikkeling – Snel nauwkeurige kleurcodes (HEX, RGB, HSL) vinden en kopiëren om ze direct in CSS-stylesheets te gebruiken
• UI/UX-ontwerp – Harmonieuze kleurpaletten samenstellen voor knoppen, achtergronden en tekst in apps of websites
• Grafisch ontwerp – Kleuren kiezen en combineren voor posters, banners en socialmedia-afbeeldingen
• Merkidentiteit – Merkkleuren voor je bedrijf of project vastleggen en in meerdere formaten documenteren
• Toegankelijkheid testen – Kleurwaarden controleren om het contrast tussen tekst en achtergrond beter te beoordelen
• Kleuren uit referenties halen – Met de EyeDropper direct kleuren overnemen van websites of afbeeldingen die je aanspreken
• Presentaties maken – Kleurcodes vinden om presentaties en documenten een consistente uitstraling te geven

Belangrijkste functies

• Kleurkeuze via kleurwiel – Kies intuïtief de gewenste tint op een kleurwiel van 360 graden. Blader vloeiend door kleuren met muisbewegingen of aanraking.
• 2D-selector voor verzadiging en lichtheid – Pas verzadiging en lichtheid tegelijk aan op basis van de gekozen tint. Ga vrij van heldere pasteltinten naar diepe donkere kleuren.
• Alphaschuif voor dekking – Regel de dekking van 0% tot 100% om halftransparante kleuren in RGBA- en HSLA-formaat te maken. Handig voor overlays en verloopeffecten.
• Ondersteuning voor meerdere kleurformaten – Converteert en toont HEX, RGB en HSL in realtime. Bij lagere dekking wordt automatisch overgeschakeld naar RGBA en HSLA.
• Kleuren van het scherm halen met EyeDropper – Klik in Chrome of Edge op een willekeurige plek op het scherm om direct een kleur op te halen. Werkt ook met kleuren uit afbeeldingen in andere tabbladen of op je bureaublad.
• Automatische kleurharmonieën – Genereert automatisch complementaire, analoge, triadische en monochrome paletten op basis van de geselecteerde kleur. Zo vind je snel combinaties die volgens de kleurleer goed samenwerken.
• CSS-code met één klik kopiëren – Kopieer de gekozen kleur als CSS-code in de vorm color: #D4AF37;. Kies uit HEX, RGB of HSL.
• Kleurgeschiedenis opslaan – De laatste 20 gekozen kleuren worden automatisch opgeslagen. Ook na het sluiten van de browser blijft de geschiedenis beschikbaar, zodat je eerdere kleuren opnieuw kunt gebruiken.

Zo gebruik je de tool

1. Kies een tint – Klik of sleep over het kleurwiel om het basiskleurgebied te kiezen, zoals rood, oranje, geel, groen, blauw of paars.
2. Pas verzadiging en lichtheid aan – In het vierkante vlak hieronder verander je verzadiging door naar links of rechts te bewegen en lichtheid door omhoog of omlaag te gaan. Rechtsboven staat de meest levendige en heldere kleur.
3. Stel de dekking in – Heb je een halftransparant effect nodig, pas dan de alphaschuif aan. 100% is volledig dekkend en 0% volledig transparant.
4. Controleer en kopieer kleurwaarden – Bekijk de HEX-, RGB- en HSL-waarden in het rechterpaneel en klik naast elk formaat op de kopieerknop om ze naar het klembord te kopiëren.
5. Gebruik de CSS-code – Kies onderaan in het CSS-gedeelte je voorkeursformaat (HEX/RGB/HSL) en gebruik de knop “CSS kopiëren” om code te kopiëren die je direct in stylesheets kunt plakken.

Kleurtheorie en kleurharmonieën begrijpen

Het principe van het kleurwiel

Het kleurwiel vindt zijn oorsprong in Isaac Newtons experiment uit 1666, waarbij hij licht met een prisma splitste. Moderne kleurwielen worden vaak onderscheiden in het traditionele RYB-model op basis van rood-geel-blauw en het digitale RGB-model met rood-groen-blauw. Deze tool gebruikt het HSL-kleurmodel (Hue-Saturation-Lightness), waarin de tint wordt weergegeven als een hoek van 0° tot 360°.

HSL vs. RGB vs. HEX

• HEX (hexadecimaal) – Het meest gebruikte formaat op het web. Beschrijft rood, groen en blauw als 00-FF (0-255) in de notatie #RRGGBB. Voorbeeld: #D4AF37 is een goudkleur.
• RGB (rood, groen, blauw) – Gebaseerd op de drie primaire lichtkleuren, waarbij elk kanaal een waarde van 0-255 krijgt. In CSS gebruik je dit als rgb(212, 175, 55).
• HSL (tint, verzadiging, lichtheid) – Een model dat dicht bij de menselijke kleurwaarneming ligt. Het bestaat uit tint (0°-360°), verzadiging (0%-100%) en lichtheid (0%-100%). Daardoor pas je helderheid of levendigheid binnen dezelfde tint eenvoudig aan.

Soorten kleurharmonieën

• Complementair – Twee kleuren die tegenover elkaar liggen op het kleurwiel. Geeft sterk contrast en trekt snel de aandacht. Voorbeeld: de complementaire kleur van blauw (240°) is geel (60°).
• Analoog – Kleuren die naast elkaar liggen op het kleurwiel. Ze komen vaak in de natuur voor en geven een harmonieuze, rustige indruk. Voorbeeld: oranje, geel en limoengroen.
• Triadisch – Kleuren op posities die het kleurwiel in drie gelijke delen verdelen. Geeft evenwichtig contrast en blijft zachter dan complementaire combinaties. Voorbeeld: rood, geel en blauw.
• Monochroom – Kleuren die alleen in verzadiging en lichtheid verschillen binnen één tint. Geeft een strakke en verfijnde indruk en wordt vaak gebruikt in merkontwerp.

Dekking (alpha) gebruiken

Het alpha-kanaal regelt de dekking van een kleur. 0% is volledig transparant en 100% volledig dekkend. Halftransparante kleuren worden in webdesign vaak gebruikt voor overlays, verlopen en hoverstaten. RGBA- en HSLA-formaten worden sinds CSS3 ondersteund en HEX-codes met transparantie (#RRGGBBAA) werken in moderne browsers.

Over de EyeDropper API

De EyeDropper API is een web-API waarmee je in de browser rechtstreeks kleuren van het scherm kunt ophalen. Deze functie wordt momenteel ondersteund in Chrome 95+ en Edge 95+. Firefox en Safari ondersteunen haar nog niet.

Met EyeDropper kun je kleuren ophalen uit het huidige tabblad, maar ook uit andere tabbladen, andere applicaties en zelfs van het bureaublad. Dat is erg handig om snel nauwkeurige kleurwaarden over te nemen uit ontwerpvoorbeelden, websites van concurrenten of inspirerende foto’s.

Tips voor gebruik

• Merkkleuren documenteren – Heb je de hoofdkleuren van je bedrijf of project gekozen, noteer dan alle HEX-, RGB- en HSL-waarden zodat je overal dezelfde kleuren gebruikt, van web tot print en video.
• Denk aan toegankelijkheid – Let bij het kiezen van tekst- en achtergrondkleuren op voldoende verschil in lichtheid. Volgens de WCAG-richtlijnen is minimaal 4,5:1 contrast voor gewone tekst en 3:1 voor grote tekst aan te raden.
• Bouw een kleurenpalet op – Kies eerst één hoofdkleur en gebruik daarna de kleurharmonieën om eenvoudig een professioneel palet samen te stellen. Meestal bestaat dat uit 1 hoofdkleur, 1 à 2 secundaire kleuren en 1 accentkleur.
• Gebruik halftransparante effecten – Plaats je tekst over een achtergrondafbeelding, dan kan een halftransparante overlay (bijvoorbeeld rgba(0, 0, 0, 0.5)) de leesbaarheid verbeteren.

Details

De resultaten van deze kleurkiezer worden gegenereerd op basis van je invoer en gekozen opties.

Controleer belangrijke beslissingen altijd nog eens aan de hand van officiële richtlijnen of deskundig advies.

Veelgestelde vragen