HEX to RGB Converter
Convert HEX color codes to RGB, HSL, and CMYK with the standard color-space formulas.
About the HEX to RGB Converter
This HEX to RGB Color Converter translates a hexadecimal color code into the equivalent RGB, HSL, HSV, and CMYK representations, plus WCAG relative luminance and a closest named-color match. The hex format #RRGGBB encodes three 8-bit channel values as two-character hex strings: red, green, and blue. The shorthand #RGB expands to #RRGGBB by doubling each character — #0F4 becomes #00FF44.
The hex format originated in the X11 windowing system (1987) and was adopted by HTML 3.2 (1997) and CSS Level 1 (1996). It is the most compact representation of an sRGB color — 7 ASCII characters for a full #RRGGBB or 4 for a #RGB shorthand. CSS Level 4 adds 8-digit hex (#RRGGBBAA) for alpha transparency, supported in all modern browsers (Chrome 62+, Firefox 49+, Safari 9.1+).
The various color models each have a niche: RGB for screen displays (additive light), CMYK for printing (subtractive ink), HSL/HSV for human-friendly color picking (hue, saturation, lightness/value). The WCAG relative luminance formula feeds into contrast-ratio calculations, the foundation of accessibility design.
How It Works
HEX parsing is straightforward: split the 6-character string into three 2-character pairs, and parse each pair as a base-16 integer via parseInt(pair, 16). The result is three numbers in the 0–255 range. For shorthand hex (#RGB), each character is doubled first: #0F4 becomes #00FF44 via '0F4'.split('').map(c => c+c).join('').
The HSL conversion uses the standard algorithm from the W3C: normalize each channel to [0, 1] by dividing by 255, find the max and min channels, and compute L = (max + min) / 2. If max equals min, the color is a shade of gray and H = S = 0. Otherwise, saturation is (max - min) / (1 - |2L - 1|) (equivalently, (max - min) / (2 - max - min) if L > 0.5, else (max - min) / (max + min)). Hue depends on which channel is the max: red gives ((G-B)/d) mod 6, green gives (B-R)/d + 2, blue gives (R-G)/d + 4, multiplied by 60° to land in 0–360°.
CMYK conversion: compute K = 1 - max(R, G, B)/255. If K = 1, the color is pure black and C = M = Y = 0. Otherwise, C = (1 - R/255 - K) / (1 - K), and similarly for M and Y. The result is printed as percentages because printers think in ink coverage.
The WCAG relative luminance formula is: each channel is gamma-decoded (linearized) using c/12.92 if c ≤ 0.04045 else ((c + 0.055) / 1.055)^2.4, where c is the channel normalized to [0, 1]. The combined luminance is 0.2126 * R + 0.7152 * G + 0.0722 * B, where R, G, B are the linearized channels. The coefficients reflect the eye’s greater sensitivity to green light. This luminance feeds directly into the WCAG contrast ratio used by the Contrast Checker.
Worked Examples
HEX #0A4F3A parses to R=10, G=79, B=58. HSL: H = 164° (green-cyan), S = 77%, L = 17% — a dark, saturated green. CMYK: C=87%, M=0%, Y=27%, K=69% — mostly cyan with significant black. Relative luminance: 0.0713 (very dark).
HEX #D4A017 (brand gold) parses to R=212, G=160, B=23. HSL: H = 43° (yellow-orange), S = 80%, L = 46%. WCAG luminance: 0.3617. Brightness: ‘light’. Closest named color: olive (distance 33).
HEX #FFFFFF (white) parses to R=255, G=255, B=255. All HSL values are 0 (or undefined for H); it is a pure gray. WCAG luminance: 1.0 (maximum). Closest named color: white.
HEX #000000 (black) parses to R=0, G=0, B=0. CMYK is C=0%, M=0%, Y=0%, K=100% (pure black ink). WCAG luminance: 0.0 (minimum).
When to Use This Tool
- Converting design-system hex codes into the RGB format used by canvas APIs and image-processing libraries.
- Finding HSL values for CSS gradient stops that need to match a brand color.
- Computing CMYK values for print design — though always verify against a printer’s actual ink profile (CMYK conversion is profile-dependent).
- Looking up the WCAG relative luminance of a brand color to plan accessible text-on-background combinations.
- Finding the closest CSS named color for documentation and code readability.
- Debugging color mismatches between design tools (Figma) and CSS — both use sRGB but may round differently.
- Generating shader-friendly RGB values from hex color inputs.
Limitations & Disclaimer
The converter assumes the sRGB color space (the web standard). Photoshop, Illustrator, and other design tools may use wider gamuts (Adobe RGB, Display P3, ProPhoto) — the same hex code will look slightly different in those spaces. The CMYK conversion is a naive formula; real CMYK depends on the printer’s ICC profile, ink, and paper. The closest-named-color feature uses Euclidean distance in RGB space, which does not always match human perception (use CIEDE2000 in OKLab or CIE L*a*b* for perceptually accurate matching). The 8-digit hex format with alpha is supported only in modern browsers (Chrome 62+, Firefox 49+, Safari 9.1+). See our disclaimer for full terms.
Frequently Asked Questions
What is the difference between HSL and HSV?
Both are cylindrical color models with hue (0-360°) and saturation (0-100%). The difference is the third axis: HSL uses ‘lightness’ (0% = black, 50% = pure color, 100% = white), while HSV uses ‘value’ (0% = black, 100% = pure color). HSL is more intuitive for design tools (CSS uses HSL); HSV is more common in graphics software (Photoshop, GIMP).
Why does my hex color look different in Photoshop?
Hex codes assume sRGB color space (the web standard). Photoshop may be set to Adobe RGB or ProPhoto RGB — wider gamuts that look more vivid but do not match the web. To match: set Photoshop’s working space to sRGB and disable color management for the document. Some browsers also apply color management, which can cause subtle differences.
What is WCAG relative luminance?
The relative luminance of a color, as defined by the W3C Web Content Accessibility Guidelines (WCAG) 2.2, is a weighted sum of the linearized (gamma-decoded) RGB channels. The formula <code>0.2126*R + 0.7152*G + 0.0722*B</code> approximates the human eye’s sensitivity to each color. Luminance feeds into the WCAG contrast ratio used to evaluate text legibility.
What is 8-digit hex (#RRGGBBAA)?
An extension to the hex format that includes an alpha channel (transparency). <code>#FF000080</code> is red at 50% opacity. Supported in all modern browsers (Chrome 62+, Firefox 49+, Safari 9.1+). Older browsers fall back to ignoring the alpha digits — <code>#FF000080</code> renders as <code>#FF0000</code> (full opacity red).
Can I use color names instead of hex?
Yes — CSS defines 140 named colors (red, blue, coral, salmon, etc.) that map to specific hex values. Named colors are more readable but less precise — there are only 140 of them vs. 16.7 million hex codes. The tool’s ‘closest color name’ output uses Euclidean distance in RGB space, which does not always match human perception (use CIEDE2000 for perceptually accurate matching).
How do I generate a random color in CSS?
Modern CSS supports <code>oklch(50% 0.2 240)</code> for perceptually uniform random colors. For older browsers, generate a random hex: <code>Math.floor(Math.random()*16777215).toString(16).padStart(6,'0')</code> — this gives a uniformly distributed RGB color, but most random colors look muddy brown. Better: pick a random hue and use HSL with fixed saturation/lightness.
Last updated: September 9, 2026 · Author: HT99 Tools Editorial Team