Color Converter
HEX RGB HSL conversion
HEX RGB HSL conversion Wordt lokaal uitgevoerd in uw browser
#2563eb
rgb(37, 99, 235)
hsl(221, 83%, 53%)
About the
De Color Converter vertaalt een enkele kleur tussen HEX, RGB, HSL en HSV, en toont de WCAG-contrastverhouding ten opzichte van zwart-wit, zodat je direct kunt zien of tekst in die kleur leesbaar is. HEX en RGB zijn de formaten die je tussen tools kopieert, maar HSL is degene die eigenlijk handig is voor ontwerpwerk: het scheidt tint van lichtheid, zodat je een tint of tint kunt produceren die dezelfde tint behoudt in plaats van naar grijs af te drijven zoals naïeve RGB-wiskunde dat doet. Achtcijferige hex- en rgba-waarden hebben een alfakanaal, en de converter verwerkt deze ook.
Where people use the
- Een merkhexwaarde omzetten in de rgb-syntaxis die een ontwerptool verwacht.
- Het produceren van een consistente set tinten uit één merktint met behulp van HSL.
- Controleren of een linkkleur leesbaar is op een donkere achtergrond.
- Het matchen van een kleur uit een screenshot met de dichtstbijzijnde hexadecimale waarde.
How to use the
- 1
Voer de kleur in elk gewenst formaat in
Plak een hexadecimale waarde zoals 2f6fed, of een rgb- of hsl-functie, of gebruik de kiezer. De andere formaten worden bijgewerkt terwijl u typt.
- 2
Lees alle afbeeldingen in één keer
Hex, RGB, HSL en HSV worden samen weergegeven met het alfakanaal gescheiden.
- 3
Controleer de contrastverhoudingen
Verhoudingen ten opzichte van zwart-wit vertellen u of de kleur bruikbaar is als tekstkleur of als achtergrond. Hoofdtekst heeft 4,5 op 1 nodig, grote tekst en interfaceranden hebben 3 op 1 nodig.
- 4
Kopieer het formulier dat uw code nodig heeft
Elk veld heeft zijn eigen kopieerknop, zodat u precies de syntaxis krijgt die uw stylesheet verwacht, in plaats van handmatig opnieuw te formatteren.
Tips en beste praktijken
- Pas de lichtheid in HSL aan in plaats van wit of zwart toe te voegen in RGB; de tint blijft intact.
- Test het contrast op de kleinste grootte waarin de tekst daadwerkelijk zal worden gebruikt, niet op de kopgrootte.
- Bewaar een gedocumenteerd palet van vijf of zes waarden in plaats van een nieuw palet per component te bedenken.
Veelgestelde vragen
Hoe wordt een hexadecimale kleur omgezet naar RGB?
Elk paar hexadecimale cijfers is één kanaal, gelezen als basis 16. In 2f6fed is 2f 47 rood, 6f is 111 groen en ed is 237 blauw. Een afkorting van drie cijfers, zoals f0a, verdubbelt elk cijfer, zodat het ff00aa wordt.
Waarom is de HSL-lichtheid niet hetzelfde als de waargenomen helderheid?
Omdat het oog veel gevoeliger is voor groen dan voor blauw. Puur blauw en puur geel kunnen een lichtheidswaarde delen, terwijl geel veel helderder lijkt. Daarom moet het contrast worden gemeten met een luminantieformule in plaats van te worden beoordeeld op basis van het HSL-nummer.
Wat betekent het vierde paar cijfers in een hexadecimale kleur?
Alpha, van 00 volledig transparant tot ff volledig ondoorzichtig. Achtcijferige hex wordt ondersteund in alle huidige browsers en is het hex-equivalent van rgba.
Is de CMYK-conversie nauwkeurig voor afdrukken?
Nee, en dat kan geen enkele browsertool zijn. CMYK is afhankelijk van de inkt, het papier en het printerprofiel. Gebruik deze waarde als uitgangspunt en converteer via het ICC-profiel van uw drukwerkleverancier naar alles wat er toe doet.
Hoe kies ik leesbare tekst voor een gekleurde achtergrond?
Vergelijk de contrastverhouding tussen de tekstkleur en de achtergrond. Als noch zwart noch wit een waarde van 4,5 op 1 bereikt, is de achtergrond te verzadigd voor de hoofdtekst en moet deze donkerder of lichter worden gemaakt voordat deze achter de kopie wordt gebruikt.
Waarom ziet dezelfde hex er op twee schermen anders uit?
Omdat beeldschermen verschillen qua kleurbereik, kalibratie en helderheid. Een breedbeeldscherm toont verzadigde kleuren die een standaard sRGB-paneel niet kan reproduceren. Werk in sRGB, tenzij je een specifieke reden hebt om dat niet te doen.