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. HSL maakt intuïtieve aanpassingen (lichter/donkerder zonder tintverschuiving) eenvoudiger dan het bewerken van hexadecimale cijfers.
Kleur
Resultaat
HEX: #6f9b96
RGB: rgb(111, 155, 150)
HSL: hsl(173, 18%, 52%)
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.
Wanneer kies je iets anders
• Wanneer je het contrast WCAG moet verifiëren, gebruikt je de contrastcontrole.
• Wanneer je CMYK of Pantone nodig heeft voor afdrukken, gebruik dan afdrukspecifieke hulpmiddelen.
• Wanneer je volledige gradiënten genereert, gebruikt je de CSS gradiëntgenerator.
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.
Toegankelijkheid begint bij conversie
Een mooie #7C3AED paars op wit kan bij kleine tekst onvoldoende contrast opleveren. Nadat je hier kleuren heeft gekozen, voert je de voorgrond-/achtergrondparen door de contrastcontrole. Geef de voorkeur aan HSL-aanpassingen om fouten op te lossen: maak de tekst donkerder of maak de achtergrond lichter met behoud van de tint. Vertrouw niet alleen op kleur voor fouten — combineer met pictogrammen en labels (WCAG 1.4.1).
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.
Worden mijn gegevens naar een server verzonden?
Nee.
Is deze tool gratis?
Ja.