Kleurcodeconverter
Voer een kleur in en kopieer HEX-, RGB- en HSL-waarden.
#624DE3CC
Over deze tool
De tool voor kleurcodes toont één kleur tegelijkertijd in HEX, RGB en HSL en zet de formaten in elkaar om. Je kunt een kleur kiezen door een waarde in te typen, een voorinstelling te selecteren of de pipet te gebruiken, en daarnaast de transparantie aanpassen. Ideaal om een kleur om te zetten naar het codeformaat dat je nodig hebt voor webdesign, UI-werk, CSS en beeldbewerking.
Gebruiksaanwijzing
Kies een kleur
Voer een waarde in bij de velden HEX, RGB of HSL, of selecteer een vooraf ingestelde kleur. In omgevingen die dit ondersteunen kun je ook de pipetknop gebruiken om direct een kleur van het scherm te kiezen.
Pas de transparantie aan
Sleep de transparantieschuifregelaar om de dekking van de kleur te bepalen. De instelling is zichtbaar in het voorbeeld bovenaan en in de kleurcodes.
Controleer en kopieer het resultaat
Controleer de kleur in het voorbeeld en druk daarna op de kopieerknop naast het HEX-, RGB- of HSL-veld om de gewenste waarde naar het klembord te kopiëren.
Kenmerken
HEX, RGB en HSL samen
Voer een kleur in één formaat in en zie de HEX-, RGB- en HSL-waarden in één oogopslag.
Realtime voorbeeld en transparantie
Het voorbeeld wordt direct bijgewerkt wanneer je kleurwaarden of transparantie wijzigt, en met de schuifregelaar kun je semi-transparante kleuren maken.
Pipet en vooraf ingestelde kleuren
Gebruik in ondersteunende browsers de pipet om een kleur van het scherm te kiezen, of klik snel op een veelgebruikte voorinstelling om deze toe te passen.
Kopieer elk formaat afzonderlijk
Kopieer de HEX-, RGB- of HSL-waarde apart om deze direct in CSS, ontwerptools en documenten te gebruiken.
Voer waarden direct in
Als je de kleurcode al kent, typ deze dan in de velden om het conversieresultaat te zien.
Verwerking in de browser
Je kleurwaarden en conversieresultaten blijven in je browser. Er wordt niets naar een server verzonden.
Gebruikssituaties
CSS-kleurcodes omzetten
Zet een HEX-kleur uit een ontwerpmockup om naar RGB of HSL voor gebruik in CSS-stijlen.
Kleuren overdragen tussen ontwerptools
Zet dezelfde kleur om naar het codeformaat dat elk programma vereist wanneer de formaten verschillen.
Semi-transparante achtergronden maken
Pas de transparantie aan om semi-transparante kleuren te maken voor overlays, achtergronden, knoppen en randen.
Kleuren van het scherm kiezen
Gebruik de pipet om een kleur te selecteren die op een webpagina, afbeelding of app-scherm wordt weergegeven en bekijk deze als code.
Merkkleuren beheren
Bewaar de HEX-, RGB- en HSL-waarden van merkkleuren bij elkaar voor consistent gebruik in web, drukwerk en ontwerpdocumenten.
Veelgestelde vragen
Wat is het verschil tussen HEX, RGB en HSL?
HEX geeft een kleur weer in hexadecimaal, bijvoorbeeld #8AD0FF. RGB drukt de intensiteit van rood, groen en blauw uit als getallen, terwijl HSL een kleur beschrijft aan de hand van tint, verzadiging en helderheid.
Welk formaat moet ik gebruiken?
HEX is eenvoudig en wordt veel gebruikt op het web en in ontwerpdocumenten. RGB is handig om kleurkanalen direct aan te passen, en HSL is nuttig om tint of helderheid intuïtief te wijzigen.
Hoe wordt transparantie weergegeven in de kleurcode?
Een HEX-waarde met transparantie wordt getoond als een code van 8 cijfers, met de alphawaarde achter de gebruikelijke code van 6 cijfers. In #8AD0FFCC stellen de laatste twee cijfers bijvoorbeeld transparantie voor.
Wat is het verschil tussen HEX van 6 en 8 cijfers?
Een HEX-code van 6 cijfers bevat alleen de waarden voor rood, groen en blauw. Een HEX-code van 8 cijfers voegt aan het eind een alphawaarde toe om transparantie weer te geven.
Wat betekenen 100% en 0% transparantie?
100% betekent volledig ondoorzichtig en 0% volledig transparant. Tussenliggende waarden leveren semi-transparante kleuren op waarbij de achtergrond erdoorheen schemert.
Wat is het bereik van RGB-waarden?
RGB-waarden lopen van 0 tot 255 voor elk van de kleuren rood, groen en blauw. Hoe hoger de waarde, hoe sterker die kleurcomponent is.
Wat betekenen de HSL-waarden?
H is de tint, doorgaans een waarde tussen 0 en 359 graden. S is de verzadiging en L de helderheid, beide uitgedrukt in een percentage.
Werkt de pipet in elke browser?
De ondersteuning hangt af van de browser en de omgeving. Gebruik in omgevingen zonder ondersteuning de kleurinvoer of de vooraf ingestelde kleuren.
Kan ik een kleur bewerken nadat ik een voorinstelling heb gekozen?
Ja. Pas na het kiezen van een voorinstelling de HEX-, RGB- of HSL-waarden of de transparantie aan om de kleur te verfijnen.
Welke waarde kopieert de kopieerknop?
Elke kopieerknop kopieert de huidige kleurwaarde in dat formaat. Je kunt alleen de HEX-, RGB- of HSL-waarde kopiëren die je nodig hebt.
Wordt mijn ingevoerde kleur naar een server verzonden?
Nee. Alle verwerking vindt lokaal in je browser plaats. Je kleurwaarden en conversieresultaten worden nooit naar een server verzonden.
Gerelateerde tools
