Kleurconverter

Ondersteunt conversie van kleurformaten tussen HEX, RGB, HSL en CMYK, met real-time voorbeeld en kleurkiezer. Automatische gesynchroniseerde conversie, geschikt voor design handoff, CSS-styling en unificatie van stijlgidsen.

Gebruiksinstructies

🚀 Snelstart

Kiezen of invoeren: voer een ondersteund formaat in (#1E90FF, rgb(30,144,255), hsl(210,100%,56%)) of gebruik de color picker.
Automatische conversie: bij invoer in één formaat worden alle andere formaten direct bijgewerkt.
Kopiëren: gebruik de kopieerknop naast elk formaat om een genormaliseerde string te krijgen.

📌 Veelvoorkomende scenario's

Design‑handover: HEX-waarden uit ontwerptools omzetten naar CSS‑RGB/HSL voor ontwikkeling.
Stijlgids: kleurformaten en notatiestijl in een componentbibliotheek uniformeren.
Printreferentie: schermkleur naar CMYK omzetten als eerste inschatting (proeven blijven noodzakelijk).
Toegankelijkheid: de preview gebruiken om snel een gevoel voor contrast te krijgen (voor exacte ratio's een gespecialiseerde tool gebruiken).

🎛️ Conversieparameters & weergave

Invoerregels: HEX ondersteunt alleen 6 cijfers (geen alpha); RGB 0–255; H 0–360; S/L 0–100; CMYK 0–100. Invoer is hoofdletterongevoelig.
Preview: op desktop is er een live preview aan de rechterkant; op mobiel wordt een lichtere modus zonder preview gebruikt.
Color picker: klik op het paleticoon rechtsboven in elke kaart om de color picker te openen.
HEX-hoofdletterbeleid: uitvoer wordt genormaliseerd naar hoofdletters (bijv. #1E90FF); invoer is hoofdletterongevoelig; er is geen aparte case‑schakelaar.
Fijnafstemming: sleep kanaalletters naar links/rechts (Shift×10, Alt÷0,1).
Kopieerbeleid: de kopieerknop geeft genormaliseerde strings (HEX in hoofdletters).

🧭 Gebruiksadvies

Precisie: kleurbeheer verschilt per apparaat; pipetwaarden kunnen per app iets variëren.
Alpha: huidige formaten omvatten geen alpha; gebruik rgba()/hsla() of beheer alpha afzonderlijk.
Kleurruimte: het web gebruikt standaard sRGB; bij P3/Display‑P3-workflows altijd verifiëren op het doelsysteem.
Teamconsistentie: spreek één voorkeursformaat in CSS af (bijv. overal HSL gebruiken).

⚠️ Beperkingen & compatibiliteit

Apparaatverschillen: monitoren/browsers/OS gaan verschillend om met kleurbeheer; de visuele indruk kan afwijken.
CMYK is benaderend: de waarden zijn slechts een indicatie; serieuze drukwerktrajecten vereisen ICC-profielen en proefdruk.
Geen alpha: transparantie wordt niet verwerkt door deze tool.

🔒 Privacy & veiligheid

Alle verwerking gebeurt in uw browser; gegevens verlaten uw apparaat niet.

❓ Veelgestelde vragen

Wordt #RGB‑verkorting ondersteund?

Op dit moment niet; gebruik een 6‑cijferige HEX‑waarde (#RRGGBB).

Welke bereiken gebruikt RGB en HSL?

RGB: 0–255 (geheel); H: 0–360; S/L: 0–100%.

Waarom wijkt CMYK af van het uiteindelijke drukresultaat?

CMYK is afhankelijk van papier, inkt, apparaat en ICC‑instellingen; hier getoonde waarden zijn een benadering, proefdruk blijft nodig.

Wordt alpha (rgba()/hsla()) ondersteund?

Nog niet; gebruik rgba()/hsla() of beheer alpha als aparte waarde.

Waarom wijkt de preview of gemeten waarde af van designapps/browsers?

Door verschillen in kleurbeheer, rendering en schermkalibratie. Deze tool rekent in sRGB; zie de resultaten als referentie.

Ondersteunt de tool wide-gamut (P3/Display‑P3)?

De berekening is sRGB‑gebaseerd; voor P3-workflows altijd valideren op het doelapparaat met de juiste ICC‑profielen.

Kan ik CMYK terug naar HEX/RGB omzetten?

Ja, maar CMYK→schermkleur is slechts een benadering; professionele drukwerkconversie vraagt om ICC-profielen en proefdruk.