Free Color Converter & Palette Generator
Convert between HEX, RGB, HSL and CMYK, build palettes, and check WCAG contrast — all in your browser.
Pick a color with the picker or paste any color value you already have — #3366cc,
rgb(51, 102, 204), hsl(220, 63%, 50%), or even a name like steelblue.
Every format updates live, palettes are generated from the color wheel, and the contrast checker
tells you exactly which text colors are readable on your background.
Pick a color
Accepted: #RGB, #RRGGBB, #RRGGBBAA,
rgb()/rgba(), hsl()/hsla(), and all 148 CSS color names.
Color formats
Click any value (or its Copy button) to copy it.
| Format | Value | |
|---|---|---|
| HEX | |
|
| RGB | |
|
| HSL | |
|
| CMYK | |
|
| CSS name (closest) | |
|
| Web-safe (nearest) | |
Generated palettes
Built from the color wheel around your base color. Click a swatch to copy its HEX; use Set to make it the new base and regenerate everything.
Contrast & accessibility
WCAG 2.1 contrast ratios for your color as background (and as text). AA is the legal minimum in many accessibility standards; AAA is the gold standard.
| Pairing | Sample | Ratio | AA | AA large | AAA | AAA large |
|---|
How the color models work
RGB — the screen model
Screens build color by adding light: red, green and blue sub-pixels, each from 0 (off) to 255 (full
brightness). Mixing all three at full intensity gives white; none gives black. That is why RGB is
called an additive model. When you see a color described as
rgb(51, 102, 204), you are looking at a screen recipe.
HSL — the human model
HSL describes the same colors the way people talk about them: hue is the position on the color wheel (0° red, 120° green, 240° blue), saturation is how vivid versus grey the color is, and lightness is how dark versus light. Designers and developers use HSL because it makes adjustments obvious — “make it 20% lighter” is one number, while doing that in RGB requires recomputing all three channels. The palettes on this page are generated by rotating the hue and scaling the lightness.
CMYK — the print model
Printers work the opposite way: they subtract light by laying down cyan, magenta, yellow and black (K) inks on white paper, so it is a subtractive model. The CMYK values shown here are the standard mathematical approximation (the “unprofiled” conversion), which is close enough for labels and quick checks. Professional print work uses ICC color profiles per paper and press, so treat these numbers as a starting point, not a press proof.
How the contrast ratio is calculated
WCAG defines contrast as the ratio of the relative luminance of the two colors (plus a small constant so black-on-black is 1:1 instead of 0:1):
contrast = (L1 + 0.05) / (L2 + 0.05)
Relative luminance is not the same as brightness — it weights each channel by how much the human eye sees it (green contributes most, blue least) and applies the non-linear response of our vision:
L = 0.2126·R + 0.7152·G + 0.0722·B
where each channel is linearized first (values below ~4% are divided by 12.92, the rest by a 2.4-gamma curve). The ratio ranges from 1:1 (identical colors, invisible) to 21:1 (black on white, maximum).
WCAG thresholds
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
“Large text” means at least 24px (18pt), or 18.66px (14pt) when bold. Body copy is normal text, so hold your design to the 4.5:1 bar before calling it accessible.
Tips for using palettes
- 60-30-10 rule: pick one dominant color (~60% of the surface), one supporting color (~30%), and one accent (~10%). The complementary or triadic swatches are natural accent picks.
- Check contrast, don’t guess. A color can look fine on your monitor and fail badly on a cheap LCD. The table above is the objective test.
- Never rely on color alone. If red means “error” and green means “success”, add icons or text too — about 1 in 12 men has some form of color vision deficiency.
- Keep your base, vary the lightness. The monochromatic and shades/tints rows give you hover states, borders and background tints that always go with the base color.
- Export as CSS variables and reference
var(--base)in your stylesheets — rebranding becomes a one-line change.
Nothing on this page leaves your browser: there is no server round-trip when you pick a color, no analytics on your inputs, and no storage of any kind.
