Color converter

What is a Color Converter?

Designers, developers and print workflows all describe colours differently. A design file may give you a hex code, your CSS may use HSL for theming, and a printer will ask for CMYK. This converter translates a colour between the common formats and shows a live preview so you can check it at a glance.

How to use it

Enter a colour in any supported format, or pick one with the colour picker.
All other formats update instantly.
Copy the value you need.

The formats

HEX: #1E90FF, two hex digits each for red, green and blue. An optional fourth pair adds alpha, as in #1E90FF80.
RGB: rgb(30 144 255), channel values 0 to 255.
HSL: hsl(210 100% 56%), hue in degrees, saturation and lightness in percent. Easy to tweak by hand.
HWB: hue, whiteness, blackness. Intuitive for tints and shades.
LCH: perceptual lightness, chroma and hue. Equal steps look evenly spaced to the eye.
CMYK: cyan, magenta, yellow and key (black) ink percentages for print.
Named colours: CSS has 148 names such as dodgerblue, which is exactly #1E90FF.

Tips

Use HSL or LCH when generating lighter and darker variants for a design system; change only lightness to keep the hue consistent.
CMYK values here are a simple mathematical conversion. Real print output depends on the printer's colour profile, so request a proof for brand-critical work.
Short hex like #09F expands to #0099FF.

Frequently Asked Questions

How do I convert HEX to RGB?

Split the hex code into three pairs and convert each from base 16 to decimal. For example, 1E is 30, 90 is 144 and FF is 255.

Why use HSL instead of HEX?

HSL separates hue, saturation and lightness, so you can create lighter or darker variants by changing one number.

Is the CMYK conversion print-accurate?

It is a mathematical approximation. Exact print colour depends on the printer, paper and colour profile.

What is LCH?

A perceptual colour space where equal changes in lightness look equally large to the human eye, which helps when building palettes.