Color Converter - HEX to RGB, HSL & CMYK

Color Values

Convert color codes between HEX, RGB, HSL and CMYK with a live preview. Enter a HEX, RGB or HSL value and get the other formats.

Choose a mode

Enter value

View results

Adjust visually

HEX and RGB convert exactly. HSL is rounded to whole degrees and percentages, so most colors taken through HSL and back come out a little different, by up to 5 in a red, green or blue level. How a color looks also depends on the screen or printer rendering it, and sRGB, print CMYK profiles, and paper stock all shift the result. Check a physical proof or your target display before locking in a brand color.

Formulas and sources

Each formula this calculator uses, where it comes from, and what it leaves out. "How it works" shows the same formula with your own numbers.

HEX and RGB

Every mode

Each pair of hex digits in #RRGGBB is a base-16 number from 00 to FF, which is 0 to 255 for red, green and blue. A three-digit code such as #FB0 is read as #FFBB00. HEX and RGB write the same sRGB color two ways, so they convert exactly. Codes with an alpha pair (4 or 8 digits) and color names are not accepted.

Source: Uses the notation in CSS Color Module Level 3, a W3C Recommendation [1], which specifies every RGB color in the sRGB color space of IEC 61966-2-1 [4].

RGB to HSL

Every mode

L = (max + min) ÷ 2 S = (max - L) ÷ min(L, 1 - L) H = 60° × (G - B) ÷ d, when R is largest H = 60° × ((B - R) ÷ d + 2), when G is largest H = 60° × ((R - G) ÷ d + 4), when B is largest
R
red, as 0 to 1 (0 to 255 divided by 255)
G
green, as 0 to 1
B
blue, as 0 to 1
H
hue, in degrees; 360° is added to a negative hue
S
saturation, shown as a percentage
L
lightness, shown as a percentage
d
max - min, the spread of R, G and B

max and min are the largest and smallest of R, G and B; min(L, 1 - L) is the smaller of L and 1 - L. A gray (d = 0) shows H and S as 0. H, S and L are rounded to whole numbers, and a hue can round to 360°, the same color as 0°.

Source: Uses the RGB-to-HSL conversion in CSS Color Module Level 4 [2], a Candidate Recommendation Draft, rounded to whole numbers. HSL typed in Advanced mode goes back to RGB by the conversion in CSS Color Module Level 3 [1].

RGB to CMYK

Every mode

K = 1 - max(R, G, B) C = (1 - R - K) ÷ (1 - K) M = (1 - G - K) ÷ (1 - K) Y = (1 - B - K) ÷ (1 - K)
R
red, as 0 to 1
G
green, as 0 to 1
B
blue, as 0 to 1
C
cyan
M
magenta
Y
yellow
K
black (key)

Each is shown as a whole percentage, and black (K = 1) shows C, M and Y as 0. It does not know the inks, the paper or a printer's profile, so a printed color can look quite different from the screen.

Source: Uses the naive conversion in CSS Color Module Level 5 [3], a Working Draft, which calls it necessarily approximate. Its own pair, rgb(178 34 34) and cmyk 0%, 81%, 81%, 30%, matches here.

Sources

  1. World Wide Web Consortium (W3C). CSS Color Module Level 3, sections 4.2.1, RGB color values, and 4.2.4, HSL color values. W3C Recommendation, January 18, 2022.
  2. World Wide Web Consortium (W3C). CSS Color Module Level 4, section 7.2, Converting sRGB Colors to HSL. Candidate Recommendation Draft, September 30, 2026; a draft that may change.
  3. World Wide Web Consortium (W3C). CSS Color Module Level 5, section 6.1, Naively Converting Between Uncalibrated CMYK and sRGB-Based Color. Working Draft, September 13, 2026; a draft that may change.
  4. International Electrotechnical Commission (IEC). IEC 61966-2-1:1999, Multimedia systems and equipment, Colour measurement and management, Part 2-1: Colour management, Default RGB colour space, sRGB. Edition 1.0, October 18, 1999.

What this calculator does not cover

  • It converts one sRGB color between HEX, RGB, HSL and CMYK. The CMYK value is a simple formula, not a printer's profile.
  • It does not take color names, alpha, HWB or wide-gamut colors such as Display P3.
  • It does not check color contrast or build palettes. For layout dimensions and image sizing, see the Aspect Ratio Calculator.

Sources checked on .

Help

Quick Start Guide

  1. Choose a mode: Quick (HEX), Web (HEX and RGB) or Advanced (HEX, RGB and HSL).
  2. Enter value: Type or paste your color code (e.g., #3B82F6).
  3. View results: Instantly see the color converted to all other formats, including CMYK.
  4. Adjust visually: Click the color swatch to open your browser's native color picker.
  5. Copy or export: Click copy on any result format to use it, or export this color's values as JSON, CSV or PDF.

Frequently Asked Questions

RGB (Red Green Blue) is for screens/digital (additive color). CMYK (Cyan Magenta Yellow Key) is for print (subtractive color). This tool's CMYK is the naive conversion that the CSS Color Level 5 draft calls necessarily approximate: it knows nothing of the inks or the dot gain, so a printed color can look different.
A HEX code like #FF6B2B splits into pairs: FF=255 (Red), 6B=107 (Green), 2B=43 (Blue). Each pair is a base-16 number converted to 0-255. Paste any HEX code into this converter and it gives you RGB, HSL, and CMYK instantly.
HSL (Hue, Saturation, Lightness) is intuitive for humans: CSS Color Module Level 3, a W3C Recommendation, says its advantage over RGB is that "you can guess at the colors you want, and then tweak." You can change the lightness or saturation without touching the hue. This converter shows HSL for every color, and takes HSL input in Advanced mode.
Click the color swatch in the results panel to open your browser's native color picker. Pick any color visually and every format (HEX, RGB, HSL, CMYK) updates automatically.
Yes. Use the Copy HEX, Copy RGB, Copy HSL and Copy CMYK buttons under the swatch to copy that format to your clipboard. HEX codes are ready for CSS, RGB values work in design software or JS. Copy whichever format you need for your project.
HEX and RGB are directly convertible (each HEX digit represents 4 bits), so they convert exactly. HSL is worked out from RGB with the conversion in the CSS Color specifications, rounded to whole degrees and percentages. About nine in ten colors change when taken to HSL and back: most by 1 or 2, and none by more than 5, in a red, green or blue level. Sky Blue #87CEEB shows as hsl(197, 71%, 73%), which is #89CFEB. The CMYK value is the naive conversion in the CSS Color Level 5 draft, which calls it approximate; the printed color depends on your printer, ink and paper.

Last updated