Kleurconverter

Eén kleur, elk formaat

Ontwerptools, CSS, huisstijlgidsen en codebibliotheken beschrijven kleuren allemaal op hun eigen manier. Een ontwerper geeft je #8997BB, een grafiekbibliotheek wil rgb(137, 151, 187), en jij wilt een HSL-waarde om een lichtere tint te maken. Deze kleurconverter accepteert een kleur in elk gangbaar formaat en toont hem in alle andere.

Ondersteunde formaten zijn onder meer HEX (#8997BB), HEX met alfa (#8997BBCC), RGB, RGBA, HSL, HSLA en HSV. Plak er een in en kopieer de versie die je nodig hebt.

Korte uitleg: HEX en RGB beschrijven hoeveel rood, groen en blauw licht er is. HSL beschrijft tint (de positie op het kleurenwiel, 0–360°), verzadiging en lichtheid, waardoor je makkelijk lichtere en donkere varianten maakt. HSV (ook HSB) is wat veel kleurkiezers in ontwerpapps gebruiken. De "A"-versies voegen een alfakanaal voor transparantie toe.

Zo gebruik je de kleurconverter

1. Voer een kleur in een ondersteund formaat in, bijvoorbeeld #8997BB, rgb(137,151,187) of hsl(223, 27%, 63%).
2. Verstuur om om te zetten.
3. Kopieer het formaat dat je nodig hebt uit de resultaten.
4. Plak het in je CSS, ontwerpbestand of code.

Veelvoorkomend gebruik

• Huisstijlkleuren uit een stijlgids omzetten naar CSS-waarden.
• RGBA- of HSLA-waarden krijgen om transparantie toe te voegen aan een overlay of schaduw.
• Met HSL lichtere en donkere varianten van een merkkleur maken voor hover-effecten.
• Kleuren gelijktrekken tussen apps als Figma, Photoshop, Canva en code.
• Controleren of twee waarden uit verschillende bronnen echt dezelfde kleur zijn.

Tips en goed om te weten

• HEX met drie cijfers is een verkorte notatie: #ABC is gelijk aan #AABBCC.
• In HEX met acht cijfers zijn de laatste twee de alfa: FF is volledig dekkend en 00 volledig transparant; 80 is ongeveer 50%.
• HSL en HSV zijn niet hetzelfde, ook al gebruiken ze allebei tint en verzadiging. Gebruik de juiste voor de tool waarin je plakt.
• Let op leesbaarheid: tekst heeft genoeg contrast met de achtergrond nodig (WCAG adviseert minstens 4,5:1 voor gewone tekst).
• Wil je een kleur visueel kiezen, gebruik dan de kleurkiezer. Voor één specifieke omzetting kun je HEX naar RGB of RGB naar HEX proberen.

Veelgestelde vragen

Wat is een HEX-kleurcode?

Een HEX-code is een hexadecimaal getal van zes cijfers met een # ervoor. Elk paar cijfers bepaalt rood, groen en blauw van 00 (niets) tot FF (vol), dus #FF0000 is puur rood.

Wat is het verschil tussen RGB en RGBA?

RGBA voegt een vierde waarde toe, alfa, van 0 (transparant) tot 1 (dekkend). rgba(0, 0, 0, 0.5) is zwart met 50% dekking.

Waarom HSL gebruiken in plaats van HEX?

HSL is voor mensen makkelijker aan te passen. Door alleen de lichtheid te veranderen krijg je lichtere of donkere versies van dezelfde tint, handig om kleurpaletten te bouwen.

Zijn HSV en HSB hetzelfde?

Ja. HSB (hue, saturation, brightness) is een andere naam voor HSV (hue, saturation, value).

Kan CSS al deze formaten gebruiken?

Moderne browsers ondersteunen HEX, HEX met alfa, rgb(), rgba(), hsl() en hsla() direct in CSS. HSV is geen CSS-formaat, dus zet dat eerst om.

Gerelateerde tools

• Kleurkiezer: De makkelijkste manier om een kleur uit het kleurenwiel te kiezen en de resultaten in elk formaat te krijgen.
• HEX naar RGB: Zet HEX-kleurwaarden eenvoudig om naar RGB met deze handige converter.
• RGB naar HEX: Zet RGB-kleurwaarden eenvoudig om naar HEX met deze handige converter.
• Afbeeldingen comprimeren: Comprimeer en optimaliseer afbeeldingen voor een kleiner bestand met behoud van hoge kwaliteit.
• Hexconverter: Zet tekst om naar hexadecimaal en andersom voor elke invoer.