Color Converter
Enter a color in any format — HEX, RGB, HSL or a CSS name — and get every other representation, plus shades and contrast ratios.
Tints and shades
Contrast check (WCAG)
The color models
| Model | Looks like | Use it for |
|---|---|---|
| HEX | #2563EB | CSS and design tools — a compact way of writing RGB in hexadecimal. |
| RGB | rgb(37 99 235) | Screens. Three additive channels, 0–255 each, plus optional alpha. |
| HSL | hsl(221 83% 53%) | Reasoning about color. Hue is an angle on the wheel; changing lightness alone gives a tint or shade. |
| HSV/HSB | hsv(221 84% 92%) | Color pickers in Photoshop, Figma and most design software. |
| CMYK | cmyk(84% 58% 0% 8%) | Print. Subtractive inks — the conversion here is a nominal one, since real print needs a color profile. |
How hex actually works
#2563EB is three bytes: 25 red, 63 green, EB blue, each a hexadecimal number from 00 (0) to FF (255). The three-digit shorthand #2CE expands by doubling each digit to #22CCEE, so it can only express 4,096 of the 16.7 million possible colors. An eight-digit hex adds an alpha byte at the end.
Contrast and accessibility
WCAG 2.1 defines contrast as a ratio between 1:1 and 21:1. Normal body text needs at least 4.5:1 to meet level AA, large text (18 pt, or 14 pt bold) needs 3:1, and level AAA raises those to 7:1 and 4.5:1. UI components and graphical objects need 3:1. The table above checks your color against both black and white so you can see which text color it can carry.
Tints, shades and tones
A tint mixes a color with white, a shade mixes it with black, and a tone mixes it with grey. Generating a scale by varying HSL lightness — as this tool does — is the quickest way to build a usable palette from one brand color, though hand-tuned scales usually shift hue slightly at the extremes to avoid muddy mid-tones.
Frequently asked questions
How do I convert HEX to RGB by hand?
Split the six digits into three pairs and read each as a hexadecimal number. #2563EB → 0x25=37, 0x63=99, 0xEB=235, so rgb(37, 99, 235).
What does the fourth CMYK number mean?
K is the black (key) channel. Printing black from cyan, magenta and yellow together wastes ink and produces a muddy brown, so a dedicated black ink is used instead.
Why does my CMYK color look different when printed?
CMYK has a smaller gamut than RGB, so vivid screen colors — especially bright blues and greens — have no printable equivalent. Accurate conversion needs an ICC profile for the specific press and paper; the values here are a generic approximation.
Which contrast ratio do I actually need?
4.5:1 for normal text and 3:1 for large text to meet WCAG AA, which is the level most accessibility regulations reference.
What are the modern CSS color functions?
CSS now supports oklch(), oklab(), lab() and color(). OKLCH in particular keeps perceived lightness consistent across hues, which makes it much better than HSL for generating palettes.