HEX to RGB Converter

About the HEX to RGB Converter

The HEX to RGB converter translates a six-digit hexadecimal color code (the format web browsers, Figma, and CSS expect) into four other widely-used color models: RGB decimal, HSL, CMYK, and relative luminance. Type or paste any #RRGGBB value and the converter returns the equivalent rgb() triplet, an hsl() triple, a CMYK breakdown used by print designers, and the WCAG relative luminance used by accessibility testers. Three-digit shorthand (like #0F9) is expanded automatically to #00FF99.

Designers rarely use a single color model in isolation. A web developer may need the RGB triplet for an inline style, a brand guideline may specify a Pantone or CMYK value for print, a designer exploring palettes thinks in HSL because hue and saturation are more intuitive than red/green/blue channels, and an accessibility auditor needs luminance to compute contrast ratios. This converter puts all four representations on one screen so you can move between them without context switching.

Because the conversion runs entirely client-side in JavaScript, you can paste brand colors from confidential decks or unreleased style guides without worrying that they are being logged on a server. The math is transparent: every formula is documented in the “How it works” section and you can verify any result by hand.

How It Works

HEX notation packs three 8-bit channel values into a six-character string: #RRGGBB. The first two characters are the red channel in base-16, the next two are green, and the last two are blue. Each channel ranges from 00 (0 in decimal, fully off) to FF (255, fully on). The converter parses each pair with parseInt(pair, 16) to recover the 0-255 decimal value.

The conversion to HSL is more interesting. First we normalize each channel to the 0-1 range, then find the maximum and minimum channels. Lightness L is the average of max and min. If max equals min, the color is a shade of gray and saturation/hue are both zero. Otherwise saturation S is (max-min) / (1 - |2L-1|) and hue H 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, all multiplied by 60° to land in the 0-360° range.

CMYK is a subtractive model used by printing presses. The cyan, magenta, and yellow channels are computed as (max - channel) / max for each of red, green, and blue respectively — or zero if max is zero (pure black). The black (K) channel is 1 - max/255. The result is printed as percentages because printers think in ink coverage.

Relative luminance follows the WCAG 2.x formula: each channel is gamma-decoded (linearized) using c/12.92 if c ≤ 0.03928 else ((c+0.055)/1.055)^2.4, then combined as 0.2126*R + 0.7152*G + 0.0722*B. The coefficients reflect the human eye's greater sensitivity to green light.

Worked Examples

Take the default #0A4F3A — a deep forest green. Parsing yields R=10, G=79, B=58. Converting to HSL: max=79, min=10, so lightness = (79+10)/510 = 0.175 (17%), and saturation = (79-10)/255 / (2-2*0.175) = 0.271/(1.65) = 0.164... actually 0.708 after the proper formula. Hue: max is green, so H = ((B-R)/d)/255 + 2 = (48/69)/255*... simplified, the converter reports approximately hsl(164, 78%, 17%). Try it yourself and watch the math.

Now try #FF6B35 — a warm tangerine. You get R=255, G=107, B=53, which is rgb(255, 107, 53) and hsl(14, 100%, 60%). The high saturation and 14° hue mark it as a vivid orange-red. CMYK shows high magenta and yellow ink coverage with zero cyan and zero black, which matches how an offset printer would mix the color from process inks.

Compare #FFFFFF (pure white) and #000000 (pure black). White has luminance 1.0, black has 0.0, and their contrast ratio (computed elsewhere on the site) is exactly 21:1 — the maximum possible. Mid-gray #808080 gives luminance 0.216, which is why it fails WCAG AA against both white and black backgrounds.

When to Use This Tool

• Translating a brand's HEX colors from a Figma style guide into RGB or HSL for a CSS custom property block.
• Computing the WCAG luminance value needed by the Contrast Checker to verify accessibility compliance.
• Duplicating a color from a website's stylesheet into a print designer's CMYK workspace without losing fidelity.
• Generating HSL-based variants of a brand color (e.g., “same hue, 10% lighter”) without trial-and-error in a color picker.
• Debugging why a screenshot color looks different from what the design file specifies — usually because one is sRGB and the other is in a different color space.
• Converting colors from #RGB shorthand (used in compact CSS) to the full #RRGGBB form expected by older browsers.
• Teaching color theory by showing the same perceptual color expressed in four mathematical models side by side.

Limitations & Disclaimer

This converter handles the standard sRGB color space only. It does not support wide-gamut color spaces (Display P3, Adobe RGB, Rec. 2020), ICC color profiles, or alpha-channel HEX codes (e.g., #RRGGBBAA). The CMYK conversion is a naive formula that ignores ink behavior, dot gain, and substrate — for print production always use a profile-aware tool such as Adobe Illustrator's color picker. Luminance is the WCAG relative luminance used for accessibility, not the CIE Lab L* perceived-brightness value. See our disclaimer for full terms.

Frequently Asked Questions

Last updated: July 21, 2026  ·  Author: HT99 Tools Editorial Team  ·  Reviewed by: HT99 Tools Editorial Team