Convert any color between HEX, RGB, HSL and CMYK. Type a value in any box, use the color picker or press Random color, and every other format updates at once. You also see a contrast check for text on your color.
All Free ToolsCSS Gradient GeneratorColor Palette GeneratorInstagram Font Generator
Colors are converted in your browser. CMYK values are a simple conversion and may look different when printed.
What Is a Color Converter?
The same color can be written in several ways. Web designers use HEX and RGB, graphic designers like HSL because it is easy to make a color lighter or darker, and printers use CMYK. A color converter turns one format into the others so you can move a color between a website, a design tool and a print job.
How to Convert a Color
- Type a HEX code, such as #F5821F, or use the color picker. You can also type numbers into the RGB, HSL or CMYK boxes.
- All other boxes update at once and the large swatch shows the color.
- Press Copy next to the format you need, for example the CSS rgb() or hsl() value.
HEX, RGB, HSL and CMYK Explained
- HEX is a six character code such as #F5821F. The pairs are the red, green and blue parts in base 16. Short codes like #FA0 are expanded for you.
- RGB gives the red, green and blue parts as numbers from 0 to 255. It is what screens use.
- HSL stands for hue, saturation and lightness. Hue is the position on the color wheel from 0 to 360, saturation is how strong the color is and lightness is how light or dark it is.
- CMYK gives cyan, magenta, yellow and black as percentages. It is used for print, but the conversion here is a simple one and may look different on paper.
The Contrast Check
Under the formats you see how white text and black text look on your color, using the contrast ratio from the Web Content Accessibility Guidelines. A ratio of at least 4.5 to 1 is recommended for normal text, 3 to 1 for large text, and 7 to 1 for the highest level. Use it to choose a readable text color for buttons and banners.
Limits to Know About
- CMYK depends on the printer and the paper, so this conversion is only a starting point. Ask your printer for exact values.
- The tool works with solid colors and does not read transparency (alpha) values.
- Colors may look slightly different on different screens.
Frequently Asked Questions
How do I convert HEX to RGB?
Type the HEX code in the HEX box. The RGB numbers appear at once, and you can copy the CSS rgb() value.
How do I make a color lighter?
Type your color in the HSL boxes and increase the L (lightness) number.
What is the HEX code for orange?
Orange is often written as #FFA500, and the Hawaa Hub orange is #F5821F. Try them in the tool to see the other values.
Does it support short HEX codes?
Yes. A code like #FA0 is treated as #FFAA00.
Is this color converter free?
Yes. It is free to use, with no sign-up.
More Free Tools
Try the CSS gradient generator, the color palette generator, the image converter or the Instagram font generator, or browse all free online tools.