Wat is Kleurenconverter?
Een kleurenconverter is een onmisbare tool voor webontwikkelaars, grafisch ontwerpers en iedereen die met digitale kleuren werkt.
Wanneer gebruik je deze rekenmachine
- U converteert een kleurspecificatie van een Figma- of Sketch-ontwerper naar CSS-compatibele waarden.
- U maakt een ontwerpsysteem.
- U maakt een kleurenpalet met HSL.
- U controleert toegankelijkheid volgens WCAG-normen.
- U converteert een oude kleurwaarde naar een ander formaat.
- U debugt CSS-kleurenproblemen en controleert hoe een kleur er echt uitziet.
Stappen:
- Voer een kleurwaarde in in elk formaat.
- Selecteer het invoerformaat met de HEX / RGB / HSL-tabbladen.
- Zie de geconverteerde waarden in alle drie de formaten onder het invoerveld.
- Kopieer de gewenste waarde met de kopieerknop.
- Controleer het WCAG-contrastbadge voor toegankelijkheid.
Formule
HEX → RGB: Scheid #RRGGBB in decimale waarden
RGB → HSL: Normaliseer RGB → Vind Tint/Verzadiging/Helderheid
HSL → RGB: Gebruik chrominantieformule om te converteren
Gebruikscases
- CSS-kleurwaarden converteren
- Kleurenpalettes maken vanuit een basiskleur
- Ontwerpsysteemkleuren matchen
- Kleurrelaties begrijpen met HSL
Belangrijkste voordelen
- Directe, nauwkeurige conversie tussen HEX-, RGB- en HSL-formaten
- Realtime kleurvoorbeeld terwijl u typt
- Automatische AA- en AAA-badges voor WCAG-contrastcontrole
- Toegang tot conversiegeschiedenis met uw recente kleuren
- Kopieer elke formaatwaarde met één klik
- Werkt volledig in uw browser zonder gegevens naar servers te sturen
Pro-tips
- Gebruik HSL om kleurvariaties te maken
- Gebruik altijd HEX in CSS en HTML
- Controleer uw kleurkeuze met WCAG-contrastvereisten
- Stel uw basispalet in HSL in bij het maken van een ontwerpsysteem
- Vergeet niet dat HEX-waarden niet hoofdlettergevoelig zijn
Veelgemaakte fouten
- Het # prefix vergeten bij het invoeren van HEX-kleuren
- RGB-kanaalwaarden buiten het 0-255 bereik gebruiken
- Het HSL-tintbereik verwarren met het RGB-kanaalbereik
- Aannemen dat HSL-helderheid en RGB-helderheid equivalent zijn
Sleutelbegrippen
- HEX: Een hexadecimaal kleurformaat gebruikt in CSS en webontwerp, geschreven als #RRGGBB.
- RGB: Het Rood-Groen-Blauw kleurmodel waarbij elke kleur wordt gedefinieerd door drie numerieke waarden.
- HSL: Het Tint-Verzadiging-Helderheid kleurmodel.
- Kleurruimte: Een wiskundig model om kleuren te organiseren en weer te geven.
- WCAG-contrastratio: Een numerieke maat voor het helderheidsverschil tussen voorgrondkleur en achtergrond.
Gerelateerde concepten
- CSS-eenheidconverter: Converteer px, rem, em, vw en andere CSS-eenheden.
- Base64-encoder/decoder: Encodeer en decodeer Base64-strings.
- JSON-formatter: Formatteer en valideer JSON-gegevens.
- Regex-tester: Test reguliere expressies tegen voorbeeldtekst
- URL-encoder/decoder: Encodeer en decodeer veilige URL-strings.
Voorbeeld
Invoer: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). Invoer: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.
Resultaten interpreteren
De converter toont uw kleur in drie formaten tegelijk. HEX is het meest voorkomende formaat voor webontwikkeling. RGB biedt directe controle over kleurkanalen. HSL is het meest natuurlijk voor menselijk begrip.