Color converter: HEX, RGB, HSL

Three ways to write one color

HEX writes the red, green and blue channels as three pairs of hexadecimal digits from 00 to ff, so #ff8800 is red 255, green 136, blue 0. The short form #f80 doubles each digit. RGB writes the same three numbers in decimal. HSL describes the color by hue (0 to 360 degrees around the color wheel), saturation and lightness in percent, which is easier to adjust by hand.

Why use HSL

To make a lighter or darker shade of a brand color, keep the hue and saturation and change only the lightness: hsl(32, 100%, 50%) becomes hsl(32, 100%, 70%) for a lighter tint. Rotating the hue by 180 degrees gives the complementary color. Converting to HSL first and back to HEX is the quickest way to build a consistent palette.

Rounding and names

HSL values are rounded to whole numbers, so converting HSL to HEX and back may move a value by one. All 148 CSS color names are understood, such as rebeccapurple or slategray. Transparency (the alpha in rgba or hsla) is ignored and only the solid color is converted.

Example

A HEX color converted to RGB and HSL.

Input

#6d3fd8

Output

#6d3fd8  rgb(109, 63, 216)  hsl(258, 66%, 55%)

How to use

1. Type or paste one color per line.
2. Read the HEX, RGB and HSL values on each result line.
3. Copy the notation you need, or download the whole list.

FAQ

How do I convert HEX to RGB?

Split the six digits into three pairs and convert each pair from hexadecimal to decimal: ff = 255, 88 = 136, 00 = 0. Or paste the code above.

Can I convert several colors at once?

Yes, one color per line. Each line gets its own result.

Does it support CSS color names?

Yes, any name your browser knows, such as navy, coral or rebeccapurple.

What about CMYK?

CMYK depends on the printer profile, so a simple formula would be misleading. Ask your print shop for the profile and convert in your design software.