⌘ K
hex → rgb/hsl · live · 3/6/8 digit

Decode any hex colour to RGB, HSL & more

Paste #RGB, #RRGGBB, or #RRGGBBAA and get RGB, RGBA, HSL, decimal, and a normalised hex form — instantly, locally.

Hex to RGB Converter
Input
7 B
1 lines
Output
153 B
6 lines
Status
ready
live
Ratio
21.86×
out/in
input · hex colour
output · rgb · hsl · decimal
rgb       rgb(59, 130, 246)
rgba      rgba(59, 130, 246, 1.00)
hsl       hsl(217, 91%, 60%)
decimal   3900150
alpha     100.0%  (1.000)
hex       #3b82f6
Quick Start

How to convert hex to RGB

Hex colours encode R, G, B (and optional A) channels as two-digit hex. The tool normalises 3- and 4-digit shortforms automatically.

  1. 01

    Paste hex

    Leading # is optional. Try #3b82f6, #fff, or #3b82f680.

    Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.

    inputOKLCHCSS Color 4perceptuallive
    in · colorhex · sRGB
    #3b82f6
    loaded · normalisedOKLCH · ready
  2. 02

    Live parse

    3-digit becomes 6, 4-digit becomes 8. Invalid input shows an inline error.

    Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.

    parsehex · rgb · hslP3gamut-mappedlive
    expand · options#fff → #ffffff · live
    #fff → #ffffff
    options applied · livelive
  3. 03

    Read channels

    RGB, RGBA, HSL, and the 24-bit decimal all appear at once.

    Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.

    channelsWCAG 2.2APCAAA · AAAcontrast
    out · convertedrgb · ready
    rgb(59, 130, 246)
    converted · liveWCAG-aware
  4. 04

    Copy what you need

    One click copies the whole report — or grab a single line by selection.

    Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.

    exportclipboardCSS varspalette JSONblob
    ✓ · copiedready · done
    ✓ Copied
    shipped · ready to shipsuccess
Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Related toolsHEX ↔ RGB ConverterHSL ConverterColor ConverterBase64 EncoderText to HexURL Encoder
Use Cases

When to convert hex

Design tokens, CSS variables, brand systems.

Design tokens

Sync hex from Figma into rgb()/hsl() CSS vars. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Tailwind palettes

Translate custom hex into HSL channels for dark mode. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Brand audits

Verify a brand hex resolves to the right HSL family. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Canvas / WebGL

Need normalised 0-1 floats? Pull straight from the decimal. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Email templates

Quote rgb() fallbacks for clients without hex support. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Accessibility checks

Plug HSL lightness into contrast calculators. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

a11y
FAQ

Frequently asked questions

Each character doubles up: #abc → #aabbcc and #abcd → #aabbccdd. The tool handles the expansion automatically.
The trailing 2 digits in an 8-character hex are divided by 255. So #ff = 1.0, #80 ≈ 0.50, #00 = 0.
Yes — it follows the CSS Color Module 3 algorithm, matching what browsers compute for hsl() values.
Some platforms (Android Color.parseColor without alpha, classic Office, BIOS code) need an integer RGB number.
No — colour parsing runs entirely in your browser.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!