Developer Tools

Color Picker

Visueel kiezen (kleurenwiel)

Klik om het kleurenwiel te openen
HEX
RGB
HSL

Kies een kleur met het native kleurenwiel van je besturingssysteem of browser, of voer direct een HEX-, RGB- of HSL-code in. De picker synchroniseert de kleur en alle drie de notaties meteen, zodat je elke waarde afzonderlijk kunt kopiëren. Alles gebeurt volledig client-side in je browser — er wordt niets naar onze server verstuurd, niets opgeslagen en er is geen account nodig.

Waar je dit voor gebruikt

  • #2563EB → rgb(37, 99, 235) → hsl(221, 83%, 53%)
  • #059669 → rgb(5, 150, 105) → hsl(161, 94%, 30%)
  • #DC2626 → rgb(220, 38, 38) → hsl(0, 72%, 51%)
  • #ABC → #AABBCC → rgb(170, 187, 204)

Wat anderen van deze tool vinden

Nog geen beoordelingen voor deze tool. Die van jou is de eerste.

Veelgestelde vragen

Wat is het verschil tussen HEX, RGB en HSL?

Het zijn drie manieren om precies dezelfde kleur te beschrijven. HEX (bijvoorbeeld #2563EB) is een compacte, hexadecimale notatie die in CSS en de meeste designtools de standaard is — elke kleurcomponent (rood, groen, blauw) wordt geschreven als een hexadecimaal getal van twee cijfers, van 00 tot FF. RGB (bijvoorbeeld rgb(37, 99, 235)) schrijft diezelfde componenten als decimale getallen van 0 tot 255, wat aansluit bij hoe schermen kleur opbouwen. HSL (hue/tint 0-360°, saturation/verzadiging, lightness/helderheid, beide in procenten) is intuïtiever om mee te ontwerpen: wil je dezelfde kleur lichter of donkerder, dan verander je alleen de lightness-waarde zonder de tint te verliezen. Deze pagina rekent moeiteloos tussen alle drie de notaties.

Kan ik ook zelf een HEX-code intypen in plaats van het kleurenwiel te gebruiken?

Ja. Naast de visuele kleurenwiel-picker staan velden voor HEX, RGB en HSL. Zodra een code geldig is, springen de swatch, het kleurenwiel en de andere twee waarden automatisch mee.

Wat is de 3-cijferige HEX-shorthand zoals #ABC?

Een verkorte notatie waarbij elk cijfer wordt verdubbeld: #ABC staat gelijk aan #AABBCC. Dat werkt alleen als beide cijfers van een component identiek zouden zijn (zoals AA, BB, CC) — met #ABC kun je dus niet elke kleur uitdrukken, alleen een beperkte subset. Zowel het HEX-tekstveld bij de visuele picker als de HEX ↔ RGB-sectie herkennen en expanderen de shorthand automatisch, dus je kunt overal zowel #ABC als #AABBCC invoeren en krijgt dezelfde RGB-waarde terug.

Ondersteunt deze tool ook transparantie (RGBA of 8-cijferige HEX)?

Nee, deze tool werkt bewust alleen met volledig dekkende kleuren (6- of 3-cijferige HEX en 3-waardige RGB, zonder alphakanaal), zowel in het kleurenwiel als in de HEX ↔ RGB-sectie. Transparantie voeg je in CSS meestal apart toe via de opacity-eigenschap of een vierde RGBA-waarde; de kleurwaarde zelf blijft hetzelfde ongeacht de transparantie, dus voor de kern-omzetting van kleur naar kleur is dat hier niet nodig.

Wordt de kleur die ik kies of invoer ergens opgeslagen?

Nee. Zowel het visueel kiezen als het tekstueel omzetten gebeurt volledig lokaal in je browser, met de standaard HTML-kleurenpicker en gewone JavaScript-berekeningen. Er wordt niets naar een server van Westcube (of wie dan ook) verstuurd, niets gelogd en niets bewaard. Sluit je het tabblad, dan is je invoer verdwenen — tenzij je de waarde zelf hebt gekopieerd.