Color Converter — HEX, RGB, HSL & CMYK
Type any color in any format and see all the others. Sliders, color schemes, a WCAG 2.1-correct contrast checker, and color-blindness simulation. Accepts modern CSS syntax including rgb(R G B / A), hsl(H S% L%), and 4-/8-digit hex.
Normal text 16px / Large text 24px bold
What you'll use this for
Color tooling sounds simple but every UI project ends up needing a few of these.
Design tokens
Convert a designer's HEX into HSL or RGB tokens for your CSS variables and Tailwind config.
Accessibility audits
WCAG 2.1 AA / AAA contrast badges with the correct formula. Spot the colour pair that's borderline or outright failing.
Palette planning
Pick a base, see complementary / analogous / triadic / split-complementary / tetradic / monochromatic options derived correctly from HSL math.
Inclusive design
Approximate how your UI renders for users with protanopia, deuteranopia, or tritanopia. Catch problems before users do.
Print prep
Quick CMYK preview for screen-to-print concepts. (Use a real ICC profile in production.)
CSS Color Module 4
Try modern syntax: 8-digit hex (#RRGGBBAA), rgb(R G B / A), hsl(H S% L%) — all parsed correctly.
How to use the converter
Type any color, get every format.
Enter a color
Type any value in the Any color field — #3b82f6, rgb(59, 130, 246), hsl(217 91% 60%), or just the name cornflowerblue. The native picker also works.
Read all formats
The format chips update live with HEX, RGB, RGBA, HSL, HSV, and CMYK. Click the copy button to grab any one.
Generate a scheme
Pick a scheme type — complementary, analogous, triadic, tetradic, split-complementary, or monochromatic — and grab the swatches.
Check accessibility
Set foreground and background colors. The contrast ratio and AA / AAA badges update live, with both normal-text and large-text thresholds shown.
Frequently asked questions
Everything worth knowing about color spaces.
RGB is additive — used for screens. Black is no light; white is full light from all three channels. Standard 8-bit RGB has 256 levels per channel.
CMYK is subtractive — used for ink on paper. Cyan, magenta, yellow inks each absorb a portion of the visible spectrum; black ink is added because mixing C+M+Y inks doesn't give pure black on real paper. Pre-press conversions use ICC profiles to handle ink limits, dot gain, and substrate. The naive math conversion this tool ships is fine for screen previews and rough estimates — never for press-ready output.
The WCAG 2.1 formula is:
ratio = (L_lighter + 0.05) / (L_darker + 0.05)where L is the relative luminance — the sRGB-gamma-decoded weighted sum: 0.2126·R + 0.7152·G + 0.0722·B. Pure black on white is 21:1.
The thresholds:
- AA — 4.5:1 for normal text (16 px), 3:1 for large text (≥ 18 pt or 14 pt bold)
- AAA — 7:1 for normal text, 4.5:1 for large text
- Non-text UI — 3:1 for icons, form-control borders, focus rings
WCAG 3 (still draft as of 2026) replaces this with APCA — better-correlated to perceived contrast but not yet mandated.
Yes — Color Module 4 syntax is parsed correctly:
- 4- and 8-digit hex with alpha:
#3b82f6cc - Whitespace-separated
rgb(59 130 246) - Slash-separated alpha:
rgb(59 130 246 / 80%) hsl(217 91% 60%)with or withoutdeg/rad/turn/gradhue units- Percentage RGB channels:
rgb(23% 51% 96%) - CSS named colors (140+ from CSS Color Module 4)
The OLD version only accepted comma-separated integer RGB and 3- or 6-digit hex.
By rotating the hue in HSL while preserving saturation and lightness:
- Complementary — base + (h ± 180°)
- Analogous — base ± 30°
- Triadic — base + 120° + 240°
- Tetradic — base + 90° + 180° + 270°
- Split-complementary — base + 150° + 210°
- Monochromatic — same hue, lightness stepped by ±15%
HSL hue rotation is an excellent first-pass for harmonies but ignores perceived brightness differences across hues. For perceptually uniform palettes, look at OKLCH-based tools.
It uses the standard Brettel/Viénot/Mollon LMS-based matrices for the three classical dichromacies — protanopia, deuteranopia, tritanopia. Same matrices used by Coblis and most other simulators. Anomalous trichromacies (the more common forms) lie between normal vision and the simulated dichromat result.
Useful as a sanity check; never a substitute for testing with users who actually have the condition.
No. Color math is ~150 lines of inline JavaScript — no external libraries, no API calls. Everything runs locally.
About color spaces
A "color space" is a way of describing colors with numbers. Different spaces favor different operations.
RGB
Three values for the intensity of red, green, and blue light. The native model for computer displays. sRGB is the most common encoding; numbers are gamma-encoded so equal steps look perceptually balanced.
HSL / HSV
Reorganize RGB into hue, saturation, and lightness (HSL) or value (HSV). Useful for design intuition: "the same color but darker" is just an L change. HSV is favored in image editors; HSL is what CSS uses.
CMYK
The model for ink-based reproduction. Cyan + magenta + yellow + black. Pure RGB cannot be reproduced perfectly in CMYK — and vice versa. Real prepress uses ICC profiles to map between them with substrate and ink-limit awareness.
OKLCH (mentioned for context)
A perceptually uniform space gaining traction in 2024–2026. Equal numerical steps look like equal perceptual steps. CSS Color Module 4 supports it as oklch(L C h). This converter doesn't expose OKLCH yet — for now, use oklch.com for tuning perceptual palettes.
Why "naive" CMYK?
The math K = 1 − max(R, G, B) and the rest is the textbook conversion. It produces visually plausible CMYK for screen previews and educational use. It does not account for:
- Specific ink chemistries (CMYK is hardware-dependent in print)
- Total ink coverage limits (typically 280–320%)
- Black generation strategies (UCR, GCR, max-K)
- Substrate (paper) tint and absorption
For real print work, send your RGB original to a designer with Photoshop or a RIP that owns the right ICC profile.