Geen upload, 100% lokaal, geen account

Kleurconverter

Converteer tussen HEX, RGB, HSL, HSV en CMYK. Live voorbeeld. WCAG-contrastchecker voor toegankelijkheid. Er verlaat niets je browser.

Hoe Kleurconverter werkt

Kleurconverter vertaalt elke kleur onmiddellijk tussen HEX-, RGB-, HSL-, HSV- en CMYK-formaten terwijl je typt. Het voert ook een WCAG-contrastcontrole uit tussen twee kleuren die je kiest, met de contrastverhouding en het AA/AAA-geslaagd/mislukt-resultaat voor normale tekst, grote tekst en UI-componenten. Alle berekeningen vinden plaats in de browser zonder dat er gegevens naartoe worden gestuurd; niets dat je typt, verlaat je apparaat.

Begrijpen hoe dezelfde kleur er uitziet in verschillende kleurmodellen is nuttig bij ontwerperoverdrachten. Een ontwerper kan een merkkleur specificeren als HEX #1A4F8C; een CSS-ontwikkelaar heeft het HSL-equivalent nodig voor theming; een printteam heeft de CMYK-uitsplitsing nodig. Dit hulpmiddel doet de conversie in alle richtingen tegelijk zodat je nooit meerdere afzonderlijke converters hoeft te gebruiken.

Geschreven door Bastien Sulyan

Hoe je Kleurconverter gebruikt, stap voor stap

  1. Typ een HEX-waarde, klik op een kleurstaal of voer RGB-, HSL-, HSV- of CMYK-waarden in de betreffende velden in.
  2. Alle andere formaatrepresentaties worden direct bijgewerkt om de equivalente kleur te tonen.
  3. Om een contrastcontrole uit te voeren, selecteer je een voorgrondkleur en een achtergrondkleur met de twee kleurkiezers.
  4. Lees de WCAG-contrastverhouding en de geslaagd/mislukt-badges voor AA- en AAA-conformiteitsniveaus.
  5. Kopieer een kleurwaarde met het kopieerpictogram naast elk veld.

Veelvoorkomende toepassingen

  • Een UI-ontwerper converteert een merk-HEX-code naar HSL om een CSS-aangepaste eigenschap te schrijven voor een themingssysteem.
  • Een webontwikkelaar controleert de contrastverhouding tussen zijn tekstkleur en achtergrond voordat hij een component uitbrengt om WCAG AA-conformiteit te bevestigen.
  • Een printontwerper ontvangt een web-HEX-kleur en heeft het CMYK-equivalent nodig om deze te evenaren in een gedrukte brochure.
  • Een ontwikkelaar heeft de RGB-uitsplitsing van een ontwerpelement nodig om afzonderlijke kanaalwaarden door te geven aan een canvas-tekenfunctie.

Veelgestelde vragen

Ondersteunt het hulpmiddel alfawaarden (transparantie)?

De huidige converter werkt met volledig ondoorzichtige kleuren (alpha = 1). HEXA (8-cijferige hex) en RGBA vallen nog niet binnen het bereik. Stel voor dekking het alfakanaal afzonderlijk in je CSS in met de notatie rgba() of oklch().

Worden de kleuren die ik invoer opgeslagen of ergens naartoe gestuurd?

Nee. Kleurconversie is puur rekenwerk (kanaalhertoewijzing en bereiksca ling) dat volledig in de JavaScript-engine van de browser draait. Niets dat je hier typt, bereikt een server of externe dienst.

Welke WCAG-contrastniveaus ondersteunt de checker?

Het hulpmiddel rapporteert aan de hand van WCAG 2.1-succescriteria: AA vereist een minimale contrastverhouding van 4,5:1 voor normale tekst (onder 18pt of 14pt vet) en 3:1 voor grote tekst en UI-componenten. AAA vereist 7:1 voor normale tekst en 4,5:1 voor grote tekst.

Waarom verschillen CMYK-waarden tussen dit hulpmiddel en professionele ontwerpsoftware?

De RGB-naar-CMYK-conversie die dit hulpmiddel uitvoert, is een wiskundige formule zonder kleurprofiel. Professionele ontwerptoepassingen passen ICC-kleurprofielen toe die rekening houden met inktstiptoename en substraateigenschappen. De CMYK-waarden hier zijn nuttig voor benadering; gebruik voor productiedruk altijd je persprofi el in speciale software.

Kan ik hier een CSS-kleurnaam zoals 'cornflowerblue' converteren?

CSS-benoemde kleuren kunnen niet direct in de convertervelden worden getypt. Om een benoemde kleur te converteren, zoek je eerst de HEX-waarde op in een CSS-referentie (cornflowerblue is #6495ED) en plak je die HEX in het HEX-veld om alle andere formaten te zien.

Werkt het hulpmiddel offline nadat de pagina is geladen?

Ja. Kleurconversie is rekenwerk zonder externe afhankelijkheid. Zodra de pagina in je browsercache staat, kun je hem zonder netwerkverbinding openen en alle conversies werken normaal.

Gerelateerde tools

Houd alles lokaal, verken aanvullende tools.

Alle developertools