Free Color Converter: HEX, RGB, HSL and CMYK
This free colour converter takes a colour in HEX, RGB, HSL or CMYK and returns it in all four formats, with a swatch to check it, ready-to-paste CSS values and the closest CSS named colour. Paste #1273b5, rgb(18, 115, 181), hsl(204, 82%, 39%) or 90, 36, 0, 29 and the format is detected for you. It suits designers, developers and anyone matching a brand colour for print.
Color Converter
Generators and Converters
About this tool
HEX and RGB describe the same thing: how much red, green and blue light a screen mixes, from 0 to 255 per channel, written in hexadecimal or decimal. HSL describes the colour the way people think about it, as a hue on the colour wheel, a saturation and a lightness, which makes it the easiest format for making a colour lighter, darker or more muted in CSS. CMYK is the subtractive model printers use: cyan, magenta, yellow and black ink as percentages.
The converter accepts shorthand HEX (#abc), HEX with or without the hash, rgb() and hsl() CSS functions, bare comma or space separated numbers, and cmyk() or four percentages. Alpha values are ignored. It converts through RGB using the standard formulas, rounds HSL to whole degrees and percentages, and shows the closest of the CSS named colours by distance, which is handy when you need a readable name in a style guide.
CMYK conversion here is the simple mathematical kind, without an ICC colour profile, so it tells you the ink proportions but not exactly how a specific press and paper will render the colour. For brand work that goes to print, give your printer the HEX or RGB value and ask for a proof, or match a Pantone swatch. Screen colours brighter than any ink, such as pure RGB green, will always print duller.
Frequently asked questions
How do I convert HEX to RGB by hand?
Split the six-digit HEX into three pairs: #1273b5 is 12, 73 and b5. Convert each pair from hexadecimal to decimal: 12 is 18, 73 is 115 and b5 is 181, so the colour is rgb(18, 115, 181). A three-digit HEX such as #fa3 doubles each digit first: #ffaa33. Going the other way, convert each channel to a two-digit hexadecimal number and join them.
Why does my CMYK colour look different when printed?
A screen mixes light and a printer mixes ink, and ink cannot reproduce the brightest screen colours, especially saturated greens, blues and oranges. The maths here gives the ink proportions without a colour profile, so the printed result also depends on the press, the paper and the profile the printer uses. Ask for a printed proof for any brand colour that matters.
When should I use HSL instead of HEX in CSS?
Use HSL when you build a palette from one brand colour: keep the hue, then change the lightness for hover states, borders and backgrounds, and the saturation for muted variants. The values stay readable and related, where a set of HEX codes looks random. Every modern browser supports hsl(), and you can mix HSL and HEX freely in one stylesheet.
Does the converter handle transparency?
It reads 8-digit HEX, rgba() and hsla() values but ignores the alpha part and converts the solid colour only, because CMYK and named colours have no transparency. Add the alpha back in your CSS, for example rgb(18 115 181 / 50%). The swatch always shows the solid colour.