Design & Dev

Color Converter

Convert color codes between HEX, RGB, HSL, HSV and CMYK. Adjust any channel and see every other format update instantly; your inputs stay in your browser

Runs in your browser: what you enter stays on your device

Color Controls

Visual color picker

Hexadecimal (HEX)

RGB Channels (0–255)

HSL (Hue, Saturation, Lightness)

Always in sync: change any slider, the HEX code or the picker and every other format updates at once.

Text on Color (White) Text on Color (Black)

HEX #059669

RGB (CSS) rgb(5, 150, 105)

HSL (CSS) hsl(161, 94%, 30%)

HSV / HSB hsv(161, 97%, 59%)

CMYK cmyk(97%, 0%, 30%, 41%)

Relative Luminance (WCAG 2.1): 0.2286

Share this tool

How to use this tool

Pick a color with the visual picker, type a HEX code, or move the RGB and HSL sliders; every format updates together.
Use Random Color to explore ideas.
Read HEX, RGB, HSL, HSV and CMYK values, plus the relative luminance and the contrast with white and black text.
Press Copy beside the format you need to paste it into CSS, design software or code.

Worked example

The emerald green #059669 converts to rgb(5, 150, 105), hsl(161, 94%, 30%), hsv(161, 97%, 59%) and cmyk(97%, 0%, 30%, 41%), with a relative luminance of 0.2286. White text on it has a 3.77:1 contrast ratio and black text 5.57:1. WCAG asks for at least 4.5:1 for normal-size text and 3:1 for large text, so white text on this green only works for large headings, while black text passes for everything. The CMYK values come from a simple formula without an ICC profile, so they will not match a printer's proof.

Methodology

Every format is computed from one 8-bit sRGB triplet. sRGB is defined in IEC 61966-2-1; the HEX, RGB and HSL notations are the ones in the W3C CSS Color specification; relative luminance follows WCAG 2.1. All values are rounded to whole numbers, so converting back and forth can move a value by 1.

RGB, HEX and HSL: HEX is the three channels in base 16: rgb(255, 128, 0) is #FF8000. For HSL the channels are scaled to 0–1, then L = (max + min) / 2, S = (max − min) / (1 − |2L − 1|), and hue is the angle of the dominant channel on a 360-degree wheel. The same color gives hsl(30, 100%, 50%). HSV shares the hue but uses V = max and S = (max − min) / max. Shorthand HEX such as #F80 is expanded to #FF8800, and an 8-digit HEX is accepted but its alpha pair is ignored.

CMYK and luminance: CMYK uses the simple device-independent formula K = 1 − max(R, G, B) with C, M and Y scaled by the remainder, so #FF8000 gives cmyk(0%, 50%, 100%, 0%). It involves no ICC profile, ink or paper, so it will not match a press proof. Relative luminance linearizes each channel (v / 12.92 below 0.03928, otherwise ((v + 0.055) / 1.055)^2.4) and weights them 0.2126, 0.7152 and 0.0722. For #FF8000 that is 0.3670, giving a contrast of 2.52:1 with white and 8.34:1 with black. A mid-gray such as #808080 has luminance 0.2159, not 0.5.

Seven classic colors and what they score on contrast

Seven familiar colors, converted with this tool's formulas. The last column shows the contrast ratio of white text and black text on that color.

Color	HSL	CMYK (%)	Contrast white / black
#FF0000 Red	0, 100%, 50%	0, 100, 100, 0	4.00:1 / 5.25:1
#0000FF Blue	240, 100%, 50%	100, 100, 0, 0	8.59:1 / 2.44:1
#FFFF00 Yellow	60, 100%, 50%	0, 0, 100, 0	1.07:1 / 19.56:1
#808080 Mid-gray	0, 0%, 50%	0, 0, 0, 50	3.95:1 / 5.32:1
#008080 Teal	180, 100%, 25%	100, 0, 0, 50	4.77:1 / 4.40:1
#800080 Purple	300, 100%, 25%	0, 100, 0, 50	9.42:1 / 2.23:1
#000080 Navy	240, 100%, 25%	100, 100, 0, 50	16.01:1 / 1.31:1

How to read it: WCAG 2.1 asks for 4.5:1 for normal text at level AA. Yellow is the extreme case, with 1.07:1 for white text but 19.56:1 for black. Mid-gray #808080 surprises many people: it sits right in the middle of the 0–255 range, yet neither white (3.95:1) nor black (5.32:1) is balanced, because perceived brightness is not linear. Teal and #808080 are close calls, so check the exact pair you use.

Limits: values are rounded to whole numbers, and CMYK comes from a plain formula without an ICC profile, so it will not match a printed proof.

Frequently asked questions

What is the difference between RGB and HSL in CSS? ▼

Both describe the same sRGB colors. RGB mixes red, green and blue light, which is how screens work. HSL describes a color as hue (an angle on the color wheel), saturation and lightness, so making a color lighter or less saturated means changing one number. Example: hsl(30, 100%, 50%) and rgb(255, 128, 0) are the same orange, but a darker shade is simply hsl(30, 100%, 35%).

Can CMYK be converted to RGB exactly? ▼

No. RGB is additive light on a screen, CMYK is subtractive ink on paper, and the printable range depends on the inks, paper and press. The CMYK shown here comes from a plain mathematical formula without a color profile, so use it as a starting point and confirm colors with your printer's ICC profile or a proof.

How is relative luminance calculated, and what is it used for? ▼

Each sRGB channel is linearized (the gamma curve is removed) and combined as L = 0.2126 R + 0.7152 G + 0.0722 B, the formula in WCAG 2.1. The weights reflect that the eye is most sensitive to green. Contrast ratio is then (L1 + 0.05) / (L2 + 0.05) with the lighter color as L1. WCAG asks for 4.5:1 for normal text and 3:1 for large text at level AA.

Why did my value change by 1 after converting back? ▼

HSL, HSV and CMYK are shown as whole numbers, and several RGB colors map to the same rounded HSL. If you edit the HSL fields the tool keeps your HSL values and derives RGB from them, but if you then edit RGB the HSL is recomputed and can differ slightly. Hue is also undefined for grays, so it shows as 0. For exact values keep the HEX or RGB code as your source.