🧮

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 colour code#RGB, #RRGGBB or #RRGGBBAA — the hash is optionalColour picker

#3B82F6

Complement

#F6AF3B

Greyscale

#858585

Best text

#000000

Hex

#3B82F6

RGB

59, 130, 246

HSL

217°, 91%, 60%

Best text contrast

5.71:1

passes AA

CSS rgb()rgb(59, 130, 246)

CSS hsl()hsl(217, 91%, 60%)

Contrast on white3.68:1

Contrast on black5.71:1

Relative luminance0.236

Complement#F6AF3B

Instant insight

#3B82F6 is rgb(59, 130, 246)
Each pair of hex digits is one channel, 00 to FF — that is 0 to 255 in decimal, which is 8 bits per channel and 24 bits in total. 3B is 59 red, 82 is 130 green, F6 is 246 blue. Hex is used rather than decimal purely because two hex digits fit one byte exactly.
Black text on this gives 5.71:1
That passes WCAG AA (4.5:1) for body text, but not AAA (7:1). Contrast is measured against relative luminance, not brightness: green counts ten times as much as blue because the eye is far more sensitive to it.
In HSL: hsl(217, 91%, 60%)
Hue 217° places it on the colour wheel, saturation 91% is how far from grey it is, and lightness 60% is how far between black and white. HSL is easier to reason about than RGB when you want a variation — to get a lighter shade of the same colour, change only the L.
Lightness in HSL is not the same as perceived brightness
This colour has 60% HSL lightness but a relative luminance of 0.236. Pure blue and pure yellow both sit at 50% lightness and look nothing alike in brightness — which is why the greyscale shown here (#858585) is computed from luminance rather than by averaging the channels.
Three-digit hex doubles each digit, it does not pad them
#F0A is #FF00AA, not #0F000A. The short form exists because doubling is exactly what makes the common web-safe values expressible, and a converter that zero-pads instead produces a colour nowhere near the one intended — a quiet failure, because the output is still a valid colour.

Worked out in your browser — nothing is sent anywhere.

Compare results

Save this result, change your inputs, and recalculate to compare scenarios side by side.

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.