HEX to RGB Color Converter - Free Online Color Tool

Paste a hex code, get the RGB value instantly

Drop any hex color code into the field above and the tool spits out the matching RGB, HSL, and CMYK values right away — no sign-up, no page reload. It also generates tints and shades and checks whether two colors meet WCAG contrast requirements for accessibility (AA and AAA levels).

How to use the hex to RGB color converter

1. Type or paste your hex code into the input — with or without the # symbol (e.g. #3B82F6 or 3B82F6).
2. The RGB, HSL, and CMYK values appear instantly below the input.
3. Click any value to copy it to your clipboard.
4. Optionally, enter a second color to run a WCAG contrast check — useful for confirming text is readable on a background.
5. Scroll down the result panel to see the full tint and shade scale for your color.

Worked example — converting #3B82F6 to RGB

Say you grabbed Tailwind CSS's blue-500 value: #3B82F6. Here's what the converter produces:

The contrast ratio against white (#FFFFFF) is 3.14:1, which passes WCAG AA for large text but not for normal-sized body copy — handy to know before you commit to that text color.

How to convert hex to RGB in code

If you need this conversion inside your own project, here are clean one-liners for the two most common languages.

JavaScript

// Returns { r, g, b } from a hex string like '#3B82F6'
function hexToRgb(hex) {
  const clean = hex.replace('#', '');
  return {
    r: parseInt(clean.substring(0, 2), 16),
    g: parseInt(clean.substring(2, 4), 16),
    b: parseInt(clean.substring(4, 6), 16)
  };
}

hexToRgb('#3B82F6'); // { r: 59, g: 130, b: 246 }

Python

# Returns (r, g, b) tuple from a hex string like '#3B82F6'
def hex_to_rgb(hex_color):
    hex_color = hex_color.lstrip('#')
    return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))

hex_to_rgb('#3B82F6')  # (59, 130, 246)

Both snippets parse each pair of hex digits as a base-16 number. For a deeper look at base conversion, see our Hex to Decimal Converter — Free Online Base Converter.

How it works

A hex color like #3B82F6 is just three base-16 numbers written back to back. The converter splits the string into three two-character chunks (3B, 82, F6), then converts each from hexadecimal (base 16) to a decimal (base 10) number between 0 and 255 — giving you the red, green, and blue channels of the RGB model.

The HSL conversion then maps those RGB values to a hue angle, a saturation percentage, and a lightness percentage using standard formulas defined in the W3C CSS Color Level 4 specification. CMYK is derived from RGB by a straightforward normalization — useful for screen-to-print handoff.

When to use (and when to skip) a hex-to-RGB converter

Good times to reach for this tool

• Copying a color out of a design file (Figma, Sketch) and needing rgb() syntax for CSS.
• Working in a framework like React or Vue where you pass color channels as separate props.
• Checking WCAG contrast before finalizing text and background color pairings.
• Translating a hex code to CMYK for a print vendor or PDF export.
• Generating a full tint-to-shade palette from a single brand color.

When you may not need it

• Modern CSS accepts hex values directly (color: #3B82F6), so no conversion is needed for standard styling.
• If you're already working in a color library like chroma.js or Python's colorsys module, those handle conversions programmatically in one call.
• Shorthand hex codes like #F00 (three-digit) expand to #FF0000 — make sure you're not passing a three-digit code to a parser that expects six digits, or use the tool to expand it first.

Your data never leaves your browser. All conversions run entirely on your device — nothing is sent to a server, so you can safely paste internal brand colors or client assets.

Pick your color above, grab the format you need, and move on — the converter handles the math so you don't have to.