Kleurcode Generator en Omrekener

Kies een kleur of voer een HEX-code in — ontvang direct HEX, RGB, HSL, CSS-naam en complementaire kleur.

Direct resultaat Werkt in de browser
HEX-code
#3D7EF7
RGB-waarde
rgb(61, 126, 247)
HSL-waarde
hsl(218, 91%, 60%)
CSS-naam
—
Complementaire kleur
#F7823D

Kleurmodellen

HEX  → #RRGGBB
RGB  → 0–255 per ch.
HSL  → 0–360° / 0–100%
WCAG → min 4.5:1

HEX: webstandaard. RGB: schermgebaseerd. HSL: tint-verzadiging-helderheid, intuïtief voor designers.

Hoe gebruik je dit?

  1. 1
    Kleur kiezenKlik op de kleurkiezer of voer direct een HEX-code in (bijv. #FF5733).
  2. 2
    Waarden aflezenHEX, RGB en HSL worden direct berekend; CSS-naam en complementaire kleur worden automatisch weergegeven.
  3. 3
    KopiërenKopieer de gewenste kleurcode naar het klembord met één klik.

Veelgestelde vragen

Wat is een HEX-kleurcode?
Een zescijferige hexadecimale waarde in het formaat #RRGGBB. Elk paar staat voor de intensiteit van een kleurkanaal (Rood, Groen, Blauw) van 00 tot FF (0–255). Dit maakt 16.777.216 kleuren mogelijk.
RGB of HSL — welke gebruiken?
RGB komt overeen met schermhardware en is wijdverspreid in CSS. HSL is intuïtiever voor designers: helderheid aanpassen zonder de tint te veranderen. Beide worden volledig ondersteund in modern CSS.
Waarvoor dient de complementaire kleur?
De complementaire kleur staat 180° tegenover op het kleurenwiel en creëert het maximale contrast — ideaal voor call-to-action knoppen en datavisualisaties.

Kleurcodes op het web: HEX, RGB en HSL

In webontwikkeling worden kleuren gedefinieerd via drie hoofdformaten: HEX, RGB en HSL. Dit hulpmiddel converteert elke kleur direct naar alle drie de formaten en toont ook de CSS-naam en de complementaire kleur.

HEX-kleurcodes

HEX is het meest gebruikte kleurformaat op het web. Het wordt geschreven als #RRGGBB, waarbij elk paar de intensiteit van een kanaal (Rood, Groen, Blauw) aangeeft van 00 tot FF (0–255). Met 256 waarden per kanaal ondersteunt HEX 16.777.216 kleuren. De verkorte notatie #RGB is ook geldig.

RGB-kleurmodel

RGB weerspiegelt de fysieke structuur van beeldschermen. Elk kanaal neemt waarden aan van 0 tot 255. In CSS: rgb(255, 87, 51) of met transparantie rgba(255, 87, 51, 0.8).

HSL-kleurmodel

HSL (Tint-Verzadiging-Helderheid) is intuïtiever voor designers. Tint: 0–360° op het kleurenwiel. Verzadiging: 0%=grijs, 100%=levendige kleur. Helderheid: 0%=zwart, 50%=normaal, 100%=wit. Lichte en donkere varianten aanmaken is eenvoudig door alleen de helderheid aan te passen.

Complementaire kleuren

Complementaire kleuren staan 180° tegenover elkaar op het kleurenwiel: Rood ↔ Cyaan, Groen ↔ Magenta, Blauw ↔ Geel. Ze creëren maximaal contrast voor CTA-knoppen en datavisualisaties.

Webtoegankelijkheid (WCAG)

Ca. 8% van de mannen heeft kleurenblindheid. WCAG 2.1 AA vereist een contrastverhouding van minimaal 4,5:1 voor normale tekst. Geef nooit informatie alleen via kleur weer.

CSS-kleurnamen

CSS definieert 148 benoemde kleuren (red, navy, coral, teal, enz.). Dit hulpmiddel herkent ze automatisch en toont de naam.

Privacy

Alle berekeningen vinden lokaal in de browser plaats. Er worden geen gegevens naar servers verzonden.

Reacties