Color converter
One color in, every notation out, plus tints, shades and a WCAG contrast check.
Input
Hex, rgb(), hsl(), hsv(), cmyk() or a CSS color name. A comma or a point both work in percentages.
Some values were outside their range and were clamped, as CSS does.
This color is translucent. Hex, rgb(), hsl() and hsv() carry the alpha; CMYK and the palette have no alpha, so it was dropped there.
In every notation
- HEX
- RGB
- HSL
- HSV
- CMYK
- Name
CMYK is the plain formula without a printer profile; printed inks will look different.
Tints, shades and harmonies
Lightness moves in equal steps toward white and toward black; the complementary color sits opposite on the hue wheel and the analogous ones 30° to each side. Click a swatch to copy its hex.
Lighter
Darker
Complementary
Analogous
Contrast checker
Enter a valid color above and a second one here to measure contrast.
A translucent first color was blended over the second before measuring; the second color's alpha is ignored.
| WCAG level | Minimum | Result |
|---|---|---|
| AA, normal text | 4.5:1 | – |
| AA, large text | 3:1 | – |
| AAA, normal text | 7:1 | – |
| AAA, large text | 4.5:1 | – |
Large text is at least 18 pt, or 14 pt bold (about 24 px, or 18.7 px bold). The ratio is judged exactly and shown with two decimals.
Related tools
-
Unit converter
Type a value, pick two units and see the result and a table of every unit in the group. -
Text to Binary
Convert text and byte values in both directions, using ASCII or UTF-8. -
Roman numeral converter
Convert both ways and understand every symbol. -
Image Converter
Change the format, keep the dimensions. No uploads. -
Aspect ratio calculator
Find the exact ratio and calculate proportional dimensions. -
SVG icon normalizer
Different icon margins? Fit the visible artwork to one grid without rasterizing it.
Paste or type a color in any notation you have: a hex code with or without the #, rgb() or rgba(), hsl(), hsv(), cmyk(), or one of the 148 CSS color names. The converter shows it in every other notation as you type, each with a copy button and a swatch, and the native picker beside the field stays in sync both ways. Below it, tints and shades plus the complementary and analogous colors give you a quick palette, and the contrast checker measures the WCAG ratio against white, black or any second color. Everything runs in your browser; the color is never sent anywhere.
How to use
- Type or paste a color: #1e90ff, rgb(30, 144, 255), hsl(210, 100%, 56%) or dodgerblue.
- Read it in every other notation and copy the one you need; Ctrl+Shift+C copies the value you are on.
- Drag the picker next to the field to adjust the color; the field and every notation follow.
- Pick white, black or another color in the contrast checker and read the ratio with its pass and fail marks.
What it handles
- Accepts 3, 4, 6 and 8-digit hex, rgb() with values or percentages, hsl(), hsv() or hsb(), cmyk(), bare lists such as 30, 144, 255, and all 148 CSS color names.
- Carries alpha into hex, rgb(), hsl() and hsv(); CMYK and the palette have none, and a note says when it was dropped.
- Clamps values outside their range the way CSS does and says so; hues wrap around the wheel.
- Reads a decimal comma in percentages such as 55,9% when the list is separated by spaces or comma and space.
- Shows every contrast verdict as words and a symbol, never as color alone.
FAQ
What is the difference between HSL and HSV?
Both describe a color by hue, saturation and a third axis. In HSL that axis is lightness: 100% is always white and 50% is the pure hue at full saturation. In HSV, also called HSB, it is value or brightness: 100% is the pure hue itself, and white is reached by lowering saturation instead. Design tools' pickers tend to use HSV, CSS uses HSL; the converter computes both from the same color.
Why does CMYK look different when printed?
The CMYK here comes from the plain formula: the key channel is the darkest part of the color and the inks fill in the rest, with no ICC profile involved. Real printing depends on the paper, the ink set and the profile the print shop uses, and its software converts the RGB color through that profile, so its percentages will differ from these. Treat this CMYK as a starting point, not as the final values.
What contrast ratio do I need for text?
WCAG 2 asks for at least 4.5:1 between normal text and its background at level AA and 3:1 for large text, meaning 18 point or 14 point bold, roughly 24 px or 18.7 px bold. Level AAA raises those to 7:1 and 4.5:1. The checker computes the ratio from relative luminance as the standard defines it and judges the exact value, so 4.4999 fails even though it is shown as 4.50.
Is the color I enter sent anywhere?
No. Parsing, conversion and the contrast arithmetic run in the page itself, so nothing leaves your device and the page works with the connection off. The last color and the contrast checker's second color stay in this browser's storage, and the primary color is mirrored in the address bar as ?c= so a copied link opens on it. Clear removes both.
Updated