Wat is een kleurconverter?
Een kleurconverter zet één kleurwaarde om naar de formaten die vaak worden gebruikt in webdesign, CSS, designsystemen en overdrachtsnotities. Een enkele merkkleur kan bijvoorbeeld als HEX in een stijlgids, RGB in een design token, HSL in een theme-editor en CMYK in druknotities worden opgeslagen. Deze tool houdt die representaties bij elkaar zodat je de juiste versie kunt kopiëren zonder opnieuw te hoeven rekenen.
Deze converter is bewust compact. Hij richt zich op praktische sRGB-webkleuren: HEX, RGB, HSL, HSV en een eenvoudige CMYK-benadering. Hij probeert geen professionele kleurbeheersoftware of ICC-profiel-workflows te vervangen.
Ondersteunde kleurformaten
| Format | Example | Het beste te gebruiken voor |
|---|---|---|
| HEX | #3366FF | CSS, design tokens, snelle visuele overdracht |
| RGB | rgb(51, 102, 255) | CSS-waarden, canvaswerk, programmatische kleurkanalen |
| HSL | hsl(225, 100%, 60%) | Themaanpassingen op basis van kleurtoon, verzadiging en lichtheid |
| HSV | hsv(225, 80%, 100%) | Workflow zoals kleurkiezer en visuele afstemming |
| CMYK | cmyk(80%, 60%, 0%, 0%) | Geschatte drukopmerkingen, geen definitief kleurbeheer voor drukwerk |
Belangrijke beperkingen
- CMYK-uitvoer wordt berekend vanuit sRGB-waarden en is slechts een benadering.
- CSS-naamkleuren, verlopen, Lab, LCH, OKLCH en Display-P3 vallen buiten het bereik van deze compacte v1.
- Alphawaarden kunnen geparseerd worden voor veelvoorkomende HEX/RGB/HSL-vormen, maar het native swatch-voorbeeld toont de ondoorzichtige basiskleur.
- Verschillende designtools kunnen HSL-, HSV- of CMYK-waarden licht anders afronden.
Gangbare workflows
CSS-opruiming
Plak een HEX-kleur uit een stijlgids en kopieer RGB of HSL voor een componenttoestand, grafiekkleurenschema of theme-variabele.
Design-overdracht
Houd meerdere kleurnotaties bij elkaar wanneer een ontwikkelaar, ontwerper of contenteditor verschillende tools gebruikt.
Tokencontrole
Controleer of een kleurtoken overeenkomt met de verwachte kleurtoon en verzadiging voordat je het in een openbare UI gebruikt.
Druknotities
Genereer geschatte CMYK-waarden voor bespreking en laat de definitieve drukuitvoer over aan profielbewuste tools.
Veelgestelde vragen
Is CMYK-uitvoer exact?
Nee. De CMYK-waarde is een eenvoudige conversie vanuit sRGB, nuttig voor globale aantekeningen. Definitief drukwerk hangt af van papier, inkt, persinstellingen en ICC-profielen.
Kan ik CSS-kleurfuncties plakken?
Ja, voor gangbare RGB-, HSL-, HSV- en CMYK-achtige functiesyntaxis. Nieuwere kleurruimtes zoals Lab, LCH, OKLCH en Display-P3 vallen bewust buiten de reikwijdte van deze compacte tool.
Ondersteunt de tool alpha-transparantie?
Het kan gangbare alpha-vormen parsen zoals RGBA, HSLA en achtcijferige HEX, maar de hoofd-swatch en kopieeruitvoer richten zich op praktische ondoorzichtige webkleuren.
Waarom verschillen waarden soms van een andere designtool?
Kleine verschillen ontstaan meestal door afrondingsregels of aannames in kleurbeheer. Voor web sRGB-kleuren zijn die verschillen doorgaans klein.
Wanneer moet ik in plaats daarvan de contrastchecker gebruiken?
Gebruik de contrastchecker wanneer je twee kleuren moet vergelijken voor tekstleesbaarheid. Deze converter zet slechts één kleur tussen formaten om.