How to convert HEX to RGB (and HSL, OKLCH)
Updated 2026-06-21
To convert a HEX color to RGB, paste the HEX value (for example #3B82F6) into a color converter and read off the red, green and blue channels — here rgb(59, 130, 246). Each pair of hex digits maps to one channel: 3B is 59 red, 82 is 130 green, F6 is 246 blue. The Color Converter & Contrast does this instantly and gives you HSL, HSV and OKLCH at the same time.
Convert between every color format
Paste a color in any notation and the tool fills in all the others live:
- Type or paste your color — #3B82F6, rgb(59, 130, 246), an hsl() value, or an oklch() value.
- Read the equivalent in each format. The blue above becomes hsl(217, 91%, 60%) and roughly oklch(0.62 0.19 256).
- Click any field to copy it for CSS, design tokens or code.
A few format notes that trip people up:
- HEX is base-16. Shorthand like #39F expands to #3399FF by doubling each digit.
- RGB channels run 0–255; the same color as percentages is also accepted.
- HSL is hue (0–360 degrees), then saturation and lightness as percentages — easier to tweak by hand than raw RGB.
- OKLCH is a perceptually uniform space (lightness, chroma, hue). Equal numeric steps look like equal visual steps, which is why it is increasingly used for accessible palettes.
Check WCAG contrast at the same time
Converting a color is often step one before you ask the real question: is this text readable? The tool runs a WCAG contrast check between a foreground and background color and reports the ratio.
The thresholds to aim for:
- 4.5:1 — normal body text (WCAG AA).
- 3:1 — large text (roughly 18pt, or 14pt bold) and UI components.
- 7:1 — the stricter AAA level for body text.
So if your brand blue #3B82F6 sits on white, the checker shows it passes for large headings but falls just short for small paragraph text — a signal to darken it before shipping.
Common pitfalls
- Rounding drift. Converting HEX to HSL and back can shift a digit because HSL stores fewer exact values. Treat HEX or RGB as your source of truth and HSL as a tweaking layer.
- Alpha gets dropped. An 8-digit HEX like #3B82F680 carries opacity in the last two digits. Watch whether your target format keeps it.
- Out-of-gamut OKLCH. High-chroma OKLCH values can fall outside what sRGB screens can show; the converted HEX is the clamped, displayable version.
Why do it in the browser
Colors and brand palettes are work you may not want flowing through a third-party server. The Color Converter runs entirely on your device — nothing you paste is uploaded — so it works offline and keeps unreleased palettes private.
Ready to convert a color and check its contrast? Open the Color Converter & Contrast and paste your HEX value to get every format at once.