Convert HEX to RGB, HSL, and CMYK color codes instantly. Learn how color systems work in CSS and design with practical examples and a free online converter.
Every web developer has been there. A designer hands you a color — maybe #3B82F6 — and you need it as an rgb() value for a CSS variable, or as HSL for a theme system, or as CMYK for a print stylesheet. You open a search tab, paste the hex code into the first converter that appears, copy the result, and move on. Then you do it again ten minutes later for another color. And again.
This is a guide for developers who want to stop blindly converting and start actually understanding what those numbers mean. When you know how HEX, RGB, HSL, and CMYK relate to each other, you can do mental conversions, spot errors in color values at a glance, and make better decisions about which format to use where. And when you need precision, you can use a proper converter tool instead of guessing.
HEX color codes are the most common way to specify colors on the web. The format is a # followed by six hexadecimal characters (0-9 and A-F), split into three pairs. Each pair represents one channel: red, green, and blue.
Akousa#3B82F6
││ ││ ││
││ ││ └┘ Blue: F6 = 246
││ └┘ Green: 82 = 130
└┘ Red: 3B = 59Hexadecimal is base-16 numbering. Each digit can be 0 through F (where A=10, B=11, C=12, D=13, E=14, F=15). A two-digit hex value ranges from 00 (which is 0 in decimal) to FF (which is 255 in decimal). So each channel can express 256 levels of intensity, and the total number of possible colors is 256 x 256 x 256 = 16,777,216.
CSS allows a three-character shorthand for hex colors where each digit is repeated:
#F80 /* expands to #FF8800 */
#333 /* expands to #333333 */
#ACE /* expands to #AACCEE */This only works when each pair in the full hex code has two identical digits. #3B82F6 has no shorthand equivalent because none of its channel pairs have matching digits.
Modern CSS supports an eight-digit hex format (or four-digit shorthand) where the last pair represents alpha transparency:
#3B82F680 /* 50% transparent blue — 80 hex = 128 decimal = ~50% alpha */
#FF000040 /* 25% transparent red — 40 hex = 64 decimal = ~25% alpha */
#0000 /* fully transparent shorthand — expands to #00000000 */The alpha channel follows the same 00-FF range, where 00 is fully transparent and FF is fully opaque. Browser support for 8-digit hex is universal in modern browsers.
RGB stands for Red, Green, Blue. It uses the same underlying color model as HEX — three channels with values from 0 to 255 — but expressed in decimal instead of hexadecimal.
/* These are identical colors */
color: #3B82F6;
color: rgb(59, 130, 246);The conversion from HEX to RGB is pure base conversion. Each hex pair becomes a decimal number between 0 and 255:
3B in hex = (3 x 16) + 11 = 48 + 11 = 5982 in hex = (8 x 16) + 2 = 128 + 2 = 130F6 in hex = (15 x 16) + 6 = 240 + 6 = 246Result: rgb(59, 130, 246)
CSS Color Level 4 introduced a new syntax for rgb() that drops the commas and uses a slash for alpha:
/* Legacy syntax (still works) */
color: rgba(59, 130, 246, 0.5);
/* Modern syntax */
color: rgb(59 130 246 / 0.5);
color: rgb(59 130 246 / 50%);Both syntaxes are valid in all modern browsers. The modern syntax is more consistent with how other CSS functions like hsl() and lab() are written.
To convert any hex pair to decimal manually:
Decimal = (first_digit x 16) + second_digit
Where hex digits map to: A=10, B=11, C=12, D=13, E=14, F=15.
Quick mental shortcuts:
00 is always 0FF is always 25580 is 128 (the midpoint)CC is 204 (a common light gray channel)33 is 51 (a common dark gray channel)Memorizing a few of these makes it much faster to eyeball a hex code and understand what color it represents.
HSL stands for Hue, Saturation, Lightness. Unlike HEX and RGB which describe color as a mixture of light channels, HSL describes color in terms of how humans perceive it.
color: hsl(217, 91%, 60%);HSL is the most intuitive format for creating color variations. Need a darker version of your brand blue? Reduce the lightness. Need a muted version? Lower the saturation. Need a complementary color? Add 180 to the hue.
:root {
/* Base brand color */
--brand-h: 217;
--brand-s: 91%;
/* Generate a full palette from one hue */
--brand-50: hsl(var(--brand-h), var(--brand-s), 97%);
--brand-100: hsl(var(--brand-h), var(--brand-s), 93%);
--brand-200: hsl(var(--brand-h), var(--brand-s), 86%);
--brand-300: hsl(var(--brand-h), var(--brand-s), 76%);
--brand-400: hsl(var(--brand-h), var(--brand-s), 68%);
--brand-500: hsl(var(--brand-h), var(--brand-s), 60%);
--brand-600: hsl(var(--brand-h), var(--brand-s), 48%);
--brand-700: hsl(var(--brand-h), var(--brand-s), 38%);
--brand-800: hsl(var(--brand-h), var(--brand-s), 30%);
--brand-900: hsl(var(--brand-h), var(--brand-s), 20%);
}Try doing that with HEX or RGB — you would need to recalculate every channel for every shade. With HSL, you only change the lightness value.
The conversion from RGB to HSL (and therefore from HEX to HSL, since HEX-to-RGB is trivial) requires a few more steps:
L = (max + min) / 2L <= 0.5: S = (max - min) / (max + min)L > 0.5: S = (max - min) / (2.0 - max - min)H = (G - B) / (max - min)H = 2.0 + (B - R) / (max - min)H = 4.0 + (R - G) / (max - min)Worked example for #3B82F6 (R=59, G=130, B=246):
Normalized: R=0.231, G=0.510, B=0.965
Max=0.965 (B), Min=0.231 (R)
L = (0.965 + 0.231) / 2 = 0.598 → 60%
S = (0.965 - 0.231) / (2.0 - 0.965 - 0.231) = 0.734 / 0.804 = 0.913 → 91%
H = 4.0 + (0.231 - 0.510) / (0.965 - 0.231) = 4.0 + (-0.380) = 3.620
H = 3.620 x 60 = 217°
Result: hsl(217, 91%, 60%)
This is why people use converter tools.
CMYK stands for Cyan, Magenta, Yellow, Key (black). It is a subtractive color model used in print design. While CSS does not natively support CMYK values, you may need CMYK conversions when preparing web assets for print, creating brand guidelines that span digital and physical media, or exporting designs to formats like PDF.
R' = R / 255, G' = G / 255, B' = B / 255
K = 1 - max(R', G', B')
C = (1 - R' - K) / (1 - K)
M = (1 - G' - K) / (1 - K)
Y = (1 - B' - K) / (1 - K)
For #3B82F6 (R=59, G=130, B=246):
R'=0.231, G'=0.510, B'=0.965
K = 1 - 0.965 = 0.035
C = (1 - 0.231 - 0.035) / (1 - 0.035) = 0.761
M = (1 - 0.510 - 0.035) / (1 - 0.035) = 0.471
Y = (1 - 0.965 - 0.035) / (1 - 0.035) = 0.000
Result: cmyk(76%, 47%, 0%, 4%)
Note that CMYK conversions from RGB are approximations. True CMYK values depend on ICC color profiles specific to the printer and paper stock. The formula above gives a reasonable starting point but professional print workflows need proper color management.
CSS defines 148 named colors that you can use directly in stylesheets. These are convenient for prototyping and readable code, but they have fixed values that rarely match a brand palette exactly.
Here are some commonly used named colors with their hex and RGB equivalents:
/* Reds */
color: red; /* #FF0000 — rgb(255, 0, 0) */
color: crimson; /* #DC143C — rgb(220, 20, 60) */
color: tomato; /* #FF6347 — rgb(255, 99, 71) */
color: coral; /* #FF7F50 — rgb(255, 127, 80) */
/* Blues */
color: blue; /* #0000FF — rgb(0, 0, 255) */
color: dodgerblue; /* #1E90FF — rgb(30, 144, 255) */
color: steelblue; /* #4682B4 — rgb(70, 130, 180) */
color: navy; /* #000080 — rgb(0, 0, 128) */
/* Greens */
color: green; /* #008000 — rgb(0, 128, 0) */
color: limegreen; /* #32CD32 — rgb(50, 205, 50) */
color: seagreen; /* #2E8B57 — rgb(46, 139, 87) */
color: teal; /* #008080 — rgb(0, 128, 128) */
/* Neutrals */
color: white; /* #FFFFFF — rgb(255, 255, 255) */
color: black; /* #000000 — rgb(0, 0, 0) */
color: gray; /* #808080 — rgb(128, 128, 128) */
color: silver; /* #C0C0C0 — rgb(192, 192, 192) */A useful trick: CSS named colors work well as fallback values in var() functions:
.card {
background-color: var(--card-bg, whitesmoke);
}CSS Color Level 4 and Level 5 introduce several new color spaces that go beyond the sRGB gamut of traditional HEX and RGB. These are worth knowing about because they solve real problems.
OKLCH (Lightness, Chroma, Hue in the Oklab perceptual color space) is quickly becoming the preferred format for design tokens and theme systems:
color: oklch(63% 0.21 255);
/* L C H
Lightness: 63% (perceptually uniform)
Chroma: 0.21 (saturation analog, 0 to ~0.37)
Hue: 255 (degrees on color wheel)
*/The key advantage of OKLCH over HSL is perceptual uniformity. In HSL, a yellow at 50% lightness looks much brighter than a blue at 50% lightness. OKLCH corrects for this — colors at the same L value actually appear equally bright to the human eye. This means you can generate palettes programmatically and get consistent visual results.
The color() function with the display-p3 color space accesses a wider range of colors than sRGB can represent:
.vibrant-button {
/* Fallback for browsers that don't support P3 */
background-color: #3B82F6;
/* P3 color — more vivid on supporting displays */
background-color: color(display-p3 0.23 0.51 0.96);
}P3 covers roughly 25% more of the visible color spectrum than sRGB. On devices with P3 displays (most modern phones and MacBooks), these colors appear noticeably more vivid. On sRGB displays, the browser maps them to the closest sRGB equivalent.
Here is a quick-reference table for common color values across all formats:
Color | HEX | RGB | HSL | OKLCH
------------------------------------------------------------------------
Pure Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | oklch(63% 0.29 29)
Pure Green | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | oklch(87% 0.29 142)
Pure Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | oklch(45% 0.31 264)
Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | oklch(97% 0.21 110)
Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) | oklch(91% 0.15 195)
Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) | oklch(70% 0.32 328)
White | #FFFFFF | rgb(255, 255, 255)| hsl(0, 0%, 100%) | oklch(100% 0 0)
Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | oklch(0% 0 0)
Mid Gray | #808080 | rgb(128, 128, 128)| hsl(0, 0%, 50%) | oklch(60% 0 0)
Notice how perceptual lightness in OKLCH differs from the "mathematical" lightness in HSL. Pure blue has an HSL lightness of 50% but an OKLCH lightness of only 45% because blue genuinely looks darker to human eyes than red or green at the same mathematical intensity.
A color that looks readable on your monitor may fail WCAG contrast requirements. Always verify that your text-background combination meets at least a 4.5:1 contrast ratio for normal text (AA level) or 7:1 for enhanced accessibility (AAA level).
/* Dangerous — may not have enough contrast */
.badge {
background-color: #3B82F6;
color: #000000; /* contrast ratio: 3.5:1 — fails AA */
}
/* Fixed — white text on this blue passes AA */
.badge {
background-color: #3B82F6;
color: #FFFFFF; /* contrast ratio: 4.7:1 — passes AA */
}Mixing #3B82F6, rgb(59, 130, 246), and hsl(217, 91%, 60%) for the same color in different files makes maintenance a nightmare. Pick one format for your design tokens and stick with it. If your project uses a theme system, define colors once as CSS custom properties:
:root {
--blue-500: #3B82F6;
}
/* Everywhere else, reference the variable */
.button { background-color: var(--blue-500); }
.link { color: var(--blue-500); }When you use opacity on a parent element, all children become transparent too. If you only want the background to be transparent, use the alpha channel in your color value instead:
/* Bad — makes text transparent too */
.overlay {
background-color: #000000;
opacity: 0.5;
}
/* Good — only the background is transparent */
.overlay {
background-color: rgb(0 0 0 / 0.5);
}CSS now supports relative color syntax, which lets you derive new colors from existing ones without a preprocessor:
:root {
--brand: #3B82F6;
}
.button-hover {
/* Make the brand color 20% darker */
background-color: hsl(from var(--brand) h s calc(l - 20%));
}
.button-disabled {
/* Desaturate the brand color */
background-color: hsl(from var(--brand) h calc(s - 50%) l);
}This is supported in Chrome, Edge, and Safari as of 2026. It eliminates the need for pre-calculated color palettes in many cases.
Choosing the right color format depends on context:
Use HEX when:
Use RGB when:
rgb() functionUse HSL when:
Use OKLCH when:
Use CMYK when:
If you need to convert colors programmatically in your application, here are clean implementations:
function hexToRgb(hex) {
const clean = hex.replace('#', '');
const full = clean.length === 3
? clean.split('').map(c => c + c).join('')
: clean;
const num = parseInt(full, 16);
return {
r: (num >> 16) & 255,
g: (num >> 8) & 255,
b: num & 255,
};
}
console.log(hexToRgb('#3B82F6'));
// { r: 59, g: 130, b: 246 }function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const l = (max + min) / 2;
if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) };
const d = max - min;
const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
let h;
if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
else if (max === g) h = ((b - r) / d + 2) / 6;
else h = ((r - g) / d + 4) / 6;
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
l: Math.round(l * 100),
};
}
console.log(rgbToHsl(59, 130, 246));
// { h: 217, s: 91, l: 60 }These functions handle edge cases like shorthand hex codes and achromatic colors correctly.
While understanding the math behind color conversion is valuable, in daily workflow you want a tool that does the conversions instantly and accurately. The color converter tools on akousa.net handle all of these conversions — HEX to RGB, RGB to HSL, HSL to HEX, and CMYK — in a single interface. Paste any color value and get all other formats immediately, along with a visual preview of the color.
Beyond simple conversion, color tools can help you:
The akousa.net tool suite includes gradient generators, shadow generators, and other CSS visual tools that pair well with a color converter when you are building out a design system or prototyping UI components.
Color conversion is not complicated once you understand the underlying models. HEX and RGB are the same thing in different bases. HSL rearranges that information into a more human-friendly format. CMYK is a different physical model for ink-based reproduction. And newer spaces like OKLCH solve perceptual uniformity problems that HSL cannot.
For everyday development: use HEX for static values in your stylesheet, HSL or OKLCH for theme systems that need programmatic shade generation, and keep a reliable converter tool within reach for everything else. The time you save on each conversion adds up across hundreds of color decisions in a project.
The most important thing is consistency. Choose one primary format for your codebase, define your colors in a single location, and use variables everywhere else. Your future self and your teammates will thank you.