Kleurconverter

Kleuren converteren tussen HEX, RGB- en HSL-formaten

Kies een kleur

Of voer hieronder waarden in

HEX

RGB

HSL

Begrip Kleurformaten

Digitale kleuren kunnen in meerdere formaten worden weergegeven, elk met verschillende voordelen. Dit hulpmiddel converteert naadloos tussen de drie meest voorkomende webkleurformaten: HEX, RGB en HSL. Allemaal de verwerking gebeurt in uw browser; uw kleurkeuzes worden nooit bijgehouden of opgeslagen.

#️⃣ HEX (hexadecimaal)

Formaat: #RRGGBB (6 tekens) of #RGB (afkorting van 3 tekens)
Voorbeeld: #2563EB of #F00 (rood)
Beste voor: CSS, HTML-attributen, ontwerptools. Meest compacte formaat voor webontwikkeling.

🔴🟢🔵 RGB (rood, groen, blauw)

Formaat: rgb(R, G, B) waarbij elke waarde 0-255 is
Voorbeeld: rgb(37, 99, 235)
Beste voor: CSS-functies, JavaScript-kleurmanipulatie, programmatisch kleur generatie. Gemakkelijk te begrijpen als licht mengen.

🌈HSL (Tint, Verzadiging, Lichtheid)

Formaat: hsl(H, S%, L%) waarbij H 0-360° is, S en L 0-100% zijn
Voorbeeld: hsl(221, 83%, 53%)
Beste voor: Kleurenschema's maken, helderheid/verzadiging aanpassen. De meeste intuïtief voor menselijke waarneming.

Algemene gebruiksscenario's

CSS-stijl: Converteren tussen formaten voor verschillende CSS-eigenschappen en browsercompatibiliteit
Design Handoff: Vertaal kleuren van ontwerptools (vaak HEX) naar codevriendelijke formaten
Kleurenschema's: Gebruik HSL om te creëren variaties (pas de lichtheid aan voor hover-statussen)
Toegankelijkheid: Bereken het contrast verhoudingen met RGB-waarden
Merkrichtlijnen: Documentkleuren in meerdere formaten voor verschillende gebruiksscenario's

Snelle tips voor kleurentheorie

Creëren Zweeftoestanden

Gebruik HSL: verlaag de lichtheid met 10-15% voor donkerdere zweefeffecten, of verhoog voor lichtere degenen. Veel eenvoudiger dan het berekenen van RGB-veranderingen.

Waarborgen Contrast

Voor naleving van WCAG AA heeft tekst een contrastverhouding van 4,5:1 nodig. HSL Lichtheidsverschillen van 40%+ voldoet doorgaans aan deze eis.

Veelgestelde vragen

Welk formaat moet ik gebruiken in CSS?

Alle drie werken in moderne browsers. HEX is het meest gebruikelijk en compact. Gebruik RGB/HSL wanneer dat nodig is transparantie (rgba() of hsla()) of dynamische kleurmanipulatie.

Wat betekent de # in HEX bedoel je?

Het #-symbool geeft een hexadecimale kleurwaarde aan. Het is vereist in CSS, maar vaak optioneel ontwerphulpmiddelen. De volgende 6 tekens vertegenwoordigen rood, groen en blauw in basis-16 (00-FF = 0-255).

Hoe werkt HSL Hue?

Tint is een graad op het kleurenwiel: 0° = Rood, 60° = Geel, 120° = Groen, 180° = Cyaan, 240° = Blauw, 300° = Magenta, 360° = terug naar Rood. Het maakt het selecteren van complementaire kleuren (180° uit elkaar) intuïtief.

Kan ik transparantie toevoegen?

Ja! Gebruik rgba(R, G, B, A) of hsla(H, S%, L%, A) waarbij A 0-1 is. Moderne CSS ondersteunt ook HEX van 8 tekens: #RRGGBBAA.

CSS-kleurreferentie

                            /* HEX */

                            color: #2563EB;

                            /* RGB */

                            color: rgb(37, 99, 235);

                            /* HSL */

                            color: hsl(221, 83%, 53%);

                            /* With transparency */

                            color: rgba(37, 99, 235, 0.5);

                            color: hsla(221, 83%, 53%, 0.5);