🔄 HEX to RGB Converter

Last updated: April 30, 2026

HEX to RGB Converter

Enter a HEX color code or pick from the palette — get RGB, HSL & CMYK instantly.

Invalid HEX code. Use format #RRGGBB or #RGB (e.g. #3b82f6 or #fff).
RGB
HSL
CMYK
HEX

HEX to RGB and Beyond: Understanding Color Format Conversion for Web, Design, and Print

Every designer, developer, or digital artist eventually runs into the same problem: you have a color in one format and need it in another — fast. Maybe your brand kit specifies #E63946 but your CSS animation uses rgb() values, or your printer demands CMYK percentages and your mockup file only has HSL. Color format conversion is one of those "annoying small tasks" that adds up to real lost time if you don't have the right tool handy.

This guide breaks down what each color format actually means, when to use which one, and the math behind the conversions — so you're not just copying numbers blindly, but understanding what they represent.

What Is a HEX Color Code, Really?

HEX (hexadecimal) color codes are the shorthand the web was built on. A code like #3B82F6 is really three pairs of base-16 numbers: 3B for red, 82 for green, F6 for blue. Each pair ranges from 00 (0 in decimal) to FF (255 in decimal), which is exactly the same 0–255 range RGB uses — just written differently.

Short HEX codes like #FFF or #09C are shorthand where each digit is doubled: #F = #FF, #09C = #0099CC. Both forms describe exactly the same 16.7 million colors available in 8-bit-per-channel color.

RGB: The Format Browsers Actually Think In

RGB stands for Red, Green, Blue — three channels, each 0 to 255. CSS accepts rgb(59, 130, 246) directly, and it's often easier to reason about slight adjustments: bump the red value up by 20, and you know the color shifts warmer. HEX is compact but less readable for on-the-fly tweaking.

The conversion from HEX to RGB is just a base-16 to base-10 parse. #3B → 3×16 + 11 = 59. #82 → 8×16 + 2 = 130. #F6 → 15×16 + 6 = 246. So #3B82F6 = rgb(59, 130, 246). No approximations involved — it's a lossless conversion both ways.

HSL: The Designer's Favorite

HSL stands for Hue, Saturation, Lightness. It's the format that actually matches how humans think about color. Hue is the "color wheel position" in degrees (0°=red, 120°=green, 240°=blue, 360°=red again). Saturation is how vivid vs. grey the color is (0% = pure grey, 100% = fully saturated). Lightness is how light or dark (0% = black, 50% = pure color, 100% = white).

Why does this matter? Because in CSS, creating a hover effect or a tint of your brand color becomes intuitive: just add 10% lightness or reduce saturation by 20%. With HEX or RGB you'd be guessing. HSL is especially powerful in CSS custom properties and design tokens where you want a color family from one base hue.

The HSL conversion is slightly more involved. First normalize RGB values to 0–1. Find the max and min channel values — their average is lightness. The difference (max−min) divided by appropriate denominators gives saturation. Hue depends on which channel is dominant and the ratio of the other two. The math resolves to a clean 0–360° angle.

CMYK: When Your Design Goes to Print

CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in physical printing. Unlike RGB which adds light together (additive), CMYK subtracts from white paper (subtractive). A 100% cyan ink absorbs red light, reflecting green and blue. Combining all four at 100% gives near-black.

The conversion from RGB to CMYK involves finding the "key" (black) value first: K = 1 − max(R',G',B') where R', G', B' are normalized to 0–1. Then C = (1−R'−K)/(1−K), and so on for M and Y. Pure black rgb(0,0,0) becomes cmyk(0%, 0%, 0%, 100%) — just key ink, no color inks wasted.

Important caveat: RGB-to-CMYK conversion done mathematically (as this tool does) gives a close approximation, but professional print workflows use ICC profiles and color management software (like Adobe InDesign or Photoshop) to handle gamut differences. Screen colors can be more vivid than what ink on paper can reproduce — some neon RGB colors simply don't exist in the CMYK gamut. Use this tool to get the starting CMYK values, then verify with a print proof.

Practical Scenarios Where This Tool Saves Time

Matching client brand colors in CSS: Your client hands you a brand PDF with Pantone swatches and CMYK values. You need the HEX to use in their website's CSS. Or vice versa — your developer gives you a HEX from the existing site and you need to recreate it in a print brochure. One conversion bridges both worlds.

CSS animations and transitions: CSS transitions work natively with rgb() and hsl() notation. If you're building a gradient that shifts between two colors in CSS keyframes, having the HSL versions lets you create perceptually smooth transitions — changing only the hue while keeping lightness constant, for instance.

Accessibility contrast checking: Tools that calculate WCAG contrast ratios work in RGB. Converting your HEX brand colors to RGB (or using relative luminance formulas on the RGB values) is the first step to verify your text meets AA or AAA contrast standards.

Design system token generation: When building design tokens for a component library, you often want a scale of 10 shades from a single brand color. Starting from HSL, systematically varying lightness from 95% down to 10% is clean and predictable. Convert your brand HEX to HSL first, then generate the scale.

Quick Tips for Working With Color Codes

Always include the # prefix in HEX: Some tools accept bare hex like 3B82F6, others require #3B82F6. The hash is part of the syntax in CSS. Habit of including it avoids "why isn't this working" moments.

Use 3-digit HEX when both digits match: #FFFFFF = #FFF, #336699 can't be shortened (digits don't pair up), but #AABBCC = #ABC. The short form cuts file size in large CSS files — a small but real optimisation.

HSL 0% saturation colors are perfect greys: hsl(0, 0%, 50%), hsl(240, 0%, 50%), hsl(120, 0%, 50%) — they're all the same medium grey. The hue is irrelevant at zero saturation. This is why HSL is predictable for neutral color generation.

CSS now supports oklch() and lab(): Modern browsers support perceptual color spaces like oklch() and lab() which are even more uniform than HSL. But HEX and RGB remain the universal baseline — every tool, library, and browser supports them without question.

The Color Picker Advantage

Using the color picker input alongside the HEX field (as this converter provides) closes the loop between visual and code. You see a color you like — anywhere, in any design tool — grab its HEX, paste it in, and immediately have all four formats ready to use. The live swatch confirms you're looking at the right color before you copy the output, eliminating transcription errors.

Color format conversion is one of those tasks that feels trivial until you're doing it ten times in a row for a brand audit or design handoff. A reliable, offline, instant converter removes the friction entirely — no account, no ad-cluttered converter site, no waiting for a page load.

FAQ

Is HEX to RGB conversion always exact, or is there rounding?
HEX to RGB conversion is always exact — both formats represent the same 256 values per channel (0–255). Converting HEX #3B82F6 to rgb(59, 130, 246) involves no rounding. However, converting to HSL or CMYK involves floating-point math and rounding to whole numbers, so there may be tiny rounding differences — typically within 1 unit.
Can I use the CMYK values from this tool directly for professional printing?
You can use them as a close starting point. The mathematical RGB-to-CMYK conversion this tool uses is accurate for general purposes. However, professional print workflows use ICC color profiles to account for gamut differences between screen and ink. Verify with a print proof before finalising any print job.
What is the difference between HSL and HSB/HSV?
HSL (Hue, Saturation, Lightness) and HSB/HSV (Hue, Saturation, Brightness/Value) are different models. In HSL, a lightness of 100% always gives white regardless of hue. In HSB, a brightness of 100% gives the pure vivid color (like 100% on a paint tube), not white. Photoshop uses HSB; CSS uses HSL.
Why do some HEX codes have 8 characters instead of 6?
8-digit HEX codes (like #3B82F6FF) include an alpha transparency channel as the last two digits. #FF = fully opaque, #00 = fully transparent. CSS also supports this as rgba() or hsl() with an alpha parameter. This tool works with standard 6-digit (and 3-digit shorthand) HEX codes.
My brand color in CMYK print looks different from the HEX on screen — is that normal?
Yes, completely normal. RGB screens emit light and can display vivid colors (especially bright blues, greens, and neons) that ink on paper physically cannot reproduce. This is called being 'out of gamut'. When converting such colors to CMYK, the closest printable color is used, which may appear less vivid. This is a fundamental physical limitation, not a conversion error.
Can I convert in the other direction — RGB back to HEX?
Yes. To convert RGB back to HEX, convert each channel value (0–255) to its two-digit hexadecimal equivalent and concatenate with a # prefix. For example, rgb(59, 130, 246): 59 in hex is 3B, 130 is 82, 246 is F6 — giving #3B82F6. Most code editors and this tool display the normalized HEX output alongside all other formats.