CodeKitHubWat is deze tool?
Kleuren op het web worden geschreven in verschillende gelijkwaardige formaten, allemaal gedefinieerd door de CSS Color-specificatie op MDN. HEX (#4f46e5) is de compacte vorm die overal in CSS en designoverdrachten wordt gebruikt. RGB (rgb(79, 70, 229)) geeft de rood-, groen- en blauwcomponenten direct weer, wat code vaak nodig heeft. HSL (hsl(243, 75%, 59%)) beschrijft tint, verzadiging en helderheid — het meest intuïtieve formaat om een kleur aan te passen, zoals hem donkerder of minder verzadigd maken.
Ze beschrijven allemaal dezelfde kleur; deze tool converteert er exact tussen en toont een voorbeeld zodat je kunt bevestigen dat het de kleur is die je bedoelde.
Waarom gebruiken?
- Accepteert elk formaat als invoer — HEX (3 of 6 cijfers), RGB of HSL — en geeft alle formaten als uitvoer.
- Live voorbeeldstaal zodat je de kleur ziet, niet alleen getallen.
- Visuele kleurkiezer voor als je liever op het oog kiest.
- Eén klik kopiëren per formaat, klaar voor CSS of code.
- Gratis, direct, geen upload.
Hoe te gebruiken
- Typ of plak een kleur: #4f46e5, rgb(79, 70, 229) of hsl(243, 75%, 59%) werken allemaal.
- Of klik op de kleurkiezer en kies visueel.
- Lees alle drie de formaten in de resultaten en controleer het voorbeeldstaal.
- Klik op "Copy" naast het formaat dat je nodig hebt.
Voorbeeld
Invoer
#4f46e5Uitvoer
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Drie notaties, één identieke kleur.
Welk formaat moet je gebruiken?
Alle drie beschrijven exact dezelfde kleur — de keuze gaat over welke het makkelijkst werkt voor de taak, niet over nauwkeurigheid.
| Formaat | Beste voor | Waarom |
|---|---|---|
| HEX (#4f46e5) | CSS, designoverdrachten, snel kopiëren-plakken | Kortst om te typen en te plakken; het universele formaat in designtools zoals Figma. |
| RGB (rgb(79,70,229)) | Code die kanalen direct manipuleert, canvas-/afbeeldingswerk | Komt overeen met hoe grafische API's en pixeldata van afbeeldingen kleur daadwerkelijk opslaan. |
| HSL (hsl(243,75%,59%)) | Een kleur aanpassen — lichter, donkerder, meer/minder verzadigd | Helderheid en verzadiging zijn aparte getallen die je direct kunt afstemmen, anders dan bij HEX/RGB waar elk kanaal verschuift. |
Veelvoorkomende toepassingen
- Een kleur visueel kiezen in een designtool en die vervolgens omzetten naar de exacte HEX- of RGB-waarde die nodig is in CSS of code.
- Een set verwante tinten (lichtere/donkerdere varianten) genereren door naar HSL te converteren, de helderheid aan te passen en weer terug te converteren.
- Een merkkleur matchen tussen verschillende tools die elk een ander formaat verwachten — een logobestand in RGB, een stijlgids in HEX, een CSS-variabele die HSL nodig heeft voor thema's.
- Controleren of een kleur uit een screenshot of designbestand (vaak gegeven als RGB) overeenkomt met de HEX-waarde in een stylesheet.
Veelgestelde vragen
Wanneer gebruik ik HSL in plaats van HEX of RGB?
Wanneer je over een kleur wilt redeneren. Een kleur 10% donkerder maken in HSL betekent de helderheid met 10 punten verlagen; in HEX of RGB zou je alle kanalen opnieuw moeten berekenen. Designsystemen definiëren paletten daarom vaak in HSL.
Ondersteunt de tool 3-cijferige HEX zoals #fff?
Ja. #fff is een afkorting voor #ffffff — elk cijfer wordt verdubbeld. Beide vormen worden geaccepteerd en de uitvoer toont de volledige 6-cijferige vorm.
Hoe zit het met alfa (transparantie)?
Deze tool converteert dekkende kleuren (de RGB/HSL-waarden). Heb je transparantie nodig, voeg dan zelf de alfa toe: rgba(79, 70, 229, 0.5) of #4f46e580 — het kleurdeel blijft hetzelfde.
Waarom verschillen mijn HSL-waarden 1 punt met een andere tool?
Afronding. HSL↔RGB-conversie levert fractionele waarden op, en tools ronden verschillend af. Een verschil van ±1 in tint of percentage is onzichtbaar en normaal.
Worden kleurnamen zoals 'red' ondersteund?
Niet in Fase 1 — de tool richt zich op de drie numerieke formaten die ontwikkelaars het vaakst converteren. Voer de HEX-, RGB- of HSL-waarde van de kleur in, of kies hem visueel met de kiezer.
Wanneer gebruik ik HEX, RGB of HSL?
Heb je transparantie nodig, gebruik dan 8-cijferige HEX (#RRGGBBAA) of rgba() — 6-cijferige HEX heeft geen alfakanaal. Wil je lichtere of donkerdere varianten van dezelfde kleur, dan is HSL het makkelijkst: houd tint en verzadiging vast en verander alleen het helderheidsgetal. Voor gewoon kopiëren-plakken in CSS of designtools blijft 6-cijferige HEX de meest universeel geaccepteerde vorm.