Color Converter
Type a color in any format, such as a HEX code, rgb() or hsl(), or pick one, and see it in every format with a copy button. Check the contrast against white and black for accessibility. It runs in your browser.
- HEX
- #4F46E5
- RGB
- rgb(79, 70, 229)
- HSL
- hsl(243, 75%, 59%)
- HSV
- hsv(243, 69%, 90%)
- CMYK
- cmyk(66%, 69%, 0%, 10%)
Contrast check
WCAG asks for at least 4.5 : 1 for normal text and 3 : 1 for large text (AA).
Text on white
6.29 : 1
Text on black
3.34 : 1
Common colors in every format
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
How the formats work
- HEX: # followed by three pairs of base-16 digits for red, green and blue, from 00 to FF. #FF0000 is full red.
- RGB: the same three amounts as decimal numbers from 0 to 255.
- HSL: hue (the color on a wheel from 0 to 360), saturation (how vivid) and lightness (how pale or dark).
- HSV: like HSL, but with value (brightness) instead of lightness, as in many color pickers.
- CMYK: cyan, magenta, yellow and black, the inks used in printing.
Using colors in CSS
All of these work in CSS: color: #4f46e5; color: rgb(79 70 229); color: hsl(243 75% 59%); and with transparency color: rgb(79 70 229 / 50%). Copy the format your project already uses.
Accessible color contrast
People with low vision or color blindness, and everyone using a phone in bright sun, need enough contrast between text and its background. WCAG compares the brightness of the two colors: 4.5 : 1 for normal text (level AA), 3 : 1 for large text and for interface parts such as buttons, and 7 : 1 for the stricter AAA level. Use the contrast check above before you choose a text color.
How to use the Color Converter tool
- Type a color code, pick a color with the color box, or press a sample color.
- Read it as HEX, RGB, HSL, HSV and CMYK, and press a copy button to copy one.
- Look at the contrast check to see if text in this color is readable on white or black.
Frequently asked questions
How do I convert HEX to RGB?
Split the six-digit code into three pairs and read each pair as a base-16 number. #4F46E5 is 4F = 79, 46 = 70, E5 = 229, so it is rgb(79, 70, 229). Or paste the code above and read the RGB value.
What is the difference between RGB, HSL and HSV?
RGB mixes red, green and blue light and is how screens work. HSL (hue, saturation, lightness) and HSV (hue, saturation, value) describe the same colors in a way that is easier for people: choose a hue, then make it paler, darker or more vivid.
Why does the CMYK value look different when printed?
CMYK here is a simple mathematical conversion. Real printing depends on the printer, the ink and the paper, and screens can show colors that ink cannot. For print work, use the color profile your printer asks for.
What contrast ratio do I need?
WCAG level AA asks for at least 4.5 : 1 for normal text and 3 : 1 for large text (about 24 px, or 19 px bold). Level AAA asks for 7 : 1 for normal text. Black on white is the maximum, 21 : 1.
Can I use a color with transparency?
Yes. Type an 8-digit HEX such as #4F46E580, or rgba() or hsla() with an alpha value. The result shows the alpha in HEX, RGB and HSL.