Color Converter (HEX, RGB, HSL)
Type `#3b82f6`, `rgb(59 130 246)`, `hsl(217 91% 60%)` or a CSS keyword and get every other notation back, with a swatch, lighter and darker variants, and contrast ratios.
Every notation from any input
The parser accepts three-, four-, six- and eight-digit hex, `rgb()` and `rgba()`, `hsl()` and `hsla()`, percentages, the modern space-separated CSS syntax and common colour keywords. Whatever you paste, you get HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV and CMYK back at once.
Contrast ratios you can act on
The result includes the WCAG contrast ratio against white and against black. WCAG AA needs 4.5:1 for body text and 3:1 for large text; AAA needs 7:1. Checking this while choosing a colour is far cheaper than discovering an accessibility failure in an audit later.
HSL is the notation to think in
HEX and RGB are hard to adjust by hand - to make a colour slightly darker you must change three numbers together. HSL separates hue, saturation and lightness, so building a palette becomes a matter of holding the hue and varying the lightness. The lighter and darker variants shown here are generated that way.
Frequently asked questions
Is anything sent to a server?
No. Nothing you paste leaves your browser. The page loads a small amount of JavaScript, and every calculation happens on your own machine - there is no server to send data to. Colour conversion is pure arithmetic and runs instantly in your browser.
Why does the CMYK value not match my print output?
CMYK conversion depends on the ink, paper and colour profile of the actual press, and this tool uses the simple device-independent formula. Treat the result as a starting point; for print work, convert through the profile your printer specifies.
How does the alpha channel work in hex?
An eight-digit hex value appends two alpha digits, so `#3b82f680` is that blue at 50% opacity. It is supported by every current browser. Four-digit shorthand works the same way, expanding each digit.
What contrast ratio do I actually need?
4.5:1 for normal body text and 3:1 for text at 18pt or 14pt bold, to meet WCAG AA - the level most legal accessibility requirements reference. AAA raises those to 7:1 and 4.5:1. Non-text elements such as icons and input borders need 3:1.