Kleurenconverter (HEX, RGB, HSL)
Converteer kleuren tussen HEX (#RRGGBB), RGB (0–255) en HSL (tint, verzadiging, lichtheid) in realtime. Pas de kiezer- of typewaarden aan om alle formaten samen te zien worden bijgewerkt - ideaal voor CSS, Figma-overdracht en merkrichtlijnen.
Zo zet je kleuren om
1. Kies visueel een kleur of voer HEX-, RGB- of HSL-waarden in.
2. Bekijk direct gelijkwaardige waarden in alle ondersteunde formaten.
3. Pas de HSL-lichtheid aan voor hover-statussen terwijl de merktint behouden blijft.
4. Kopieer het formaat dat je stapel nodig heeft (#hex voor CSS, rgb() voor moderne browsers).
Voorbeelden van kleurconversie
Merk blauw #2563EB
RGB-rgb(37, 99, 235); HSL hsl(217, 84%, 53%). Hover donkerder maken: hsl(217, 84%, 45%) zonder hex te raden.
CSS RGB naar HEX voor SVG
rgb(255, 87, 51) → #FF5733 voor SVG opvul- en Android XML kleurbronnen.
Neutraal grijs voor randen
hsl(220, 10%, 90%) → heel licht koelgrijs; verhoog de verzadiging iets voor getinte UI-achtergronden.
Wanneer gebruik je deze tool
• Wanneer je ontwerptokens vertaalt tussen HEX in Figma en HSL in CSS variabelen.
• Wanneer je consistente licht/donker-thema's bouwt door de HSL-lichtheid te verschuiven.
• Wanneer je merkpaletten documenteert voor ontwikkelaars en marketeers.
Kleurentheorie voor UI-werk
Complementaire kleuren bevinden zich tegenover elkaar op het tintwiel (180° uit elkaar) — hoog contrast, spaarzaam gebruiken voor CTA’s. Analoge tinten (±30°) voelen harmonieus aan voor dashboards. Neutraal UI-chroom maakt vaak gebruik van blauw- of grijstinten met een lage verzadiging (hsl 220, 10%, 96%) in plaats van puur #EEE, dat er onder verschillende schermen warm/koud uit kan zien. Beperk het merkpalet tot één primaire tint, 2 à 3 neutrale tinten en semantische groen/rood tinten voor status.
Veelgestelde vragen
Waar is de HSL goed voor?
Lichtheid en verzadiging aanpassen terwijl de tint stabiel blijft — b.v. primair, primair zwevend, primair gedempt vanaf één tintwaarde.
HEX afkorting #RGB?
#F53 breidt uit naar #FF5533. Wij accepteren 3- of 6-cijferige hexadecimale getallen (optioneel #).
sRGB versus display-P3?
Deze tool maakt gebruik van sRGB, standaard voor web CSS. Schermen met een breed spectrum kunnen enigszins anders worden weergegeven.
Alfa / transparantie?
8-cijferige HEX (#RRGGBBAA) en rgba() worden mogelijk ondersteund als de tool alfa weergeeft: controleer de UI-velden.
Waarom zien mijn RGB-sommen er verkeerd uit in hexadecimale vorm?
Elk kanaal is 0–255 → twee hexadecimale cijfers. 255 = FF, niet “255” aaneengeschakeld.