Color Code Converter — HEX, RGB, HSL & CMYK
Instantly convert between HEX, RGB, HSL, HSV, and CMYK color codes with live preview and one-click copy.
rgb(79, 70, 229)hsl(243, 75%, 59%)hsv(243, 69%, 90%)cmyk(66%, 69%, 0%, 10%)How color code conversion works
A HEX code such as #1E90FF is three bytes written in hexadecimal: red 1E, green 90 and blue FF. Converting each pair from base 16 gives the RGB values 30, 144 and 255, each on a 0–255 scale. The 3-digit shorthand doubles every digit, so #F80 is #FF8800.
HSL and HSV describe the same color in a way that is easier to adjust: hue is the angle on the color wheel (0° red, 120° green, 240° blue), with saturation and lightness (or value) as percentages. CMYK is the ink model used for print. The CMYK figures here are a simple formula from RGB; a printer's real values depend on its color profile and paper.
Worked examples
HEX to RGB
#4F46E5: 4F = 4 × 16 + 15 = 79, 46 = 4 × 16 + 6 = 70, E5 = 14 × 16 + 5 = 229. So the RGB value is rgb(79, 70, 229).
RGB to HEX
rgb(255, 165, 0): 255 = FF, 165 = A5 (10 × 16 + 5), 0 = 00. The result is #FFA500, the CSS named color orange.
RGB to CMYK
For rgb(255, 165, 0), K = 1 − max(1, 0.647, 0) = 0. Then C = 0%, M = 1 − 0.647 = 35% and Y = 100%, giving cmyk(0%, 35%, 100%, 0%).
CSS named colors in HEX, RGB and HSL
Values from the CSS Color Module Level 4 named-color list.
| Name | HEX | RGB | HSL |
|---|---|---|---|
| black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
| white | #FFFFFF | 255, 255, 255 | 0°, 0%, 100% |
| red | #FF0000 | 255, 0, 0 | 0°, 100%, 50% |
| lime | #00FF00 | 0, 255, 0 | 120°, 100%, 50% |
| blue | #0000FF | 0, 0, 255 | 240°, 100%, 50% |
| gray | #808080 | 128, 128, 128 | 0°, 0%, 50% |
| navy | #000080 | 0, 0, 128 | 240°, 100%, 25% |
| teal | #008080 | 0, 128, 128 | 180°, 100%, 25% |
| orange | #FFA500 | 255, 165, 0 | 39°, 100%, 50% |
| dodgerblue | #1E90FF | 30, 144, 255 | 210°, 100%, 56% |
Common mistakes
- Expecting screen colors to print the same. RGB screens can show colors CMYK ink cannot, so bright blues and greens often print duller. Ask your printer for their profile.
- Treating lime as dark green. In CSS, lime is #00FF00; the named color green is #008000.
- Leaving out the leading zero. #0F0 and #00F000 are different colors; each 6-digit code needs all six digits.
- Rounding HSL and converting back. HSL percentages are rounded to whole numbers here, so a round trip can shift a value by one step. Keep the HEX code as the master value.
Sources
Frequently asked questions
What is #FFFFFF?
#FFFFFF is pure white in HEX. The same color is RGB(255, 255, 255) or HSL(0, 0%, 100%).
How do I convert HEX to RGB?
Split the six HEX digits into three pairs (RR, GG, BB) and convert each pair from base 16 to a number from 0 to 255. For example, #1E90FF is RGB(30, 144, 255).
What is HSL?
HSL describes a color by hue (0–360° around the color wheel), saturation (0–100%) and lightness (0–100%). It is handy for making lighter or darker shades of the same color.
What is RGB(0,0,0)?
RGB(0, 0, 0) is pure black. As a HEX code it is #000000.
Why do my colors look different on screen vs print?
Screens use additive RGB. Print uses subtractive CMYK. The two color spaces don't cover the same gamut, so conversions are approximations.
What is a color code translator?
It takes a color in one notation, such as HEX, and gives the same color in others (RGB, HSL, HSV, CMYK). Type a HEX code above and every other format updates.
Is colour code the same as color code?
Yes. It is the same thing with British spelling; the HEX and RGB values do not change.
What is the RGB value of #808080?
rgb(128, 128, 128), a mid gray. In HSL it is hsl(0, 0%, 50%).