Color Picker Pro
Geavanceerde kleurkiezer met ondersteuning voor meerdere formaten
Kleurformaten
Kleurharmonie
Color Picker Pro
Geavanceerde kleurkiezer met ondersteuning voor meerdere formaten
Functies
- Kies kleuren via tint/verzadiging/helderheid-schuifregelaars of plak een HEX-, RGB- of HSL-waarde om alle kanalen meteen te synchroniseren
- Output in zes formaten tegelijk: HEX, RGB, RGBA, HSL, HSLA en CMYK (drukklaar, geen profiel-inbedding)
- WCAG 2.1 contrastverhouding tegen elke test-tekstkleur, met AA (4.5:1) en AAA (7:1) pass/fail-badges via W3C relatieve luminantieformule
- Kleur-harmoniegenerator produceert complementaire, triadische, analoge en monochromatische varianten vanuit huidige tint
- Gecureerde paletten incl. Material Design, Tailwind CSS en een toegankelijkheid-gerichte hoog-contrast set
- Lokale kleur-geschiedenis met tot 20 recente keuzes in localStorage (op verzoek gewist, nooit gesynchroniseerd)
- Alfa-kanaal-ondersteuning voor RGBA- en HSLA-output klaar voor CSS custom properties
- Willekeurige voorbeeldkleuren en één-kliks kopiëren voor elke individuele format-string
Hoe te gebruiken
- Sleep tint-/verzadiging-/helderheid-schuifregelaars of plak een bekende HEX-waarde om de kiezer vanuit een vast startpunt te besturen.
- Pas alfa-schuifregelaar aan voor transparantie (overlay, glaseffect, design-token).
- Open Formats-paneel om HEX, RGB(A), HSL(A) en CMYK naast elkaar te zien en kopieer wat je stack verwacht.
- Activeer Toegankelijkheid-paneel en stel test-tekstkleur in om te verifiëren dat WCAG-contrast AA of AAA haalt.
- Open Kleur-harmonie voor complementaire, triadische of analoge metgezellen voor een evenwichtig palet.
- Voeg keuzes toe aan Geschiedenis tijdens experimenteren; klik elk staal om later in sessie terug te halen.
Tips en best practices
- Bekijk wijzigingen real-time tijdens het aanpassen van instellingen.
- Kopieer gegenereerde code direct in je CSS-stylesheet.
- Test je ontwerpen in licht- en donkermodus voor toegankelijkheid.
- Gebruik browser-dev-tools naast deze tool voor live testen.
- Sla favoriete configuraties op voor latere snelle toegang.
Veelgestelde vragen
Waarom toont dezelfde HEX andere RGB-waarden in andere tools?
Kleurwaarden kunnen in sRGB of display-P3 gespecificeerd worden, en browsers renderen verschillend afhankelijk van monitorkalibratie en ICC-profielen. Deze kiezer gebruikt sRGB (CSS Color Module Level 3 standaard) en rondt af op 8-bit kanalen (0–255). Voor wide-gamut design-tokens gebruik een P3-bewuste tool en converteer met color()-notatie van CSS Color Level 4.
Hoe wordt WCAG-contrastverhouding berekend?
De verhouding gebruikt W3C relatieve luminantieformule: elk sRGB-kanaal wordt gelineariseerd (sRGB-naar-lineair gamma), gewogen 0.2126R + 0.7152G + 0.0722B, dan worden lichtere en donkerdere luminanties gecombineerd als (L1 + 0.05) / (L2 + 0.05). AA slaagt bij 4.5:1 voor normale tekst en 3:1 voor grote tekst; AAA bij 7:1. De berekening loopt in je browser op het huidige voorgrond/achtergrond-paar.
Wordt er iets naar een server gestuurd bij het kiezen van een kleur?
Nee. Kleurconversies, palet-lookup, contrast-berekening en geschiedenis lopen allemaal client-side in JavaScript. Enige persistente opslag is localStorage voor geschiedenis, die op je apparaat blijft en het nooit verlaat. Je kunt de tool offline gebruiken zodra de pagina is gecachet.
Waarom matcht CMYK-output niet exact met mijn Pantone- of Adobe-waarden?
CMYK is apparaat-afhankelijk en vereist ICC-profiel voor nauwkeurigheid in print. Browser-tools kunnen geen CMYK-profiel inbedden, dus output hier is een naïeve sRGB-naar-CMYK-conversie, alleen nuttig als snelle referentie. Voor productiedruk genereer CMYK in Photoshop of Illustrator met je drukkerprofiel.
Hoe kiest de harmonie-generator zijn kleuren?
De generator roteert de huidige HSL-tint: complementair is +180 graden, triadisch voegt twee kleuren toe bij +120 en +240, analoog voegt buren toe bij +30 en +330, monochromatisch verschuift verzadiging en helderheid. Dit is een mechanische kleur-wiel-benadering: geeft startpunt maar houdt geen rekening met perceptuele uniformiteit die Oklch of Lab zou vereisen.
Kan ik deze waarden direct als CSS custom properties gebruiken?
Ja. HSL-output past direct in modern CSS als `--brand: hsl(217 100% 60%)` of met alfa als `hsla(217, 100%, 60%, 0.8)`. HSL wordt meestal verkozen voor design-tokens omdat helderheidsrampen triviaal worden — de derde waarde bumpen geeft direct hover- en active-states zonder RGB-herberekening.
Ondersteunt de kiezer display-P3 of wide-gamut output?
Momenteel niet. De kiezer veronderstelt sRGB en geeft 8-bit-per-kanaal HEX/RGB output. Als je P3 of Rec.2020 nodig hebt, gebruik dan een tool die CSS Color Level 4-syntax emit zoals `color(display-p3 0.4 0.5 0.9)`. We voegen dit mogelijk toe zodra browser-ondersteuning over alle targets stabiliseert.
Waarom is mijn opgeslagen kleurgeschiedenis verdwenen?
Geschiedenis blijft in localStorage gebonden aan dit domein. Browsergegevens wissen, privé/incognito-modus gebruiken of van browser wisselen reset het. Limiet is 20 inputs om quota-problemen te vermijden — oudere keuzes worden uitgezet als nieuwe worden toegevoegd.