Color Picker
Deze pagina combineert twee manieren om met kleuren te werken. Wil je een kleur visueel kiezen? Open het native kleurenwiel van je besturingssysteem of browser, sleep de swatch aan tot je de gewenste tint hebt, en zie direct de HEX-, RGB- en HSL-notatie ernaast verschijnen — of typ meteen een HEX-code in het tekstveld ernaast als je die al op zak hebt (bijvoorbeeld uit een designbestand). Heb je in plaats daarvan puur een tekst-naar-tekst-conversie nodig, bijvoorbeeld om snel een HEX-code uit code of een style guide om te zetten naar de rgb()-syntax voor een CSS-variabele (of andersom), zonder het kleurenwiel te hoeven openen? Gebruik dan de aparte HEX ↔ RGB-sectie verderop op deze pagina: plak links een HEX-code (met of zonder '#', 6 of 3 cijfers) en zie direct de RGB-waarde, of plak rechts een RGB-waarde (zoals '255, 87, 51' of 'rgb(255, 87, 51)') en zie direct de HEX-code. 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.
Werk je met Westcube?
Laat ook een review achter op GoogleVeelgestelde 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 staat een tekstveld waar je direct een HEX-code kunt typen of plakken (met of zonder #-teken). Zodra de code geldig is, springt de swatch en het kleurenwiel automatisch mee en zie je meteen de bijbehorende RGB- en HSL-waarden. Zoek je puur tekst-naar-tekst-conversie zonder kleurenwiel, bijvoorbeeld om in bulk waarden te controleren, gebruik dan de aparte HEX ↔ RGB-sectie verderop op deze pagina.
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.