Hex to RGB Converter

A hex to RGB converter takes any hex colour code, the six-character string that starts with a hash, or sometimes the three-character shorthand, and turns it into the matching red, green, and blue channel values, along with the hue / saturation / lightness triple, the cyan / magenta / yellow / key quadruple used in print, and a single decimal number that packs all three channels into one integer. It is the single most-used utility on the front-end developer's desk because every CSS file, every design tool, and every brand guideline ultimately speaks hex. Paste the code from a Figma colour panel, an email template, a screenshot eyedropper, or a brand book, and the calculator spits out every other representation you might need.

This particular tool shows a live preview swatch alongside the numerical breakdown, so you can confirm visually that the code you typed is the code you intended. That catches the single most common error in design work: a typo that produces a valid-but-wrong colour (for example, #0FF8F0 instead of #0FF8FF, both legal hex, completely different hues). A live preview turns silent errors into obvious ones.

How to Use the Hex to RGB Converter

1. Type or paste a hex code into the input field. The leading hash is optional, and three-digit shorthand like #F80 is accepted alongside the full six-digit form #FF8800.
2. The preview swatch updates instantly as you type. The text colour on the swatch flips between dark and light automatically so the hex label stays readable on every background.
3. Read the RGB breakdown below: each channel as an integer 0 to 255, plus the canonical rgb(R, G, B) string ready to paste into CSS.
4. Read the HSL breakdown: hue as degrees 0 to 360, saturation and lightness as percentages. Use this when you want to shift the colour programmatically (for example, darkening a button on hover by reducing the lightness value).
5. Read the CMYK breakdown: each component as a percentage. Useful when handing the colour to a print shop or comparing to a Pantone reference.
6. Read the single decimal RGB value (0 to 16,777,215). This is the integer that a Number.toString(16) round-trip would produce, handy when working with canvas APIs or older code that expects packed colours.
7. Click any preset chip (Pure red, Brand orange, Tailwind blue-500, etc.) to load a known-good colour without typing.

The Formula

Hex to RGB is a base-16 to base-10 conversion applied to each pair of digits. For a six-digit code #RRGGBB, split the six characters into three pairs:

• R (red) = parseInt(RR, 16)
• G (green) = parseInt(GG, 16)
• B (blue) = parseInt(BB, 16)

Each pair represents a single 8-bit channel because two hex digits cover 16 × 16 = 256 distinct values (0 through 255). The single decimal form D = (R × 65536) + (G × 256) + B is the bit-packed version that fits in 24 bits and survives value >>> 0 round-trips in JavaScript. Three-digit shorthand #RGB expands to #RRGGBB by duplicating each digit, so #F80 becomes #FF8800.

From RGB the calculator derives HSL using the standard formula:

• Let max = max(R, G, B) / 255 and min = min(R, G, B) / 255.
• Lightness L = (max + min) / 2.
• If max === min, the colour is greyscale: hue is 0 and saturation is 0.
• Otherwise, delta d = max − min, and S = d / (2 − max − min) if L > 0.5, else d / (max + min).
• Hue is computed per dominant channel and normalised to 0 to 360 degrees.

CMYK is simpler: K = 1 − max(R, G, B) / 255, then each of C, M, Y = (1 − channel − K) / (1 − K). All four are reported as percentages. Pure black (#000000) short-circuits to K=100% and the others to 0%.

Real-World Worked Examples

Example 1, Brand orange #FF8800

A designer has been told to use the brand orange #FF8800 on a CTA button. They want to know what each CSS channel should be and how dark to make it on hover.

• Red: parseInt('FF', 16) = 255
• Green: parseInt('88', 16) = 8 × 16 + 8 = 136
• Blue: parseInt('00', 16) = 0
• HSL: hue ≈ 32°, saturation 100%, lightness 50%, a vivid pure orange.
• CMYK: cyan 0%, magenta 47%, yellow 100%, key 0%, useful when the same colour has to appear on a printed brochure.
• Decimal: 255 × 65536 + 136 × 256 + 0 = 16,711,680.

To darken the button on hover, the designer drops the HSL lightness from 50% to 40% in code. The calculator's HSL breakdown makes that one-line edit obvious.

Example 2, Tailwind blue-500 #3B82F6

A team is migrating off a hand-rolled colour palette and wants to confirm that #3B82F6 really is the Tailwind blue-500 they remember.

• Red: parseInt('3B', 16) = 3 × 16 + 11 = 59
• Green: parseInt('82', 16) = 8 × 16 + 2 = 130
• Blue: parseInt('F6', 16) = 15 × 16 + 6 = 246
• HSL: hue ≈ 217°, saturation 84%, lightness 60%, a saturated mid-blue with enough lightness to read as a primary action colour on a white background.
• CMYK: cyan ≈ 76%, magenta ≈ 47%, yellow 0%, key ≈ 4%, the small key component is what keeps the blue from looking chalky on uncoated paper.
• Decimal: 59 × 65536 + 130 × 256 + 246 = 3,879,414.

Example 3, Mid grey #808080 and the three-digit shorthand

#808080 is the mid-grey that shows up in every designer's "50% grey" pattern. The three-digit shorthand #888 resolves to exactly the same colour because the expansion duplicates each digit (#888 → #888888). Both inputs produce:

• Red, green, blue all equal 128.
• HSL: hue 0, saturation 0, lightness 50%.
• CMYK: cyan 0%, magenta 0%, yellow 0%, key 50%, exactly the breakdown a printer expects for a true neutral grey.

This case is a useful sanity check: any input that produces R = G = B should always give H = S = 0% in HSL and a pure K value in CMYK. If it does not, the conversion code has a bug.

Example 4, Pure blue #0000FF and a brightness gotcha

#0000FF looks almost black on a low-quality monitor because pure blue has the lowest perceived luminance of the three primaries. The calculator exposes this directly:

• Red = 0, green = 0, blue = 255.
• HSL: hue 240°, saturation 100%, lightness 50%, same lightness as #00FF00, but the perceived brightness is dramatically different.
• Decimal: 255.

A text label set in pure blue on a white background will fail most WCAG contrast checks even though both colours sit at "the extremes" of the HSL cylinder. This is why brand systems almost never use #0000FF directly; they shift it toward something like #1D4ED8 (Tailwind's blue-700) to lift the perceived brightness into a readable range.

Where Hex Codes Show Up

Hex codes appear wherever a colour needs to be specified in plain text. CSS files list brand colours as hex strings in custom-property declarations, Tailwind config files map theme.colors.brand to a hex value, and SVG attributes embed hex inside fill and stroke. Design tools (Figma, Sketch, Adobe XD, Affinity) display the active selection as a hex code in their colour panel because that is what you paste into CSS.

Brand guidelines typically publish an official hex value alongside Pantone, CMYK, and RGB references, so the same colour can be reproduced on screen, on a billboard, on a tote bag, and on a business card. The web and product teams use the hex; the print shop uses the CMYK. Email templates still rely on hex because many email clients ignore hsl() or color(). Accessibility tools accept hex as input and compute the contrast ratio against another hex.

Common Mistakes When Converting Hex

Mistake 1: Forgetting the hash. Some tools and CSS functions accept unprefixed hex, others do not. The CSS background: FF8800; line is invalid, you need background: #FF8800;. Always include the hash when writing CSS by hand. The converter accepts either form, but the source file should be unambiguous.

Mistake 2: Treating 3-digit shorthand as a different format. #F80 is not a different colour than #FF8800; it is the same colour in a shorter notation. Some designers assume #F80 is darker because there are fewer digits. It is not, the expansion duplicates each digit, so #F80 and #FF8800 produce identical RGB, HSL, and CMYK.

Mistake 3: Comparing colours by hex string instead of by perceived brightness. #0000FF and #00FF00 are "different colours" but they are not "different brightnesses" in any perceptual sense. Pure blue is much darker to the human eye than pure green at the same HSL lightness. Use a contrast checker or the perceived luminance formula when pairing foreground and background colours, not the hex strings themselves.

Mistake 4: Assuming CMYK equals the screen colour. Hex describes an additive (RGB) colour that a monitor emits. CMYK describes a subtractive (ink) colour that paper reflects. A print shop will not be able to reproduce #3B82F6 exactly because that vivid blue is outside the CMYK gamut, the CMYK reading is the closest reproducible approximation, not a guarantee of a pixel-perfect match.

Mistake 5: Treating leading zeros as cosmetic. A hex channel like 0F has a leading zero; that zero is part of the value. parseInt('0F', 16) = 15, the same as parseInt('F', 16) would return in a different context. Always treat the hex string as exactly six characters (or three in shorthand) when checking length, never trim.

Frequently Asked Questions

What is the difference between hex and RGB? Hex and RGB describe the same colour using different notations. RGB lists three decimal integers, one per channel (for example, rgb(255, 136, 0)). Hex packs the same information into six characters using base-16 digits (#FF8800). They are interchangeable in CSS and design tools; the conversion is purely a base change from decimal to hexadecimal for each channel.

Does the hash sign matter? The hash is required in CSS and in most design contexts, but the calculator accepts both #FF8800 and FF8800 and treats them identically. If you paste the unprefixed string into a CSS property without adding the hash, the browser will reject the value as invalid.

What does three-digit shorthand mean? Three-digit shorthand like #F80 is a compact form that the CSS specification expands by duplicating each digit, so #F80 becomes #FF8800 and #ABC becomes #AABBCC. Both notations refer to the same colour, but the six-digit form is required when you need a specific value that cannot be expressed by three digits (such as #3B82F6, there is no shorthand for that blue).

How is hex converted to HSL? Hex is first converted to RGB by interpreting each pair of digits as a base-16 integer 0 to 255. From RGB, the standard HSL formula is applied: lightness is the average of the maximum and minimum channels normalised to 0 to 1, saturation depends on the difference between channels, and hue is computed from the dominant channel and rotated onto the colour wheel. The calculator does both conversions and shows every intermediate value.

What is the single decimal RGB value used for? The decimal RGB value packs all three channels into a single 24-bit integer, computed as (R × 65536) + (G × 256) + B. This is the form used by older APIs, by HTML bgcolor attributes, and by canvas libraries that accept a packed integer. In JavaScript, you can convert back to hex with value.toString(16).padStart(6, '0').

Can hex codes represent every visible colour? Hex codes represent every 24-bit RGB colour, about 16.7 million distinct values. That covers every colour a typical monitor can display because consumer displays use 8 bits per channel. Hex cannot represent colours outside the sRGB gamut (such as some printable spot colours or wider-gamut display primaries), but for everyday screen work it is effectively unlimited.

Is hex case-sensitive? No. CSS treats #FF8800 and #ff8800 as the same colour. The calculator accepts both forms and normalises them internally. Uppercase hex is traditional in print and design (Adobe products display uppercase), while lowercase is common in code; pick one convention per project for consistency but the colours themselves are identical.

Why does my brand's CMYK look duller than the hex? CMYK cannot reproduce every hex colour because the screen uses additive light and the printer uses subtractive ink. Vivid blues, electric greens, and saturated oranges often fall outside the CMYK gamut and have to be approximated. The CMYK reading in this calculator is the closest reproducible match, but it is not a guarantee of an identical print result.

How does this converter handle invalid input? If the input is not a valid 3- or 6-digit hex string (for example, contains non-hex characters, has the wrong length, or is empty), the calculator shows an error message and the preview reverts to the previously valid colour so the interface does not break. The decimal and HSL/CMYK rows are hidden until the input becomes valid again.

Can I use this tool for print work? The RGB, HSL, and decimal breakdowns are screen-oriented. The CMYK breakdown is a useful approximation for printers, but a serious print job should be colour-managed through a profile-aware workflow (Adobe colour settings, ICC profiles, calibrated monitor). Use this converter for early exploration and reference; confirm the final CMYK with your printer.

What professional use cases does this converter support? This converter supports front-end development (CSS, Tailwind config, inline styles), design system documentation (showing brand colours in every format alongside each other), email template authoring (hex is the safest cross-client colour format), accessibility auditing (deriving perceived luminance from RGB), print handoff (CMYK approximation), and code review (confirming a pasted colour matches a brand sheet without launching a full design tool).

How often is the conversion math updated? The conversion math follows the W3C CSS Color Module Level 4 specification and the standard HSL/HSV/RGB algorithms documented in computer graphics textbooks since the 1970s. These formulas do not change, so the converter's output is stable. If the W3C introduces a new colour format (such as oklch() or color(display-p3 ...)), those would be added in a future update without changing the hex / RGB / HSL / CMYK behaviour shown today.

Also try these free tools:

• Color Converter, Convert any colour format to any other
• Contrast Ratio Checker, Verify WCAG accessibility
• Hex to Decimal, Convert hex numbers to decimal

Inputs and Their Effects

The single hex input on this calculator drives every visible output simultaneously. There are no dropdowns to switch units, no secondary fields, and no mode toggle, the hex value is the source of truth, and every other representation (RGB channels, HSL triple, CMYK quadruple, decimal integer, hex label on the preview swatch) is derived from it. Because all conversions are pure functions of the same six characters, changing one character of the input changes every output in lockstep. Lowercase and uppercase hex produce identical results. Three-digit shorthand expands to its six-digit equivalent before any further math runs, so the output for #F80 and #FF8800 is identical. Invalid input (any string that is not 3 or 6 hex digits, with or without a leading hash) freezes the preview on the last valid colour and surfaces a red error message, the underlying state does not corrupt, and recovering from the typo means simply typing the correct character.

Hex Codes vs Other Colour Systems

Hex codes are one of several ways to describe an sRGB colour. The alternatives include rgb(R, G, B) for CSS, rgba(R, G, B, A) when transparency is needed, hsl(H, S%, L%) for hue-based manipulation, and the modern color(srgb R G B) and oklch(L C H) functions. Each has strengths: hex is compact and round-trips with the underlying binary, RGB is explicit, HSL makes lightness adjustments trivial, and OKLCH gives perceptually uniform lightness. For brand assets, hex remains the dominant choice because every tool in the chain accepts it and there is no ambiguity about the colour space (hex is implicitly sRGB). When you need transparency, the calculator's RGB output can be wrapped in rgba(...) with a fourth value.

How the Math Works in Practice

Underneath the form, the calculator does three small pieces of arithmetic. First, it normalises the input string, trims whitespace, strips a leading hash, lowercases everything, and expands three-digit shorthand to six digits. Second, it parses each pair of digits as a base-16 integer using the built-in parseInt(s, 16) so that 'FF' becomes 255, '88' becomes 136, and '00' becomes 0. Third, it runs the standard HSL and CMYK formulas against those three integers. Each step is lossless until the final rounding to two decimal places for display; the underlying computation carries full IEEE 754 precision, so re-running the calculator with the same input always produces the same output. Floating-point rounding is invisible at the integer level (which is what HSL hue and CMYK percentages produce after Math.round) and only affects the lightness value when the input is a pure grey, where the standard formula returns exactly 50.0.

Practical Tips for Working with Hex

A few habits make hex work faster across all kinds of inputs. First, copy hex codes directly from the source, the design tool, the brand book, the colour picker, rather than retyping them. A single wrong character produces a valid-but-wrong colour, which is the most common silent failure in design work. Second, prefer six-digit hex in shared documents because three-digit shorthand cannot express every colour and a reader cannot tell at a glance whether #888 was intended as #888888 or as a typo for #888000. Third, store hex values in a single source of truth (a CSS custom property, a Tailwind theme entry, a JSON design token) so a brand change only requires editing one place. Fourth, when adjusting a colour programmatically, switch to HSL first, lowering the lightness by 10% produces a visually consistent darkening, while reducing each RGB channel by the same amount does not. Fifth, run a contrast check before publishing any text-on-background combination, because hex equality tells you nothing about readability.

Troubleshooting Unexpected Results

If the preview swatch does not match the colour you expected, walk through a quick diagnostic before assuming the calculator is wrong. First, count the characters: hex is exactly 3 or 6 digits after the optional hash, never 4 or 5. A common typo is to type #FF880 (five digits) instead of #FF8800 (six digits), which the parser correctly rejects. Second, check the digits themselves: every character must be 0 to 9 or a-f. Letters like g, h, or z are not valid hex, and the parser will flag them. Third, look at the case: #FF8800 and #ff8800 are the same colour, but a typo like #FF880O (capital-O instead of zero) is an invalid hex string and will be rejected. Fourth, check the leading hash: #FF8800 is valid CSS, FF8800 is not, but this calculator accepts both. Fifth, if the CMYK value looks suspiciously rounded (for example, K = 50% for a colour that does not look like pure grey), confirm the input is actually the intended colour by comparing the RGB output to a reference. If the RGB matches and the CMYK still surprises you, the colour is genuinely at the edge of the CMYK gamut, that is not a bug, it is a limitation of the print process.

Related Concepts and Where This Fits

Understanding where hex sits among related concepts helps with both interpretation and choosing the right tool for a new problem. Hex is one notation for sRGB; the same colour can also be expressed as rgb(R, G, B), as an HSL triple, as an OKLCH triple, or as a single decimal integer. The calculator's HSL output is the natural starting point if you want to derive lighter, darker, more saturated, or less saturated variants of the input, adjust the lightness value by ±10% and you get a perceptually consistent tint or shade. The CMYK output is the natural starting point for print handoff, though a colour-managed workflow will produce more accurate results than this approximation. The decimal output is the natural starting point for canvas APIs and any code that wants to manipulate the colour as a single 32-bit integer. Together with a contrast checker and a colour palette generator, this converter is one of three tools that cover most of the day-to-day work of a designer or front-end developer.