CodeKitHubWat is deze tool?
Een kleurkiezer zet een visuele keuze — deze tint blauw, dat exacte pixeltje in een logo — om in de numerieke codes die software begrijpt. Dezelfde kleur heeft meerdere gelijkwaardige notaties: HEX (#3b82f6) domineert in CSS en designoverdrachten, RGB (59, 130, 246) komt overeen met hoe schermen en code kleur weergeven, en HSL (217°, 91%, 60%) beschrijft tint, verzadiging en helderheid op een manier waar mensen makkelijk over kunnen redeneren.
De tweede helft van de tool is een eyedropper voor afbeeldingen. Upload een screenshot, logo of foto en klik op een punt om de kleur onder de cursor te bemonsteren — de standaardmanier om de vraag "wat is dit precies voor kleur?" te beantwoorden. Waar de browser de EyeDropper API ondersteunt, wordt het native vergrotende loepje gebruikt; in andere browsers leest de tool de pixelwaarde uit een canvas-kopie van de afbeelding. In beide gevallen gebeurt de verwerking lokaal: de afbeelding wordt nooit geüpload.
Waarom gebruiken?
- Drie formaten tegelijk: elke gekozen kleur wordt getoond als HEX, RGB en HSL tegelijk, elk met een kopieerknop met één klik — geen aparte conversiestap nodig.
- Kiezen uit een afbeelding: upload elke foto en klik om de exacte pixelkleur te bemonsteren — ideaal om merkkleuren uit een logo te halen of een kleur uit een screenshot te matchen.
- Gebruikt de native EyeDropper van de browser met vergrootglas waar beschikbaar, en valt daarbuiten terug op nauwkeurig canvas-pixelaflezen.
- Een live voorbeeldstaal toont de huidige kleur in één oogopslag, zodat je de keuze kunt controleren voordat je kopieert.
- Gratis, direct en volledig lokaal: kleuren worden berekend en afbeeldingen uitgelezen in je browser — niets wordt geüpload, opgeslagen of gelogd.
Hoe te gebruiken
- Kies een kleur met het kleurveld, of plak/bewerk een waarde direct.
- Wil je uit een afbeelding bemonsteren, upload dan een afbeelding en klik op het punt waarvan je de kleur wilt.
- Lees de HEX-, RGB- en HSL-waarden, samen getoond met een live voorbeeldstaal.
- Klik op de kopieerknop naast het formaat dat je nodig hebt — HEX voor CSS, RGB of HSL voor code.
Voorbeeld
Invoer
Klikken op het blauwe vlak van een geüpload logoUitvoer
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Alle drie de regels beschrijven precies dezelfde kleur. Gebruik HEX in stylesheets en designtools, RGB waar code kanaalwaarden verwacht, en HSL wanneer je lichtere of donkerdere varianten wilt afleiden door alleen het laatste getal te veranderen.
Welk kleurformaat voor welke taak
Moderne CSS accepteert alle drie overal waar een kleur is toegestaan, dus de keuze gaat over workflow, niet over compatibiliteit. Teams standaardiseren doorgaans op HEX in designtokens en gebruiken vervolgens HSL bij het verkennen van variaties — verander de helderheid met 10–15 punten voor een bruikbare hoverstatus zonder de tint te verschuiven.
| Formaat | Voorbeeld | Beste voor |
|---|---|---|
| HEX | #3b82f6 | CSS, designtools, kleuren delen in chat en specs |
| RGB | rgb(59, 130, 246) | Code die kanalen manipuleert, canvas-tekenwerk, rgba()-transparantie |
| HSL | hsl(217, 91%, 60%) | Lichtere/donkerdere/hover-varianten maken, paletten bouwen |
Van gekozen kleur naar afgewerkte CSS
Een kleur bemonsteren is meestal stap één van een stylingtaak. Heb je dezelfde kleur nodig in andere notaties — CMYK voor drukwerk of een OKLCH-waarde voor CSS met breed kleurengamma — dan gaat de Kleurconverter verder waar deze kiezer stopt.
De gekozen kleur wordt vaak direct gebruikt in een visueel effect: de Box Shadow Generator gebruikt een HEX-waarde voor realistische schaduwen, en afgeronde kaarten gebouwd met de Border Radius Generator maken de look compleet.
→ Kleurconverter · Box Shadow Generator · Border Radius Generator
Veelgestelde vragen
Wat is het verschil tussen HEX, RGB en HSL?
Het zijn drie notaties voor hetzelfde kleurmodel. HEX pakt de rood-, groen- en blauwkanalen samen in zes hexadecimale cijfers (#3b82f6) en is de meest voorkomende vorm in CSS en designtools. RGB geeft dezelfde drie kanalen als decimale getallen van 0 tot 255. HSL herformuleert de kleur als tint (0–360°), verzadiging en helderheid — veel intuïtiever wanneer je "dezelfde kleur, alleen lichter" wilt. Converteren tussen deze formaten verandert de kleur nooit.
Hoe werkt het kiezen van een kleur uit een afbeelding?
De geüploade afbeelding wordt in je browser op een onzichtbaar canvas getekend. Wanneer je klikt, leest de tool de rood-, groen- en blauwwaarden van de pixel op die exacte positie uit en zet ze om naar HEX, RGB en HSL. In browsers die de EyeDropper API ondersteunen (Chrome en Edge op desktop) opent in plaats daarvan een native vergrotend loepje, zodat je overal op het scherm met pixelprecisie kunt kiezen.
Wordt mijn afbeelding ergens geüpload?
Nee. De afbeelding wordt direct door je browser geopend en lokaal uitgelezen via een canvas; er wordt nooit een bestand of kleurgegeven verzonden of opgeslagen. Je kunt de pagina laden, offline gaan, en zowel de kiezer als de eyedropper voor afbeeldingen blijven werken — wat het veilig maakt voor nog niet uitgebrachte ontwerpen en interne screenshots.
Waarom komt de gekozen kleur niet exact overeen met wat ik op mijn scherm zie?
Twee veelvoorkomende redenen. Anti-aliasing: pixels aan de randen van tekst en vormen zijn vermengd met de achtergrond, dus door één pixel ernaast te klikken krijg je een tussenkleur — bemonster in plaats daarvan het effen midden van een vlak. Kleurbeheer: JPG/PNG-bestanden met ongewone kleurprofielen kunnen op verschillende schermen iets anders renderen; de tool geeft de pixelwaarde zoals opgeslagen in het bestand, wat de waarde is die je voor ontwerpwerk wilt.
Welk formaat moet ik kopiëren voor CSS?
HEX is de veiligste standaardkeuze — elke browser en tool accepteert het. Gebruik HSL wanneer je van plan bent hover- of dark-mode-varianten te maken, omdat het aanpassen van alleen de helderheidscomponent tint en verzadiging consistent houdt. RGB is vooral nuttig wanneer code kleuren opbouwt uit numerieke kanalen, of bij het toevoegen van transparantie, waar rgba(59, 130, 246, 0.5) duidelijker leest dan een achtcijferige HEX.