Color Converter (HEX, RGB, HSL)

What it does

The color converter takes a color in any common CSS notation and shows it in all the others at once: HEX, RGB, HSL, HSV and CMYK. It also shows a preview swatch, the CSS color name when there is an exact match, and the contrast ratio against white and black so you can check readability.

How to use

1. Type or paste a color into the Color box, or use the color picker next to it.
2. All notations update as you type. Click Copy next to the one you need.
3. Turn on Uppercase hex if your style guide writes hex in capitals.
4. Check the contrast rows before using the color for text: a green badge means it passes WCAG AA.

Example

#1e90ff is the CSS color dodgerblue. It converts to:

• RGB: rgb(30, 144, 255)
• HSL: hsl(210, 100%, 55.9%)
• HSV: hsv(210, 88.2%, 100%)
• CMYK: cmyk(88%, 44%, 0%, 0%)

Its contrast on white is 3.24:1, which is enough for large headings but not for body text.

Color models in short

• HEX and RGB describe how much red, green and blue light a screen emits. They are what browsers and design tools use internally.
• HSL describes hue (the angle on the color wheel), saturation and lightness, which makes it easy to create lighter or darker shades of the same color.
• HSV (also called HSB) is used by most color pickers in design software.
• CMYK describes cyan, magenta, yellow and black ink for print.

Colors with transparency, such as #1e90ff80 or rgb(30 144 255 / 50%), are shown with an alpha channel in HEX, RGB and HSL.