Kleurkiezer & Omzetter – HEX ⇄ RGB ⇄ HSL ⇄ CMYK + WCAG Contrast & Harmonieën

Loading…

Over Online Kleurkiezer & Omzetter

Laat een afbeelding vallen, plak een kleur of gebruik het wiel om pixelperfecte kleuren te selecteren. De tool voert een uitgebreide client-side analyse uit: het normaliseert je HEX, berekent RGB/HSL/HSV/CMYK, converteert naar XYZ/LAB/LCH, berekent luminantie en WCAG contrast, en genereert harmonieuze paletten. Je kunt vervolgens elk formaat kopiëren als een CSS-klare token of de harmonieën gebruiken om een samenhangend ontwerpsysteem op te bouwen.

Wat Deze Kleurkiezer Kan Doen

Kleuren bemonsteren van afbeeldingen* of begin met een precies kleurenwiel of HEX/RGB invoer
Rijke conversies: HEX, HEX8, RGB/A, HSL/A, HSV, CMYK, XYZ, LAB, LCH
Ingebouwde WCAG contrastchecker tegen #000000 en #FFFFFF met relatieve luminantie
Webveilige en verkorte HEX suggesties waar van toepassing
Kleurharmonieën: complementair, triadisch, tetradisch, analoog, monochroom (berekend via hue-rotatie)
Luminantie en waargenomen helderheid voorbeeld om contrastproblemen te anticiperen
Benaderende Pantone-achtige matching gebaseerd op dichtstbijzijnde RGB afstand (met gecachete dataset)
Analyse loopt client-side; alleen minimale data wordt gebruikt wanneer optionele Pantone opzoeken is ingeschakeld

🔧 Hoe de Kleurkiezer te Gebruiken for color-picker

1. Kies of pik een basiskleur

Plak een HEX waarde, typ RGB/HSL, of gebruik de kiezer om een kleur uit een afbeelding of het wiel te selecteren. De tool normaliseert het intern naar een veilige HEX waarde.

2. Verfijn tint en lichtheid

Pas tint, verzadiging en lichtheid aan tot de kleur goed lijkt. Een grote voorbeeld toont de kleur op lichte en donkere oppervlakken voor context.

3. Lees en kopieer de formaten die je nodig hebt

Kopieer HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, XYZ, LAB en LCH in één klik. Gebruik ze voor CSS variabelen, design tokens of overdrachtsnotities.

4. Controleer WCAG contrast

Zie contrastratio's versus #000000 en #FFFFFF gebaseerd op sRGB luminantie. Gebruik de resultaten om snel te beslissen of een kleur werkt voor lichaamstekst, grote titels of UI elementen.

5. Genereer harmonieën & bouw een palet

Verken complementaire, triadische, tetradische, analoge en monochrome kleuren gegenereerd via hue-rotatie. Voeg je favorieten toe aan een palet/geschiedenis en exporteer ze als tokens.

Technische Details

Invoer Verwerking & Normalisatie

De tool accepteert hexadecimale kleurcodes en converteert ze naar een genormaliseerde 6-cijferige HEX als interne referentie.

Aspect	Gedrag	Notities
HEX-normalizatie	3-cijferige en 6-cijferige HEX, optionele voorafgaande #	Korte HEX (bijv. #0f8) wordt uitgebreid naar #00ff88; niet-hex tekens worden verwijderd.
HEX8-ondersteuning	RGBA via #RRGGBBAA	Alfakanaal wordt omgezet naar 0–255 en toegevoegd als het 4e byte.
Webveilig voorstel	Uitlijnen op dichtstbijzijnde 51-stap per kanaal	Waarden worden afgerond naar het dichtstbijzijnde veelvoud van 51 (0, 51, 102, 153, 204, 255).
Kort HEX-voorstel	Alleen wanneer comprimeerbaar	Getoond wanneer elk paar HEX-cijfers herhaald wordt (bijv. #112233 → #123).

Kleurruimtes & Conversies

Alle berekeningen zijn gebaseerd op sRGB met een D65 referentiewit.

Ruimte	Berekening	Gebruik
RGB	Van genormaliseerde HEX (0–255 per kanaal)	Baserepresentatie voor conversies.
HSL / HSV	Standaard cilindrische transformaties van sRGB	Gebruikt voor intuïtieve bewerkingen en harmonieberekeningen.
CMYK	Apparaatonafhankelijke benadering	Berekend als 1−max(R,G,B) met 0–100% componenten; niet gekoppeld aan ICC-profielen.
XYZ	Gelineariseerde sRGB → XYZ met D65-matrix	Tussenruimte voor LAB/LCH en diepere analyse.
LAB	CIE Lab* van XYZ	Perceptueel uniformere metrische ruimte.
LCH	CIE LCh° van LAB	Handig voor tint/chroma/lichtheid aanpassingen en perceptueel paletontwerp.

Luminantie & WCAG Contrast

Contrast wordt berekend met de standaard WCAG relatieve luminantieformule.

Aspect	Details	Notities
Relatieve luminantie	Berekend uit gelineariseerde sRGB (Y-component)	Gebruikt coëfficiënten 0.2126R + 0.7152G + 0.0722B.
Contrastverhouding	(L1 + 0.05) / (L2 + 0.05)	Het hulpmiddel rapporteert contrast ten opzichte van #000000 en #FFFFFF.
WCAG-drempels	AA/AAA voor normale en grote tekst	Typische drempels: 4.5:1 (AA normaal), 3:1 (AA groot), 7:1 (AAA normaal), 4.5:1 (AAA groot).

Harmonieën & Afgeleide Kleuren

Harmonieën worden gegenereerd als eenvoudige kleurtintrotaties in HSL, waarbij verzadiging en lichtsterkte behouden blijven.

Harmonie	Regel	Voorbeeld
Complementair	+180° kleurtint	Tegenoverliggend punt op het kleurenwiel.
Triadisch	±120° kleurtint	Drie gelijkmatig verdeelde kleuren.
Tetradisch	+90°, +180°, +270° kleurtint	Vier kleuren die een rechthoek vormen op het wiel.
Analoog	−30° / +30° kleurtint	Buren rond de basiskleur.
Monochroom	Lichter/donkerder in L	Helderdere en donkerdere versies van dezelfde kleurtint.

Pantone-Achtige Matching (Benaderend)

Wanneer de Pantone-dataset beschikbaar is, berekent het hulpmiddel een dichtstbijzijnde match in de RGB-ruimte.

Aspect	Gedrag	Notities
Dataset laden	Gecached + asynchroon laden via getPantoneColors / getPantoneColorsCached	UI kan direct een match tonen als cache warm is, of na een korte asynchrone laadbeurt.
Matchmetriek	Gekwadrateerde Euclidische afstand op RGB (0–255)	Snelle, eenvoudige benadering; geen perceptuele ΔE*-metriek.
Uitvoer	Pantone-achtige ID en naam	Alleen ter richtlijn weergegeven; geen officiële Pantone-koppeling.

Prestaties & Privacy

Conversies, luminantie, contrast en harmonieën worden volledig client-side berekend. Pantone-opzoekingen kunnen een lokale of externe dataset raadplegen afhankelijk van configuratie, maar ruwe kleuren blijven eenvoudige HEX-tekenreeksen tenzij u ze expliciet deelt of exporteert.

Populaire Toepassingen

UI/UX & Front-End

Maak toegankelijke voor-/achtergrondparen voor knoppen, links en tekst.
Exporteer CSS-variabelen en design tokens direct vanuit gekozen kleuren.
Controleer contrast voor licht/donker modi voordat u een themaschakelaar implementeert.

/* CSS-kleurtokens */
:root {
  --brand: #4caf50;
  --brand-rgb: 76, 175, 80;
  --on-brand: #0b0b0b;
}
.button-primary {
  background-color: var(--brand);
  color: var(--on-brand);
}

Branding & Visuele Identiteit

Leid een primair/secundair/accentpalet af van één hoofdkleur.
Verken complementaire of triadische opties voor een logo of productlijn.
Krijg benaderende Pantone-achtige benaming voordat u een huisstijlgids voorbereidt.

Datavisualisatie & Dashboards

Definieer seriekleuren die onderscheidbaar blijven op zowel lichte als donkere achtergronden.
Gebruik LAB/LCH om paletten te ontwerpen met gecontroleerde perceptuele stappen.
Controleer snel of grafiekkleuren voldoen aan contrastverwachtingen in legenda en labels.

❓ Frequently Asked Questions

Wat is het verschil tussen HEX, RGB, HSL en HSV?

HEX is slechts een compacte manier om RGB-waarden in grondtal 16 te schrijven. RGB beschrijft de rood/groen/blauw-componenten in sRGB. HSL en HSV zijn intuïtievere cilindrische modellen: H is tint op het kleurenwiel, S is verzadiging, en L/V regelt helderheid of lichtsterkte.

Waarom zien CMYK-waarden er benaderend uit?

Echte CMYK-uitvoer hangt af van printerprofielen, inkt, papier en kalibratie. Deze tool toont een apparaatonafhankelijke benadering die nuttig is voor vroege ontwerpbeslissingen, maar definitief drukwerk moet worden gecontroleerd met de ICC-profielen van uw drukprovider.

Waar zijn LAB en LCH nuttig voor?

LAB en LCH zijn perceptueel uniformer dan ruwe RGB. Gelijkwaardige numerieke stappen in L of C zien er consistenter uit voor het oog, wat ze ideaal maakt voor het genereren van tinten, schaduwen en gebalanceerde paletten of voor het meten van visuele afstand tussen kleuren.

Hoe wordt contrast berekend?

We berekenen relatieve luminantie vanuit sRGB met de WCAG-formule, en leiden vervolgens de contrastverhouding af (L1 + 0.05) / (L2 + 0.05). Het resultaat wordt vergeleken met gangbare drempels zoals 4.5:1 (AA normale tekst) en 7:1 (AAA normale tekst).

Zijn Pantone-namen exact?

Nee. Elk Pantone-achtig label is een benaderende dichtstbijzijnde match in RGB-ruimte en wordt alleen ter richtlijn verstrekt. Voor productiekritisch werk moet u altijd valideren met officiële Pantone-bibliotheken en tools.

Bewaart u mijn afbeeldingen of kleuren?

Kleurberekeningen (formaten, contrast, harmonieën) worden client-side uitgevoerd. Afhankelijk van configuratie kunnen afbeeldinguploads en Pantone-datasets een server betrekken, maar de tool is ontworpen voor tijdelijke verwerking, niet voor langdurige opslag. Voor zeer vertrouwelijke middelen verdienen lokale/offline tools de voorkeur.

Pro Tips

Best Practice

Bekijk kleuren altijd op zowel lichte als donkere oppervlakken; waargenomen verzadiging en contrast kunnen drastisch veranderen met de context.

Best Practice

Gebruik LAB of LCH bij het genereren van tinten en schaduwen zodat helderheidsveranderingen uniformer aanvoelen voor menselijke ogen.

Best Practice

Controleer AA/AAA-contrast voor alle interactieve staten (hover, actief, uitgeschakeld), niet alleen de standaard knopkleur.

Best Practice

Exporteer CSS-variabelen of design tokens vanuit het tabblad formaten om kleuren consistent te houden in je componenten.

Best Practice

Neem bij het bemonsteren van afbeeldingen een gemiddelde over een klein gebied in plaats van een enkele pixel om ruis door compressie en anti-aliasing te verminderen.