What is a color picker?

A color picker is a tool that lets you select a color visually and provides the corresponding color code in formats like HEX (#FF5733), RGB (255, 87, 51), and HSL (11, 100%, 60%). These codes are used in web design, graphic design, and programming.

What is the difference between HEX, RGB, and HSL?

HEX is a 6-digit hexadecimal code (#RRGGBB) commonly used in CSS. RGB defines color by Red, Green, Blue values (0-255). HSL uses Hue (0-360°), Saturation (0-100%), and Lightness (0-100%), making it easier to adjust colors intuitively.

Is this color picker free?

Yes. 100% free, no signup, runs entirely in your browser. No data is sent to any server.

Kleurkiezer

Kies elke kleur en krijg HEX, RGB en HSL waarden direct. Klik op het spectrum, pas de tint aan, kopieer de code.

HEX

RGB

HSL

CSS

Recente kleuren

Hoe je de kleurkiezer gebruikt

Kies

Klik ergens op het kleurenspectrum om een kleur te kiezen. Gebruik de tintschuif eronder om de basistint te veranderen.

Lees

De HEX, RGB, HSL en CSS waarden worden direct bijgewerkt. Je kunt ook rechtstreeks een HEX-code in het invoerveld typen.

Kopiëren

Klik op de kopiëerknop naast een waarde om deze naar je klembord te kopiëren. Recente kleuren worden opgeslagen in de geschiedenisbalk.

Kleurformaatverwijzing

Formaat	Voorbeeld	Gebruikt in	Voordeel
HEX	#FF5733	CSS, HTML, designtools	Compact, algemeen bekend
RGB	rgb(255, 87, 51)	CSS, JavaScript, Photoshop	Komt overeen met hoe schermen kleur weergeven
HSL	hsl(11, 100%, 60%)	CSS, moderne designsystemen	Intuïtief aan te passen (tint, verzadiging, lichtsterkte)

Veel voorkomende toepassingen

Webontwikkeling

Kies kleuren voor CSS-stylesheets, React-componenten en designtokens. Kopiëer HEX- of HSL-waarden rechtstreeks in je code.

Grafisch ontwerp

Vind exacte kleurwaarden voor Figma, Photoshop, Illustrator of Canva. Match merkleuren door een bekende HEX-code in te voeren.

Presentaties

Kies aanvullende kleuren voor PowerPoint of Google Slides. Gebruik het spectrum om kleuren te vinden die goed samengaan.

Sociale media

Match merkleuren voor afbeeldingen op sociale media, banners en profielelementen. Kopiëer CSS-waarden voor webgebaseerde designtools.

Veelgestelde vragen

Wat is het verschil tussen HEX, RGB en HSL?

HEX is een 6-cijferige hexadecimale code (#RRGGBB) gebruikt in CSS en HTML. RGB definieert kleur via Rood, Groen en Blauw kanalen (elk 0–255). HSL gebruikt Tint (0–360°), Verzadiging (0–100%) en Lichtsterkte (0–100%), waardoor het gemakkelijker is om kleurvariaties te maken door één dimensie tegelijk aan te passen.

Kan ik een kleur uit een afbeelding kiezen?

Deze tool biedt een op spectrum gebaseerde kleurkiezer. Om kleuren uit een bestaande afbeelding te kiezen, probeer je de ingebouwde EyeDropper API van de browser (Chrome 95+) of maak je een schermafdruk en match je de kleur visueel met het spectrum.

Is deze kleurkiezer gratis?

Ja. 100% gratis, geen aanmelding, geen advertenties. De tool draait volledig in je browser — geen gegevens worden naar een server gestuurd. Werkt offline nadat de pagina is geladen.

Gerelateerde tools

Afbeelding naar Base64 Afbeelding verkleinen Afbeelding naar grijswaarden OG-afbeelding verkleinen