Color Picker & Converter
Convert between HEX, RGB, HSL, HSV, and CMYK. Check WCAG AA/AAA contrast ratios. Simulate how colors appear with deuteranopia, protanopia, or tritanopia. All 100% in your browser.
Normal text — The quick brown fox jumps over the lazy dog.
Large text — 18pt+
How to use
- Picker & Convert: click the color swatch or type a HEX code — all five formats update instantly. Click any copy button to grab the value.
- Contrast / WCAG: pick a foreground (text) color and a background color. The contrast ratio and WCAG AA/AAA pass/fail badges update live. Use the preview to see how the pairing looks.
- Color Blindness: pick any color to see how it appears to people with deuteranopia (green-blind), protanopia (red-blind), or tritanopia (blue-blind).
Frequently asked questions
What is the difference between HEX and RGB?
HEX and RGB represent the same sRGB color space in different notations. A HEX code like #1a2b3c is shorthand for three byte values: red=0x1a (26), green=0x2b (43), blue=0x3c (60). RGB writes these as rgb(26, 43, 60). Both describe exactly the same color; HEX is compact and preferred in HTML/CSS, while RGB is easier to manipulate programmatically.
How do I convert HEX to RGB?
Split the 6-digit code into three 2-character pairs and convert each from base-16 to base-10. For #ff6b35: ff→255, 6b→107, 35→53 → rgb(255, 107, 53). For 3-digit shorthand like #f63, expand each digit first: #ff6633, then convert. The Picker & Convert tab does this instantly for any color you enter.
What is HSL and when should I use it?
HSL stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel (0°=red, 120°=green, 240°=blue). Saturation is how vivid the color is (0%=grey, 100%=full). Lightness is brightness (0%=black, 50%=pure color, 100%=white). HSL is ideal for CSS design systems — you can create a whole palette by varying lightness while keeping hue and saturation fixed.
What is HSV and how does it differ from HSL?
HSV uses Value (brightness) instead of Lightness. In HSL, 100% lightness is always white. In HSV, 100% value gives the most vivid version of the hue. HSV is the model used in most graphic editors (Photoshop, Figma) because it matches how designers intuitively think about brightness — turning up value makes a color brighter, not lighter.
What does CMYK stand for?
CMYK stands for Cyan, Magenta, Yellow, Key (black). It is a subtractive color model used in color printing. Screens mix light (additive RGB); printers mix ink (subtractive CMYK). When designing for print, your printer or prepress provider will ask for CMYK values. The conversions here use the standard RGB→CMYK formula; for precise print matching, use a calibrated ICC profile in your design software.
What is WCAG contrast and why does it matter?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios so that people with low vision can read text. The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 and L2 are the relative luminances of the lighter and darker colors. A ratio of 1:1 means no contrast; 21:1 is black on white. Failing contrast ratios is one of the most common WCAG violations and can expose organizations to ADA, Section 508, and European accessibility lawsuits.
What contrast ratio do I need to pass WCAG AA?
WCAG 2.1 Level AA (the legal baseline for most organizations): 4.5:1 for normal text, 3:1 for large text (18pt+ or bold 14pt+) and UI components. Level AAA is stricter: 7:1 for normal text and 4.5:1 for large text. The Contrast tab shows all four pass/fail badges so you can hit exactly the target you need.
How common is color blindness?
About 8% of men and 0.5% of women have some form of color vision deficiency — roughly 300 million people worldwide. Deuteranomaly/deuteranopia (green-deficient) affects ~5% of men. Protanomaly/protanopia (red-deficient) affects ~1% of men. Tritanopia (blue-yellow) is rare, under 0.01%. Color blindness means specific color pairs look the same — not that the world appears greyscale.
What color format should I use in CSS?
For design systems: hsl() because you can create tints and shades by adjusting one value. For copy-pasted brand colors: HEX. For modern browsers: oklch() gives a perceptually uniform scale where equal numerical steps look equally different visually. Avoid CMYK in CSS — it is not natively supported and belongs in print workflows.
How does the color blindness simulation work?
Each type of color vision deficiency maps to a different 3×3 linear transformation matrix applied to linearized sRGB values. This tool uses the Viénot 1999 matrices (the same algorithm used by Chrome DevTools and Figma's accessibility view) for deuteranopia, protanopia, and tritanopia. The transformed values are clamped to the 0–255 range and displayed as the simulated color.
Examples
Brand color to CSS variables
Convert your brand HEX to HSL for flexible CSS custom properties. Same hue, easy tints and shades.
/* Brand: #1d4ed8 → hsl(224, 71%, 48%) */
:root {
--blue-500: hsl(224, 71%, 48%);
--blue-400: hsl(224, 71%, 60%); /* lighter */
--blue-600: hsl(224, 71%, 36%); /* darker */
}
/* Same hue family, just adjust lightness */
Accessible button contrast check
White text on a blue button. Paste both into the Contrast tab to confirm WCAG AA pass before shipping.
/* Button background: #2563eb */ /* Button text: #ffffff */ /* Contrast ratio: 4.64:1 */ /* AA normal text: ✅ pass */ /* AA large text: ✅ pass */ /* AAA normal: ❌ fail */ /* → safe for body text size */
Designing for color blindness
Red (#ef4444) and green (#22c55e) look almost identical under deuteranopia. Simulate first, then add a secondary cue.
/* Red/green status colors */
/* — bad for deuteranopes */
.status-ok { color: #22c55e; }
.status-err { color: #ef4444; }
/* Fix: add shape or text cue */
.status-ok::before { content: "✓ "; }
.status-err::before { content: "✕ "; }
About color conversion and accessibility
Colors on screens are described in the sRGB color space using three channels — red, green, and blue — each ranging from 0 to 255. HEX notation compresses these three byte values into a six-character string prefixed with #. RGB notation spells them out numerically. Both describe exactly the same set of 16.7 million possible colors.
HSL and HSV reframe the same sRGB space in terms that are easier for humans to reason about. HSL separates hue (which color on the wheel), saturation (how vivid), and lightness (how light or dark). CSS designers prefer HSL for design systems because a color family — all shades of blue, for example — shares a hue value; you create tints and shades by varying lightness alone. hsl(224, 71%, 48%) and hsl(224, 71%, 90%) are unmistakably the same blue family. HSV replaces lightness with value (brightness), which matches how graphic editor color pickers are built.
CMYK is used in print. Screens add light together (additive primaries: red, green, blue). Printers subtract light by depositing ink (subtractive primaries: cyan, magenta, yellow, plus black as a separate channel for cost and depth). The conversion from RGB to CMYK is mathematical and suitable for approximate cross-checks, but final print work should use a calibrated ICC profile in software like Adobe Illustrator or InDesign.
WCAG contrast is the most actionable web accessibility check. The formula compares the relative luminance of two colors — where luminance accounts for the non-linear way human vision perceives brightness. Text at 4.5:1 contrast or above passes WCAG 2.1 Level AA for normal-size text; large text (18pt+ or bold 14pt+) needs only 3:1. These thresholds are grounded in research on the minimum contrast at which people with moderate low vision (20/80 vision corrected to 20/200) can read reliably. Failing contrast is also one of the most automated accessibility checks — tools like axe, Lighthouse, and browser extensions flag it automatically.
Color blindness affects 8% of men. The most common form, deuteranomaly, reduces sensitivity to green wavelengths, making red and green hues hard to distinguish. Designing with color blindness in mind means never relying on color alone as the only distinguishing signal — pair color with shape, text label, or pattern. The simulation tab lets you preview any color as it would appear under each of the three major types of dichromacy.
All conversions and simulations run entirely in your browser using JavaScript. No color you enter is transmitted to any server. You can save this page and use it offline.