Color Converter

How to use the Color Converter

1. Type or paste a color into the box, in any format: #5b4cf0, rgb(91, 76, 240), hsl(245 85% 62%), a CMYK value or a CSS name such as teal. You can also click the small swatch to pick one.
2. Check the large swatch to confirm it is the color you expect. Transparent colors show over a checkerboard.
3. Find the format you need in the list and press Copy next to it.
4. Look below the list for the nearest CSS named color and how well the color contrasts with white and black.

Features

• Reads HEX, RGB(A), HSL(A), HSV, HWB, CMYK and all 148 CSS names
• Understands both comma and modern space-separated CSS syntax
• Transparency support with 8-digit HEX and rgba()
• Finds the closest CSS named color
• Contrast ratio against white and black
• One-click copy for every format

What the color formats mean

Every format on this page describes the same thing, a color on screen, but each is suited to a different job.

• HEX writes the red, green and blue channels as two base-16 digits each, from 00 to ff. #5b4cf0 is red 0x5b (91), green 0x4c (76) and blue 0xf0 (240). Three-digit shorthand doubles each digit, so #f60 is #ff6600, and an optional fourth pair adds opacity.
• RGB gives the same three channels as decimal numbers from 0 to 255. Screens mix light, so 255, 255, 255 is white and 0, 0, 0 is black.
• HSL stands for hue, saturation and lightness. Hue is an angle around the color wheel (0° red, 120° green, 240° blue), saturation runs from gray to vivid, and lightness from black through the pure color to white. It is the easiest format for making lighter or darker variations by hand.
• HSV, also called HSB, swaps lightness for value or brightness. It is the model behind the square-and-slider pickers in most design apps.
• HWB describes a hue plus how much white and black to mix in. It became part of CSS with the Color Level 4 specification.
• CMYK lists the cyan, magenta, yellow and black ink used in print.

Worked example: HEX to RGB to HSL

Take #ff6347. Split it into pairs and convert from base 16: ff = 255, 63 = 99, 47 = 71, so the color is rgb(255, 99, 71). For HSL, scale the channels to 0–1 (1, 0.388, 0.278). The largest is 1 and the smallest 0.278, so lightness is their average, 0.639 or 63.9%. Their difference, 0.722, divided by 1 − |2 × 0.639 − 1| gives a saturation of 100%. Red is the largest channel, so the hue is 60° × (0.388 − 0.278) ÷ 0.722 = 9.1°. The result is hsl(9.1, 100%, 63.9%). That color is the CSS name tomato.

A note on CMYK

Screens add light while printers subtract it with ink, and the exact result depends on the paper, the inks and the printer’s color profile. The CMYK values here use the standard mathematical conversion, which is a good starting point for mock-ups and office printing. For professional print work, convert in a design application with the ICC profile your printer supplies.

CSS named colors

CSS recognizes 148 color names, most inherited from the X11 window system, including pairs such as gray and grey that are identical. The newest, rebeccapurple (#663399), was added in 2014 in memory of Rebecca Meyer, daughter of the CSS author Eric Meyer. When your color is not an exact match, the converter shows the closest name by perceptual distance (ΔE), which is handy for naming design tokens or describing a color in words.

Tips

Use HSL when you need hover and pressed states: keep the hue and saturation and nudge lightness by 5–10%. Store brand colors as HEX in your style guide, since every tool accepts it. To check whether a color is readable as text, open the Contrast Checker, and to build a full scheme around it, try the Color Palette Generator.

Frequently asked questions