Color Converter

Design Design Utilities

Type a colour in any common notation and get the others at once. Coral, #FF7F50, is rgb(255, 127, 80), hsl(16, 100%, 66%), hsv(16, 69%, 100%) and roughly cmyk(0%, 50%, 69%, 0%). The tool also reports relative luminance, the value WCAG contrast ratios are built from.

About this tool

Designers and front-end developers move the same colour between a brand guide in HEX, a CSS file in hsl(), a design app that wants HSB and a print brief that asks for CMYK. This converter reads one entry and writes all of them, using the sRGB formulas in the W3C CSS Color specification. You can paste a three- or six-digit HEX code, an rgb() or hsl() string copied from a stylesheet, or a basic CSS name such as navy or tomato. It also shows relative luminance, the input to WCAG contrast checks. One limit: the CMYK figures are a simple mathematical split with no ICC profile, so a printer working in a specific press profile will produce different ink values.

How to use it

Enter a colour
Type or paste a HEX code, an rgb() or hsl() string, or a CSS colour name into the field.
Read the conversions
HEX, RGB, HSL, HSV and CMYK update as you type, alongside relative luminance.
Check the working
The steps show the channel values, max and min, hue and the CMYK key used in the maths.

Examples

Coral, #FF7F50

Colour value: #FF7F50

Result HEX: #FF7F50
RGB: rgb(255, 127, 80)
HSL: hsl(16, 100%, 66%)
HSV / HSB: hsv(16, 69%, 100%)
CMYK (uncalibrated): cmyk(0%, 50%, 69%, 0%)
Relative luminance: 0.37

Channels: R = 255, G = 127, B = 80 → HEX #FF7F50.
Max = 1, min = 0.314, lightness L = (max + min) ÷ 2 = 0.657.
Hue = 16°, HSL saturation = 100%, HSV saturation = 68.6%.
CMYK key K = 1 − max = 0; C, M, Y = (1 − channel − K) ÷ (1 − K).

A warm orange-pink: hue 16°, fully saturated, two thirds of the way to white in HSL.

CSS green, rgb(0, 128, 0)

Colour value: rgb(0, 128, 0)

Result HEX: #008000
RGB: rgb(0, 128, 0)
HSL: hsl(120, 100%, 25%)
HSV / HSB: hsv(120, 100%, 50%)
CMYK (uncalibrated): cmyk(100%, 0%, 100%, 50%)
Relative luminance: 0.154

Channels: R = 0, G = 128, B = 0 → HEX #008000.
Max = 0.502, min = 0, lightness L = (max + min) ÷ 2 = 0.251.
Hue = 120°, HSL saturation = 100%, HSV saturation = 100%.
CMYK key K = 1 − max = 0.498; C, M, Y = (1 − channel − K) ÷ (1 − K).

CSS green is only half-bright, so HSL lightness is 25% and the CMYK key is 50%.

Pure red from HSL

Colour value: hsl(0, 100%, 50%)

Result HEX: #FF0000
RGB: rgb(255, 0, 0)
HSL: hsl(0, 100%, 50%)
HSV / HSB: hsv(0, 100%, 100%)
CMYK (uncalibrated): cmyk(0%, 100%, 100%, 0%)
Relative luminance: 0.213

Channels: R = 255, G = 0, B = 0 → HEX #FF0000.
Max = 1, min = 0, lightness L = (max + min) ÷ 2 = 0.5.
Hue = 0°, HSL saturation = 100%, HSV saturation = 100%.
CMYK key K = 1 − max = 0; C, M, Y = (1 − channel − K) ÷ (1 − K).

Hue 0 at full saturation and 50% lightness is the sRGB red primary, with relative luminance 0.2126.

How it is calculated

L = (max + min) ÷ 2; S(HSL) = (max − min) ÷ (1 − |2L − 1|); V = max; K = 1 − max

max, min: largest and smallest of the R, G, B channels scaled to 0–1
L: HSL lightness
V: HSV value (brightness)
K: CMYK black key; C, M and Y are (1 − channel − K) ÷ (1 − K)

Hue comes from which channel is largest: the gap between the other two, divided by max − min, places the colour within that 120° sector. HSL and HSV share the hue but define saturation differently, which is why coral is 100% saturated in HSL and 69% in HSV. Relative luminance linearises each sRGB channel and weights them 0.2126, 0.7152 and 0.0722, as in WCAG 2.

When not to use it

For press-ready CMYK, use a colour-managed conversion with the printer's ICC profile.
For wide-gamut colours in Display P3 or OKLCH, an sRGB converter clips or misstates them.

Common mistakes

Treating HSL saturation and HSB saturation as the same number when moving between CSS and a design app.
Expecting a HEX round trip from HSL to match exactly, when whole-number percentages lose a little precision.

Frequently asked questions

What is the difference between HSL and HSV?

Both use the same hue angle. HSL puts pure colours at 50% lightness, with 100% always white; HSV puts pure colours at 100% value, with black at 0%. Saturation is defined differently in each, so the same colour can show 100% in one and 69% in the other.

Why does converting HSL back to HEX sometimes change the last digit?

HSL percentages are shown as whole numbers, which is coarser than the 256 steps per RGB channel. Entering hsl(16, 100%, 66%) gives #FF8052 rather than coral's #FF7F50 because 66% is itself a rounded value.

Are the CMYK values suitable for print?

They are a starting point. The conversion assumes ideal inks with no profile, so real presses using coated or uncoated paper profiles will produce different percentages. Ask the printer for the profile and convert in a colour-managed application.

Which colour names are recognised?

The basic CSS keywords such as black, white, red, green, blue, navy, teal, purple, orange and gray, plus a handful of common extras like coral, tomato, gold and indigo. For any other name, paste its HEX code.

What is relative luminance used for?

WCAG contrast ratio is (L1 + 0.05) ÷ (L2 + 0.05) using the relative luminance of two colours. White is 1 and black is 0, so the figure here lets you check text and background pairs against the 4.5:1 guideline.

Can I paste an rgba() or hsla() value?

Yes. The alpha part is accepted but ignored, because HEX, HSL and CMYK as shown here describe the opaque colour only.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 23). Color Converter. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/design/design-utilities/color-converter/

MLA

Tools Directory Editorial Team. “Color Converter.” Tools Directory, 23 Oct. 2026, https://tools.milunir.com/design/design-utilities/color-converter/. Accessed 26 Oct. 2026.

Chicago

Tools Directory Editorial Team. “Color Converter.” Tools Directory. Last modified October 23, 2026. Accessed October 26, 2026. https://tools.milunir.com/design/design-utilities/color-converter/.

Link<a href="https://tools.milunir.com/design/design-utilities/color-converter/">Color Converter – Tools Directory</a>