logo
GeekFormat

Kleuromzetter

最接近的 CSS 颜色名: mediumseagreen

RGB

R
G
B
A

HSL

H
S
L

HSV

H
S
V
HEX#22c55e
RGBrgb(34, 197, 94)
RGBArgba(34, 197, 94, 1)
HSLhsl(142, 71%, 45%)
HSLAhsla(142, 71%, 45%, 1)
HSVhsv(142, 83%, 77%)
HWBhwb(142, 13%, 23%)
CMYKcmyk(83%, 0%, 52%, 23%)
XYZxyz(22.64, 41.08, 17.32)
LABlab(70, -62, 40)
LCHlch(70, 74, 147)
OKLABoklab(1, 0, 0)
OKLCHoklch(1, 0, 180)

WCAG 对比度检查

白字
2.28:1
AA ✗AAA ✗
黑字
9.22:1
AA ✓AAA ✓

Online kleuromzetter die conversie met één klik ondersteunt tussen 14 kleurenformaten waaronder HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ, LAB, LCH, OKLAB en OKLCH. Beschikt over een ingebouwde kleurenkiezer voor real-time aanpassingen, WCAG-contrastcontrole, kleurharmonieschema's, schaduwwergeneratie, batchconversie en extractie van kleuren uit afbeeldingen. Alle berekeningen worden volledig lokaal in je browser uitgevoerd — geen bestand uploads nodig, perfect voor ontwerpers en frontend-ontwikkelaars.

Gerelateerde aanbevelingen

Kleurenblindheid Simulator

Afbeeldingsfilters

CSS Formatter

Eenheden Converter

Valuta Converter

Afbeelding converteren

Toepassingsgevallen

  • Omzetten van HEX-waarden uit ontwerp-mockups naar RGB/HSL voor CSS-stijlen in frontend-ontwikkeling, of naar RGBA wanneer transparantie nodig is
  • Uniformeren van kleurwaardeformaten bij het wisselen tussen ontwerptools zoals Figma, Sketch en Photoshop voor UI/UX-ontwerpers
  • Omzetten van scherm-RGB-waarden naar CMYK als referentie tijdens vroege drukproductiecommunicatie
  • Controleren van contrastverhoudingen tussen tekst- en achtergrondkleuren voor WCAG AA/AAA-naleving in toegankelijk ontwerp
  • Snel genereren van een complete tint-tot-schaduw familie voor het bouwen van designsystemen met behulp van de schaduwgenerator
  • Genereren van professionele kleurenschema's (complementair, analoog, etc.) voor branding of afficheontwerp met behulp van kleurharmonie
  • Extraheren van dominante kleuren uit referentieafbeeldingen of foto's voor inspiratie (afbeelding kleurenkiezer)
  • Batchverwerking van meerdere kleurwaarden uit ontwerp-mockups en direct omzetten naar benodigde formaten
  • Handig aanpassen van helderheid en verzadiging met HSL of OKLCH bij het schrijven van CSS-statussen zoals hover
  • Bouwen van perceptueel uniforme designsysteem-kleuren met behulp van de moderne CSS OKLCH-kleurruimte
  • Onderwijzen van kleurruimteprincipes met interactieve visuele vergelijking van hoe verschillende formaten dezelfde kleur weergeven
  • Snel vinden van de Engelse CSS-kleurnaam voor elke waarde voor gemakkelijke referentie en communicatie

Functies

  • 14 kleurenformaatconversies: ondersteuning voor HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ, LAB, LCH, OKLAB, OKLCH en CSS-benoemd kleuren
  • Slimme invoerherkenning: plak elk kleurenformaat en het wordt automatisch gedetecteerd; ondersteunt verkorte notatie #rgb, #rrggbbaa met alfa, rgb(), hsl() en CSS-kleurnamen
  • Real-time schuifregelaaraanpassingen: RGB rood/groen/blauw, HSL tint/verzadiging/lichtheid, HSV-schuifregelaars voor directe WYSIWYG-kleuraanpassing
  • Ondersteuning voor alfatransparantie: RGBA- en HSLA-conversie met alfakanaal, ondersteunt zowel percentage als decimale dekkingsformaten
  • CSS-kleurnaamkoppeling: vindt automatisch de dichtstbijzijnde standaard CSS-benoemde kleur (meer dan 140 opties) voor snelle referentie
  • WCAG-contrastcontrole: real-time berekening van contrastverhoudingen ten opzichte van witte en zwarte tekst, met automatische goed/afgekeur indicatoren voor AA (≥4,5:1) en AAA (≥7:1)
  • Kleurharmoniegenerator: generatie met één klik van 5 klassieke schema's — complementair, analoog, triadisch, split-complementair en tetradisch
  • Schaduwwergeneratie: zowel traditionele RGB-gemengde schaduwen als perceptueel uniforme OKLCH-schaduwen beschikbaar, genereert direct 11 lichtheidsstappen
  • Batchconversie: verwerk meerdere kleurwaarden tegelijk met meerregelige invoer — ideaal voor het verwerken van designsysteem-kleurenpaletten
  • Afbeelding kleurenkiezer: upload een afbeelding om automatisch 16 dominante kleuren te bemonsteren en te extraheren, ideaal voor het ophalen van paletten uit referenties of foto's
  • Kopiëren met één klik: kopieerknop naast elk kleurenformaat voor direct kopiëren in standaardnotatie — klaar om direct in CSS of ontwerpsoftware te plakken
  • Willekeurige kleurengenerator: genereer willekeurige kleuren met één klik voor snelle inspiratie
  • Pure browsergebaseerde verwerking: alle kleurberekeningen worden lokaal in je browser uitgevoerd zonder server uploads — werkt direct zonder registratie
  • Responsief ontwerp: werkt naadloos op desktop, mobiel en tablet — pas kleuren aan en kopieer waarden comfortabel op telefoon

Hoe te gebruiken

  1. Voer een willekeurige kleurenformaatwaarde in het bovenste invoervak in, klik op het kleurstaal om de kiezer te gebruiken, of sleep de RGB/HSL/HSV-schuifregelaars om aan te passen
  2. Het hulpmiddel zet automatisch real-time om naar alle 14 formaten waaronder HEX, RGB, RGBA, HSL, HSV, CMYK, OKLCH
  3. Schakel over naar 'Kleurharmonie' voor schema's, 'Schaduwen' voor tint/schaduwhellingen, of 'Batch/Kiezer' voor batchconversie of extractie van kleuren uit afbeeldingen
  4. Klik op de kopieerknop naast een kleurenformaat om de standaardnotatie direct te kopiëren voor gebruik

Veelgestelde vragen

Welke kleurenformaten ondersteunt de kleuromzetter?

Het ondersteunt conversie tussen 14 veelvoorkomende kleurenformaten: HEX (3-cijferige verkorte notatie en 8-cijferig met alfa), RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ (CIE 1931 met D65-verlichtingsbron), CIE LAB, LCH, OKLAB, OKLCH, plus meer dan 140 standaard CSS-benoemde kleuren. Voer elk formaat in om automatisch naar alle andere om te zetten.

Hoe gebruik ik dit kleurenomzettingshulpmiddel?

Het is heel eenvoudig: 1) Voer een willekeurige kleurwaarde in het bovenste invoervak in — bijvoorbeeld #22c55e, rgb(34,197,94), hsl(142,71%,45%), of zelfs een kleurnaam zoals groen; 2) Of klik op het kleurstaal om de kiezer te gebruiken, of sleep de RGB/HSL/HSV-schuifregelaars voor real-time aanpassing; 3) Alle 14 formaatomzettingen verschijnen direct onder — klik op de kopieerknop naast een formaat om het naar het klembord te kopiëren.

Wat is het verschil tussen HEX, RGB en HSL? Waar worden ze elk gebruikt?

HEX is de meest gebruikte hexadecimale notatie voor het web — #ff0000 voor rood — veel gebruikt in CSS en ontwerp-overdrachtsbestanden. RGB vertegenwoordigt kleuren met waarden van 0-255 voor rood, groen en blauw, de basis van beeldschermen. HSL gebruikt Tint (0-360°), Verzadiging en Lichtheid, die beter aansluit bij de menselijke kleurperceptie en intuïtiever is voor ontwerpers bij het aanpassen van kleuren. CMYK gebruikt percentages van cyaan, magenta, geel en zwarte inkt voor drukwerk. OKLCH is een moderne perceptueel uniforme kleurruimte die visueel vloeiende verlopen en schaduwhellingen produceert.

Wat is de WCAG-contrastverhouding? Welke verhouding voldoet aan de toegankelijkheidsnormen?

De WCAG-contrastverhouding meet het luminantieverschil tussen tekstkleur en achtergrondkleur, waardoor wordt gegarandeerd dat inhoud leesbaar is voor gebruikers met visuele beperkingen. Volgens de Web Content Accessibility Guidelines: normale lichaamstekst heeft ≥4,5:1 nodig voor Niveau AA (geslaagd) en ≥7:1 voor Niveau AAA (uitstekend); grote tekst (≥18pt vet of ≥24pt normaal) heeft ≥3:1 nodig voor AA. Het hulpmiddel toont real-time contrastverhoudingen ten opzichte van witte en zwarte tekst, met automatische goed/afgekeur indicatoren voor de AA- en AAA-normen.

Wat betekent de A in RGBA? Hoe stel ik transparantie in?

De A in RGBA staat voor Alfakanaal, dat transparantie regelt — waarden lopen van 0 (volledig transparant) tot 1 (volledig dekkend). Bijvoorbeeld rgba(34,197,94,0.5) is semitransparant groen. Pas transparantie aan met de Alfa-schuifregelaar; omzettingsresultaten tonen zowel RGBA- als HSLA-formaten met alfa. HEX ondersteunt ook transparantie door twee hexadecimale cijfers toe te voegen na de 6-cijferige kleur — bijvoorbeeld #22c55e80 staat voor 50% dekking.

Wat zijn OKLCH en LCH? Hoe verschillen ze van HSL?

LCH en OKLCH zijn perceptueel uniforme kleurruimten waarin L Lichtheid is, C Chroma (verzadiging) en H Tint. Hun grootste voordeel ten opzichte van HSL is: kleuren met dezelfde L-waarde lijken visueel even helder, wat cruciaal is voor designsystemen — als je paletten genereert met verschillende tinten maar dezelfde lichtheid met HSL, lijken sommige donkerder dan andere, maar OKLCH garandeert uniforme waargenomen lichtheid. OKLCH is nieuwer dan LAB/LCH met eenvoudigere berekeningen en nauwkeurigere kleurvoorspelling, aanbevolen in moderne CSS (CSS Color Level 4).

Hoe gebruik ik de afbeelding kleurenkiezer-functie?

Schakel over naar het tabblad 'Batch/Kiezer', klik op uploaden om een afbeelding te selecteren — het hulpmiddel schaalt afbeeldingen automatisch naar een 100×100 raster en extraheert 16 kleuren van gelijkmatig verdeelde posities, met kleurstalen en kleurwaarden. Klik op een staal om die kleur als je hoofdkleur in te stellen voor verdere aanpassing en omzetting. Perfect voor het snel extraheren van paletten uit referentieafbeeldingen, ontwerp-mockups of foto's.

Welke kleurharmonieschema's zijn beschikbaar en hoe gebruik ik ze?

Het hulpmiddel biedt 5 klassieke harmonie schema's: 1) Complementair: kleuren 180° uit elkaar voor hoog contrast; 2) Analoog: kleuren 30° uit elkaar voor natuurlijke harmonie; 3) Triadisch: kleuren 120° uit elkaar voor levendige balans; 4) Split-complementair: basiskleur + 30° aan weerszijden van complementair voor contrast met zachtheid; 5) Tetradisch (rechthoek): vier kleuren 90° uit elkaar voor rijke variëteit. Schakel over naar het tabblad 'Kleurharmonie' om gegenereerde schema's te bekijken — klik op een staal om het als je hoofdkleur in te stellen.

Kunnen CMYK-omzettingsresultaten direct voor drukwerk worden gebruikt?

Ze werken goed als referentie, maar let op: schermen gebruiken additieve RGB-kleur (lichtemissie), terwijl drukwerk subtractieve CMYK gebruikt (inktreflectie). Deze hebben verschillende kleuromvangen — sommige heldere RGB-kleuren (zoals levendige groenen en blauwen) kunnen niet nauwkeurig worden gereproduceerd met CMYK-inkten, waardoor er enige kleurverschuiving optreedt. Het hulpmiddel gebruikt standaard RGB-naar-CMYK omzettingsformules, geschikt voor vroege communicatie en snelle referentie. Voor uiteindelijke drukproductie raden we aan professionele ontwerpsoftware te gebruiken met de juiste ICC-kleurprofielen voor soft proofing.

Hoe werkt batchconversie? Hoeveel kleuren kan ik tegelijk omzetten?

Schakel over naar het tabblad 'Batch/Kiezer', voer één kleur per regel in het tekstvak in (willekeurig mengen van HEX/RGB/HSL/CSS-kleurnamen), klik vervolgens op batchconversie om alle kleuren tegelijk te verwerken. Resultaten tonen kleurstalen en HEX-waarden voor elke kleur. Er is geen theoretische limiet, maar voor honderden kleuren raden we aan om in batches te verwerken om browservertraging te voorkomen.

Kan ik de kleuromzetter op mobiel gebruiken?

Ja. Het hulpmiddel gebruikt responsief ontwerp en werkt perfect op mobiele, tablet- en desktopschermen van alle formaten. Op mobiel kun je nog steeds kleurwaarden invoeren, schuifregelaars slepen om kleuren aan te passen, omzettingen bekijken en waarden kopiëren — alle functies komen overeen met de desktopervaring. En omdat het pure lokale berekening is, verbruikt het geen mobiele data.

Wat als de invoer 'niet-herkend kleurenformaat' aangeeft?

Controleer het invoerformaat: 1) HEX moet beginnen met # (optioneel) gevolgd door 3, 6 of 8 hexadecimale tekens (0-9/a-f) — #f00, #ff0000, #ff0000ff zijn allemaal geldig; 2) RGB-formaat moet rgb(r,g,b) zijn met drie waarden van 0-255 gescheiden door komma's; 3) HSL-formaat is hsl(h,s%,l%) met tint 0-360°, verzadiging en lichtheid 0-100%; 4) CSS-kleurnamen moeten standaardnamen zijn zoals rood/blauw/groen — Chinese kleurnamen worden niet ondersteund.

Waarom zien omgezette kleuren er anders uit in verschillende software?

Dit is normaal kleurbeheergedrag: verschillende software, monitoren en besturingssystemen kunnen verschillende kleurprofielen gebruiken (sRGB, Display P3, Adobe RGB), waardoor lichte visuele verschillen ontstaan voor dezelfde kleurwaarde. Webpagina's gebruiken standaard de sRGB-kleurruimte — als je Adobe RGB- of Display P3-profielen gebruikt in software zoals Photoshop, moet je bij exporteren naar sRGB omzetten voor consistente weergave op het web.

Welk kleurenformaat moet ik gebruiken bij frontend-ontwikkeling?

Moderne CSS ondersteunt alle kleurenformaten: HEX is het meest gebruikelijk met de beste compatibiliteit en is de standaard voor ontwerp-overdrachten; RGB/RGBA werkt goed wanneer je dynamische dekkingsaanpassingen of kanaalniveau-manipulatie nodig hebt; HSL is het meest intuïtief voor het direct schrijven van kleurvarianten in code (zoals het lichter maken van een hover-status door simpelweg L te verhogen); OKLCH is de toekomst, native ondersteund in CSS Color Level 4, met perceptuele uniformiteit perfect voor het genereren van schaduwen en verlopen — kies op basis van de compatibiliteitsbehoeften van je project.

Waar is de schaduwwergeneratie-functie voor? Wat is het verschil tussen traditionele en OKLCH-schaduwen?

Schaduwwergeneratie creëert direct 11 stappen (50-900) van tinten en schaduwen voor een kleurenfamilie, ideaal voor het bouwen van designsysteem-paletten (zoals het kleurensysteem van Tailwind). Traditionele schaduwen mengen simpelweg naar wit in de RGB-ruimte — hoewel numeriek uniform, kunnen de middentonen er ongelijk uitzien. OKLCH-schaduwen behouden tint en chroma terwijl alleen de lichtheid L wordt aangepast, waardoor visueel vloeiende overgangen tussen licht en donker ontstaan — professioneler en verzorgder.

Over kleurruimten en kleurenformaatconversie

Kleuromzetters behoren tot de meest gebruikte hulpmiddelen voor ontwerpers en frontend-ontwikkelaars en bieden nauwkeurige omzetting tussen verschillende kleurweergaven. Kleur zelf is een visuele waarneming; om het op computers en in drukwerk weer te geven, hebben mensen meerdere kleurmodellen (kleurruimten) ontwikkeld die dezelfde kleur beschrijven met verschillende numerieke systemen, elk geschikt voor verschillende scenario's en apparaten.

Veelvoorkomende kleurenformaten zijn onder andere: HEX (hexadecimaal RGB, de standaard webnotatie), RGB (Rood/Groen/Blauw waarden 0-255, de basis van beeldschermen), HSL (Tint/Verzadiging/Lichtheid, het meest intuïtief voor menselijke kleuraanpassing), CMYK (Cyaan/Magenta/Geel/Zwart percentages voor drukwerk). In recente jaren zijn perceptueel uniforme kleurruimten zoals OKLCH in populariteit gegroeid omdat ze wiskundig garanderen dat kleuren met dezelfde lichtheidswaarde visueel even helder lijken — cruciaal voor het bouwen van designsystemen en het genereren van verlopen.

Waarom omzetten tussen kleurenformaten? Verschillende tools, platforms en uitvoermedia gebruiken verschillende kleurenformaten: web-CSS ondersteunt HEX/RGB/HSL/OKLCH en meer; ontwerpsoftware zoals Figma/Sketch gebruikt standaard HEX; drukwerk vereist CMYK; en bij het dynamisch aanpassen van kleuren in code (zoals hover-statussen of dekkingswijzigingen) zijn HSL en OKLCH veel handiger dan HEX. Nauwkeurige kleuromzetting zorgt voor kleurconsistentie tussen ontwerp-mockups en uiteindelijke implementatie.

WCAG-contrast is een belangrijke standaard voor webtoegankelijkheid, die het luminantieverschil meet tussen voorgrondtekst en achtergrondkleuren om leesbaarheid te garanderen voor gebruikers met visuele beperkingen. Normale lichaamstekst heeft een contrastverhouding van 4,5:1 nodig (niveau AA), waarbij belangrijke inhoud wordt aanbevolen op 7:1 (niveau AAA). Ons hulpmiddel berekent dit in real-time, waardoor ontwerpers al tijdens het kiezen van kleuren rekening houden met toegankelijkheid in plaats van achteraf te corrigeren.

Kleurharmonie is een klassieke kleurtheorie gebaseerd op de kleurencirkel, die visueel samenhangende combinaties genereert met behulp van geometrische posities van tinten rond de cirkel. Complementaire kleuren creëren sterk contrast ideaal voor knoppen en accenten; analoge kleuren zijn harmonieus en natuurlijk voor grote achtergrondgebieden; triadische en tetradische schema's bieden balans en rijkdom voor merkidentiteit. Het hulpmiddel bevat 5 van de meest gebruikte harmonieschema's en genereert paletten met één klik.

Kleur schaduwen/tinten zijn licht-naar-donker variaties van dezelfde tint, de basis voor het bouwen van designsystemen (zoals de 50-900 paletten van Tailwind CSS). Traditionele RGB-schaduwen mengen simpelweg naar wit, maar zien er visueel ongelijk uit; OKLCH-gebaseerde schaduwen behouden tint en chroma terwijl alleen de lichtheid wordt aangepast, waardoor visueel vloeiende licht-naar-donker overgangen ontstaan — de aanbevolen aanpak voor moderne designsystemen. Ons hulpmiddel biedt beide schaduwstijlen ter vergelijking.

Waarom is lokale verwerking belangrijk? Kleurenomzetting is puur wiskundig en vereist absoluut geen gegevensupload naar servers. Alle berekeningen in ons hulpmiddel worden volledig lokaal in je browser uitgevoerd — open de pagina en gebruik hem direct zonder registratie of inlog, geen afbeeldings- of kleurgegevens worden geüpload. Het is snel en privacy-vriendelijk — je kunt het met vertrouwen gebruiken zelfs voor niet-openbare, vertrouwelijke ontwerp-mockup kleuren.

Belangrijke opmerking: kleurenformaatconversie is wiskundig nauwkeurig, maar vanwege schermkleuromvangen, monitorkalibratie en drukprocessen kan dezelfde kleurwaarde enigszins verschillend lijken op apparaten en media. Schermen gebruiken additief RGB (meer licht = helderder), terwijl drukwerk subtractief CMYK gebruikt (meer inkt = donkerder). De twee hebben verschillende kleuromvangen — sommige sterk verzadigde RGB-kleuren kunnen niet nauwkeurig worden gereproduceerd met CMYK-inkten. Omzettingsresultaten zijn ideaal voor digitaal ontwerp en webontwikkeling; voor uiteindelijke drukproductie raden we professionele kleurbeheersoftware aan voor proofing.

术语表

HEX
Hexadecimale kleurnotatie met # gevolgd door 6 hexadecimale cijfers die RGB voorstellen (twee cijfers per kanaal, 00-FF) — #FF0000 voor rood, het meest gebruikte formaat voor web en ontwerpsoftware. Ondersteunt 3-cijferige verkorte notatie (bijv. #f00) en 8-cijferige notatie met alfa.
RGB/RGBA
Vertegenwoordigt kleur met drie waarden van 0-255 voor Rood, Groen en Blauw; rgba() voegt een Alfakanaal toe voor transparantie (0-1). Het fundamentele kleurenmodel voor beeldschermen.
HSL/HSLA
Vertegenwoordigt kleur met Tint (0-360°), Verzadiging (0-100%) en Lichtheid (0-100%), die beter aansluit bij de menselijke kleurperceptie — intuïtiever voor ontwerpers bij het aanpassen van kleuren.
HSV/HSB
Tint, Verzadiging, Waarde/Helderheid — vergelijkbaar met HSL maar met andere lichtheidsberekening, vaak te vinden in kleurenkiezers in ontwerpsoftware zoals Photoshop.
HWB
Tint, Witheid, Zwartheid — een toevoeging uit CSS Color Level 4 die intuïtiever is dan HSL: voeg simpelweg wit of zwart toe om de toon aan te passen.
CMYK
Percentages van Cyaan, Magenta, Geel en Zwarte (Key) inkten, gebruikt in de drukindustrie om inktmengverhoudingen weer te geven.
CIE LAB/LAB
Een perceptueel uniforme kleurruimte gedefinieerd door de Internationale Commissie voor Verlichtingskunde (CIE): L voor Lichtheid (0-100), a voor de groen-rode as, b voor de blauw-gele as — ontworpen zodat numerieke afstanden overeenkomen met waargenomen kleurverschillen.
LCH
Een poolcoördinatenweergave omgezet vanuit LAB: L Lichtheid, C Chroma (verzadiging), H Tint — perceptueel uniformer dan HSL, geschikt voor professioneel ontwerp dat nauwkeurige perceptuele controle vereist.
OKLAB/OKLCH
Een nieuwe generatie perceptueel uniforme kleurruimten geïntroduceerd in 2020 — eenvoudigere berekeningen en nauwkeurigere tintvoorspelling dan LAB/LCH. OKLCH is de poolvorm, native ondersteund in moderne CSS en aanbevolen voor het bouwen van designsystemen.
WCAG-contrast
De luminantieverhouding tussen voorgrondtekst en achtergrond zoals gespecificeerd door de Web Content Accessibility Guidelines: AA vereist ≥4,5:1 voor lichaamstekst, AAA vereist ≥7:1 — waarborgt leesbaarheid voor gebruikers met visuele beperkingen.
Kleurharmonie
Kleurtheorie gebaseerd op posities rond de kleurencirkel, met gebruik van geometrische relaties (complementair 180°, analoog 30° afstand, triadisch 120° afstand, etc.) om visueel samenhangende en esthetisch aangename combinaties te genereren.
Schaduwen/Tinten
Een bereik van licht-naar-donker variaties van dezelfde tint, meestal gegenereerd als 11 stappen van 50 tot 900, gebruikt in designsystemen voor verschillende toepassingen van een enkele kleur (achtergronden, randen, tekst, accenten).

Snelle referentie vergelijking van 14 kleurenformaten

Hieronder staan de waardebereiken, zuiver rood voorbeelden en primaire gebruiksscenario's voor elk kleurenformaat:

FormaatWaardebereikZuiver rood voorbeeldPrimaire gebruiksscenario's
HEX#RRGGBB 00-FF#ff0000Web-CSS, ontwerp-overdracht — het meest universele formaat
RGBR/G/B: 0-255rgb(255,0,0)Basis van schermweergave, Canvas/WebGL-programmering
RGBAPlus A: 0-1rgba(255,0,0,1)CSS dat transparantie vereist, overlay-effecten
HSLT:0-360°, V/L:0-100%hsl(0,100%,50%)Ontwerper kleuraanpassing, dynamische kleurmanipulatie in code
HSVT:0-360°, V/H:0-100%hsv(0,100%,100%)Kleurenkiezers in ontwerpsoftware zoals Photoshop
HWBT:0-360°, W/Z:0-100%hwb(0,0%,0%)CSS Color 4 — intuïtieve aanpassing door wit/zwart toe te voegen
CMYKC/M/G/Z: 0-100%cmyk(0%,100%,100%,0%)Druk- en uitgeverij-industrie
OKLCHL:0-1, C:0-0.4, T:0-360°oklch(0.63,0.24,29)Moderne CSS, designsysteem-kleurenpaletten, perceptueel uniforme verlopen

Referentie WCAG-toegankelijkheid contrastnormen

Minimale contrastvereisten uit de Web Content Accessibility Guidelines (WCAG 2.1):

NiveauContrastverhouding vereisteToepasselijk teksttypeOpmerkingen
AA≥ 4,5:1Normale lichaamstekst (<18pt normaal of <14pt vet)Minimale geslaagde standaard, wettelijke nalevingsvereiste
AA≥ 3:1Grote tekst (≥18pt normaal of ≥14pt vet)Grote koppen kunnen verminderde vereisten hebben
AAA≥ 7:1Normale lichaamstekst (verbeterd)Aanbevolen voor belangrijke inhoud, langdurig lezen
AAA≥ 4,5:1Grote tekst (verbeterd)Uitstekend toegankelijk ontwerp

Snelle referentie 5 kleurharmonieschema's

Klassieke kleurencombinaties gebaseerd op kleuren cirkelhoeken — klik om direct te genereren:

SchematypeTintafstandAantal kleurenVisueel effect en gebruiksscenario's
Complementair180° uit elkaar2 kleurenSterk contrast — ideaal voor knoppen, accenten, CTA's
Analoog±30° aangrenzend3 kleurenHarmonieus en natuurlijk — geweldig voor grote achtergronden, primaire paletten
Triadisch120° afstand3 kleurenLevendig en gebalanceerd — ideaal voor branding, illustratie
Split-complementairBasis + ±30° van complementair3 kleurenContrast met zachtheid — verfijnder dan complementair
Tetradisch90° afstand4 kleurenRijk en gevarieerd — ideaal voor complexe ontwerpen, kinderproducten

Privacy & Security

Deze kleuromzetter voert alle kleurberekeningen, afbeelding kleurenkiezen en batchverwerking volledig lokaal uit in je browser met pure JavaScript in het browsergeheugen. De kleurwaarden die je invoert en afbeeldingen die je uploadt, worden nooit via het netwerk naar een server verzonden, noch gelogd, gecachet of opgeslagen. Na verwerking wist het sluiten of vernieuwen van de pagina automatisch tijdelijke gegevens uit het browsergeheugen. Gevoelige inhoud zoals niet-openbare ontwerp-mockup kleuren en merkkleuren kunnen veilig worden gebruikt zonder risico op lekken.

Authoritative References

Troubleshooting

Wat als de invoer 'niet-herkend kleurenformaat' weergeeft?

Controleer: 1) HEX-formaat gebruikt geldige hexadecimale tekens (0-9, a-f, A-F) met 3, 6 of 8 cijfers; # is optioneel; 2) RGB/RGBA-formaat vereist drie of vier waarden tussen haakjes — R/G/B 0-255, Alfa 0-1, gescheiden door komma's; 3) HSL/HSLA-formaat vereist T 0-360, V en L als 0-100 percentagewaarden; 4) CSS-kleurnamen moeten standaard Engelse namen zijn — Chinese kleurnamen worden niet ondersteund.

Waarom ziet CMYK-conversie er anders uit dan daadwerkelijk drukwerk?

Dit is te verwachten: RGB en CMYK hebben verschillende kleuromvangen — veel heldere RGB-kleuren kunnen niet met CMYK-inkten worden gereproduceerd. Het hulpmiddel gebruikt standaard omzettingsformules geschikt voor vroege referentie. Voor professionele druk: 1) Converteer naar CMYK-modus in ontwerpsoftware; 2) Gebruik juiste ICC-kleurprofielen; 3) Voer een digitale proef uit.

Waarom ziet dezelfde kleur er anders uit op mijn telefoon vs. computer?

Verschillende schermen hebben verschillende kleuromvangdekking, kleurtemperatuur, helderheid en kalibratie: Mac gebruikt standaard het brede Display P3-kleuromvang, de meeste Windows-pc's gebruiken sRGB, en mobiele schermen variëren. Voor webontwerp wordt aanbevolen om te standaardiseren op sRGB als basis voor consistente weergave op de meeste apparaten.

Uploaden van afbeelding voor kleurenkiezer reageert niet?

Bevestig alstublieft: 1) Je uploadt een standaard afbeeldingsformaat (JPG/PNG/GIF/WebP); 2) Het afbeeldingsbestand is niet beschadigd; 3) Bestandsgrootte is niet te groot (aanbevolen onder 5 MB). Afbeelding kleurenkiezen verwerkt lokaal in canvas en wordt nooit naar servers geüpload — vernieuwen en opnieuw uploaden lost meestal problemen op.