Color converter

One color, every format

Design tools, CSS, brand guidelines and code libraries all describe colors in different ways. A designer hands you #8997BB, a chart library wants rgb(137, 151, 187), and you'd like an HSL value so you can make a lighter shade. This color converter accepts a color in any common format and shows it in all the others.

Accepted formats include HEX (#8997BB), HEX with alpha (#8997BBCC), RGB, RGBA, HSL, HSLA and HSV. Paste one in and copy whichever version you need.

Quick guide: HEX and RGB describe the amounts of red, green and blue light. HSL describes hue (the position on the color wheel, 0–360°), saturation and lightness, which makes it easy to create tints and shades. HSV (also called HSB) is what many color pickers in design apps use. The "A" versions add an alpha channel for transparency.

How to use the color converter

1. Enter a color in any supported format, for example #8997BB, rgb(137,151,187) or hsl(223, 27%, 63%).
2. Submit to convert.
3. Copy the format you need from the results.
4. Paste it into your CSS, design file or code.

Common uses

• Translating brand colors from a style guide into CSS values.
• Getting RGBA or HSLA values to add transparency to an overlay or shadow.
• Using HSL to build lighter and darker variations of a brand color for hover states.
• Matching colors between apps like Figma, Photoshop, Canva and code.
• Checking that two values from different sources are actually the same color.

Tips and things to know

• Three-digit HEX is shorthand: #ABC is the same as #AABBCC.
• In eight-digit HEX, the last two digits are alpha: FF is fully opaque and 00 fully transparent; 80 is about 50%.
• HSL and HSV are not the same even though both use hue and saturation. Use the right one for the tool you're pasting into.
• Check readability: text needs enough contrast with its background (WCAG recommends at least 4.5:1 for normal text).
• To choose a color visually, use the color picker. For one specific conversion, try HEX to RGB or RGB to HEX.

Frequently asked questions

What is a HEX color code?

A HEX code is a six-digit hexadecimal number preceded by #. Each pair of digits sets red, green and blue from 00 (none) to FF (full), so #FF0000 is pure red.

What is the difference between RGB and RGBA?

RGBA adds a fourth value, alpha, from 0 (transparent) to 1 (opaque). rgba(0, 0, 0, 0.5) is black at 50% opacity.

Why use HSL instead of HEX?

HSL is easier for people to adjust. Changing only the lightness value gives you lighter or darker versions of the same hue, which is handy for building color palettes.

Are HSV and HSB the same?

Yes. HSB (hue, saturation, brightness) is another name for HSV (hue, saturation, value).

Can CSS use all these formats?

Modern browsers support HEX, HEX with alpha, rgb(), rgba(), hsl() and hsla() directly in CSS. HSV isn't a CSS format, so convert it first.

Related tools

• Color picker: The easiest way to select a color from the color wheel and get the results in any format.
• HEX to RGB: Easily convert HEX color units to RGB with this easy convertor.
• RGB to HEX: Easily convert RGB color units to HEX with this easy convertor.
• Image optimizer: Compress and optimize images for a smaller image size but still high quality.
• Hex converter: Convert text to hexadecimal and the other way for any string input.