Color Converter

What are HEX, RGB, HSL, HSV and CMYK?

A color code is one color written in a particular coordinate system. Screens create color by mixing red, green and blue light, so every on-screen format ultimately comes from three RGB intensities. Which format you pick depends on what you are trying to do.

• RGB gives red, green and blue as integers from 0 to 255. With 8 bits per channel there are 256³ = 16,777,216 possible colors. In CSS you can write rgb(201 169 97) or rgb(201, 169, 97).
• HEX writes the same three numbers as two-digit hexadecimal values joined together. #C9A961 means C9 (201), A9 (169) and 61 (97), so it carries exactly the same information as RGB. A short form such as #FA0 doubles each digit and means #FFAA00.
• HSL describes a color by hue (an angle from 0 to 360 degrees on the color wheel), saturation (%) and lightness (%). It is the easiest of the three to adjust by hand: keep the hue and change the lightness to get lighter or darker versions of the same color.
• HSV (also called HSB) uses hue, saturation and value, where value is the brightness of the strongest channel. The picker in Photoshop or Figma is usually HSB. In HSL the purest color sits at L = 50%, while in HSV it sits at S = 100% and V = 100%. The "S" in the two models is not the same number, so do not mix them up.
• CMYK lists cyan, magenta, yellow and black ink amounts for printing. Inks absorb light, so mixing is subtractive and works very differently from the additive light of a screen.

The conversion formulas

Divide R, G and B by 255 to get r, g and b between 0 and 1. Let max and min be the largest and smallest of the three, and d = max − min.

• RGB → HSL: L = (max + min) / 2. If d = 0 the color is a gray, so H = 0 and S = 0. Otherwise S = d / (1 − |2L − 1|). The hue is 60° × ((g − b) / d mod 6) when red is the maximum, 60° × ((b − r) / d + 2) when green is, and 60° × ((r − g) / d + 4) when blue is. Add 360 if the result is negative.
• RGB → HSV: V = max and S = d / max (0 when max is 0). The hue is computed the same way as for HSL.
• HSL → RGB: C = (1 − |2L − 1|) × S, X = C × (1 − |(H / 60 mod 2) − 1|) and m = L − C / 2. Depending on which 60° sector H falls in, take (C, X, 0), (X, C, 0), (0, C, X), (0, X, C), (X, 0, C) or (C, 0, X), add m to each, multiply by 255 and round.
• RGB → CMYK (simple formula): K = 1 − max, C = (1 − r − K) / (1 − K), M = (1 − g − K) / (1 − K), Y = (1 − b − K) / (1 − K). For pure black (K = 1) the tool shows C = M = Y = 0.

Worked examples

Example 1: warm gold #C9A961. RGB is (201, 169, 97). Here max = 201/255 = 0.788, min = 97/255 = 0.380 and d = 0.408, so L = (0.788 + 0.380) / 2 ≈ 58% and S = 0.408 / (1 − |2 × 0.584 − 1|) ≈ 49%. Red is the maximum, so H = 60 × ((169 − 97) / 104) ≈ 42°. The result is HSL ≈ (42°, 49%, 58%), HSV with S ≈ 52% and V ≈ 79%, and CMYK by the simple formula of (0%, 16%, 52%, 21%). Against white its contrast ratio is about 2.25:1, which is too low for body text on a white page, while against black it is about 9.33:1, which is plenty.

Example 2: orange-red #FF5733. RGB (255, 87, 51) gives max = 1, min = 0.2 and d = 0.8, so L = 60% and S = 100%, and H = 60 × ((87 − 51) / 204) ≈ 10.6°, shown as 11°. HSL is about (11°, 100%, 60%), HSV (11°, 80%, 100%) and CMYK (0%, 66%, 80%, 0%). The contrast against white is about 3.15:1, above the 3:1 threshold for large text but below the 4.5:1 normally required for body text.

Example 3: pure blue #0000FF. HSL is (240°, 100%, 50%), HSV (240°, 100%, 100%) and CMYK (100%, 100%, 0%, 0%). Its contrast against white is about 8.59:1. It is a good reminder that "100%" means something different in HSL and in HSV.

Reference table: common colors

The values below were computed with the same formulas when this page was built. Paste any HEX value from the table into the converter to compare.

Why is the CMYK value only an approximation?

A screen can only show colors inside its own gamut of light, and a printed sheet can only show what its inks and paper allow, and the two ranges differ a lot. The formula above is a mathematical shortcut between the two systems and knows nothing about real inks. The same CMYK numbers look different on coated and uncoated paper, and the numbers change again once a printer's ICC profile (for example a FOGRA or SWOP family profile) is applied. Very vivid greens, oranges and blues often cannot be reproduced in CMYK at all and print duller than on screen. Use the CMYK shown here only as a rough starting point. For print work, convert in your design software with the profile your printer asks for, and confirm with a proof or a physical swatch book if the color matters.

How the contrast ratio is calculated

The Web Content Accessibility Guidelines (WCAG) judge text legibility by the contrast ratio between text and background. First each channel is linearized: for an sRGB value v between 0 and 1, use v / 12.92 when v is 0.04045 or less, otherwise ((v + 0.055) / 1.055)^2.4. Relative luminance is L = 0.2126 R + 0.7152 G + 0.0722 B, and the ratio is (lighter L + 0.05) / (darker L + 0.05). Under WCAG 2.x, level AA asks for at least 4.5:1 for normal body text and 3:1 for large text (roughly 24 px or larger, or 18.7 px or larger in bold). Level AAA asks for 7:1 and 4.5:1 respectively. This tool only shows how your chosen color fares against white and against black. To compare any two colors, use the color contrast checker.

Writing transparency in HEX

CSS accepts eight-digit HEX in the form #RRGGBBAA, where the last pair is the opacity. For an opacity of p percent, convert round(p / 100 × 255) to hexadecimal. For example 50% is 127.5, which rounds to 128, or 80 in hex, so #C9A96180 is the gold above at about half opacity. The same thing can be written as rgb(201 169 97 / 50%), which is usually easier to read.

This converter accepts three- and six-digit HEX only. If you have an eight-digit value, enter its first six digits.

How the palettes are built

The tone palette keeps your color's hue and saturation and changes only the lightness, to 90, 75, 60, 45, 30 and 15%. The complement adds 180° to the hue, and the analogous colors add 30° and subtract 30° (shown as +330°). This is purely mechanical HSL arithmetic, so it does not divide perceived brightness evenly. Yellows look much lighter than blues at the same L. Treat the palette as a starting point and check contrast before using it in an interface. For richer combinations see the color palette generator, and to look up colors that have CSS names, the CSS named colors reference.

Common mistakes and limits

• Round trips can drift slightly. H, S and L are rounded to whole numbers, so HEX → HSL → HEX can change a channel by 1 or 2. Keep HEX or RGB as the source of truth.
• A screen color is not a printed color. Brightness, color temperature and color profile settings change how the same HEX looks.
• HSL saturation is not HSV saturation. Pasting HSB values from a design tool into CSS hsl() gives a different color.
• Hue is meaningless for grays. When R = G = B the hue shows as 0 but is really undefined, and changing it has no effect because saturation is 0.
• HEX is case-insensitive. #c9a961 and #C9A961 are identical.

Putting the results to use

1. Enter the HEX from your design tool and copy the CSS rgb() or hsl() notation.
2. Convert a brand color to HSL and vary only the lightness to get hover, disabled and background tones.
3. Check that a candidate text color passes 4.5:1 against white or black, and adjust its lightness if it does not.
4. For print, take the CMYK approximation as a starting point and convert again with your printer's profile.

If you are curious about hexadecimal itself, try the number base converter; for lengths, weights and other units there is the unit converter; and for gradient code the CSS gradient generator helps.

Frequently Asked Questions

Related tools

• Color contrast checker - test text against any background
• Color palette generator - build color combinations
• CSS named colors reference - find colors by name
• CSS gradient generator - turn colors into gradient code