Converters
Pick a color or type its code in any format, and see the equivalent in HEX, RGB, HSL and CMYK, with a contrast check for white and black text.
Free · no sign-up · runs in your browser · updated
HEX (#C9A96E), rgb(201, 169, 110), or hsl(39, 46%, 61%)
White text on this color
2.24 : 1
Black text on this color
9.38 : 1
Pick a color with the color picker, or type a code such as #C9A96E, rgb(201, 169, 110) or hsl(39, 46%, 61%).
Copy the format you need from the results list.
Check the contrast ratio to make sure text on top of the color is readable.
HEX and RGB both describe the mix of red, green and blue that screens use; HEX simply writes it in hexadecimal. HSL (hue, saturation, lightness) is more intuitive for adjusting a color: move lightness to make it lighter or darker without changing the hue. CMYK is used for print.
The CMYK conversion here is a simple mathematical one. Print shops use different color profiles, so printed results can look slightly different from the screen.
The WCAG guidelines ask for a contrast ratio of at least 4.5 : 1 for normal text (level AA) and 7 : 1 for level AAA. Large text needs only 3 : 1 for AA. Checking contrast while you choose colors prevents designs that are hard to read.
Split the HEX code into three pairs of digits (red, green, blue) and convert each from hexadecimal to decimal. Example: #C9A96E becomes R 201, G 169, B 110.
3-digit or 6-digit HEX (with or without #), rgb(r, g, b) and hsl(h, s%, l%). Comma or space separators are both accepted.
It compares the brightness of the text with its background. 4.5:1 is the minimum WCAG level AA ratio for normal text, so that most people can read it, including people with mild vision impairment.
Screens emit light (RGB), while print uses ink on paper, which has a narrower range of colors. The conversion here does not use a print shop’s ICC profile.
Need more than tools?
These tools are only a small part of what Tipamedia can build. Tell us what you need and we will help you work out the next step.