🧮

Hex to RGB Converter

Convert hex color codes to RGB and HSL values, preview the color swatch, and check text-contrast accessibility — essential for web and graphic design.

Hex color code

Hex: #3B82F6

RGB: rgb(59, 130, 246)

HSL: hsl(217, 91%, 60%)

Channel breakdown

Red

Green

130

Blue

246

Text accessibility (WCAG)

Contrast ratio of this color as a background:

White text3.68:1

Black text5.71:1

Best readability with black text (passes AA for normal text).

Instant insight

#3B82F6 is red 59, green 130, blue 246
A hex colour is three numbers, not one — each pair of digits is one channel running 00 to FF, which is 0 to 255 in decimal.
Read a hex colour two characters at a time and it stops looking arbitrary.
Black text on this gives a contrast ratio of 5.71:1
That meets the WCAG AA threshold of 4.5:1 for normal body text.
For large headings the bar is lower at 3:1, so this passes there too.
Shorthand hex doubles each digit
#F00 is not a different colour from #FF0000 — three-digit hex expands by repeating each character, so #ABC means #AABBCC.
Expand shorthand before comparing two colours, or identical colours will look different.

Worked out in your browser — nothing is sent anywhere.

Loading…

Everyday Uses

Web design colors

Turn #3B82F6 into its RGB values (or back) when moving colors between CSS, design tools, and code.

Brand color matching

Convert a brand guide's RGB values into hex codes for your website or email templates.

Cross-platform development

Different frameworks want different formats — convert instead of guessing.

Matching colors from images

Got an RGB reading from a color picker? Get the hex code your stylesheet needs.

Checking text contrast

Accessibility standards ask for a 4.5:1 contrast ratio for body text. That calculation starts from RGB values, so converting the hex is the first step.

Screen colour heading for print

RGB is light and CMYK is ink, and some screen colours simply cannot be printed. Getting to RGB values is the step before any sensible conversion or proof.

Frequently Asked Questions

How does a hex color code convert to RGB?

A 6-digit hex code is three pairs of hexadecimal digits, each pair representing one color channel (0–255): the first pair = Red, second = Green, third = Blue. Convert each pair from base-16 to base-10: #3B82F6 → R = 3B₁₆ = 59, G = 82₁₆ = 130, B = F6₁₆ = 246. The result: rgb(59, 130, 246) — a medium blue. #000000 = black (all channels 0); #FFFFFF = white (all channels 255); #FF0000 = pure red.

What is HSL color and how does it differ from RGB?

HSL (Hue, Saturation, Lightness) is an alternative color model designed to be more intuitive than RGB. Hue (0–360°) selects the base color on the color wheel (0° = red, 120° = green, 240° = blue). Saturation (0–100%) controls colour intensity — 0% is greyscale, 100% is fully vivid. Lightness (0–100%) controls brightness — 0% is black, 50% is the pure color, 100% is white. HSL makes it easy to create color variations: same hue, varying lightness for a button's hover/active states.

What are WCAG contrast ratio requirements for accessible web design?

The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios: AA standard (widely required): 4.5:1 for normal text, 3:1 for large text (18pt or 14pt bold). AAA standard (stricter): 7:1 for normal text, 4.5:1 for large text. UI components (buttons, icons) require 3:1 against adjacent colors. The contrast ratio formula compares relative luminance — #FFFFFF on #000000 is 21:1 (maximum). Many countries' accessibility laws (ADA, EN 301 549) reference WCAG AA as the legal minimum.

What is the difference between hex, RGB, RGBA, and CSS color names?

These are all ways to specify colors in web development. Hex (#RRGGBB) is the most compact. RGB (rgb(R,G,B)) uses decimal values 0–255. RGBA adds an alpha (opacity) channel: rgba(59,130,246,0.5) = 50% transparent blue. HSLA is HSL with alpha. CSS color names (like "tomato", "cornflowerblue") are human-friendly aliases. CSS also supports oklch() and color() functions for wider display gamuts. Hex and RGB are most portable; RGBA is needed for transparency; HSL is best for programmatic color manipulation.

How do I create a color palette from a single hex color?

Start from one base color and systematically vary it: Tints — increase Lightness in HSL (same hue, same saturation, lighter). Shades — decrease Lightness (darker versions). Tones — decrease Saturation (more muted/greyed). Complementary color — rotate Hue by 180°. Analogous palette — 3 colors ±30° around the base hue. Triadic — 3 colors at 120° intervals. Tools like Tailwind CSS generate 50–950 shade scales from a base. Using HSL for palette generation ensures colors feel visually related.