How do I convert HEX to RGB?

Split the six digits into three pairs and convert each from hexadecimal to decimal. #4F46E5 is rgb(79, 70, 229). This tool does it automatically.

Hue, saturation and lightness: a way to describe color by its angle on the color wheel, its vividness and its brightness.

Is the CMYK value accurate for printing?

No. It is a mathematical approximation. Printers use ICC colour profiles that give different, device-specific values.

Can I type a 3-digit hex color?

Yes. #4af is expanded to #44aaff.

Why did my value change by one after converting?

Rounding. RGB uses whole numbers while HSL uses decimals, so a round trip can differ by one unit.

Color Converter – HEX to RGB, HSL, CMYK with Picker

Pick a color or type a value in any format. The other formats update immediately and can be copied for use in CSS.

Colour formats on the web

The same colour can be written several ways. HEX is a six-digit code such as #4F46E5, in which each pair of digits is the red, green and blue amount from 00 to FF. RGB writes those amounts as decimal numbers from 0 to 255, as in rgb(79, 70, 229). HSL describes the colour the way people think about it: hue as an angle on the colour wheel from 0 to 360, saturation as a percentage of vividness, and lightness as a percentage from black to white. All three are valid in CSS and refer to the same colours on screen, so converting is purely a change of notation.

Why HSL is useful

HSL makes systematic adjustments easy. To make a darker hover state, lower the lightness by ten points. To build a palette of tints, keep the hue and vary lightness. To desaturate a colour for a disabled state, reduce saturation. Doing that in HEX means recalculating three numbers at once. Designers often pick a base colour in HEX from a style guide, convert to HSL and derive the rest of the palette from there.

How the conversions are calculated

HEX ↔ RGB: each pair of hexadecimal digits is a number from 0 to 255. Three-digit shorthand such as #4af expands to #44aaff.
RGB → HSL: lightness is the average of the largest and smallest channel, saturation compares their difference to lightness, and hue depends on which channel is largest.
HSL → RGB: the standard formula converting hue sectors back to channel values.
CMYK: a simple mathematical conversion for reference. Print profiles use colour management, so real printed colours will not exactly match this number.

Using the tool

Use the picker to choose a colour visually, or type in the HEX, RGB or HSL box. If what you typed is not recognised, a message appears and the other fields stay unchanged. Rounding means that converting back and forth may change a value by one unit, for instance an HSL round trip can shift a channel by one. The copy buttons place the CSS-ready string on your clipboard. Alpha (transparency) values are not handled. Nothing is sent from your browser.

Color Converter (HEX, RGB, HSL, CMYK)