HEX to RGB Color Converter

Paste any HEX code and instantly get RGB, HSL, and HSV values. Includes WCAG accessibility contrast ratios, tint and shade palettes, and one-click CSS snippets.

HEX · RGB · HSL · HSV WCAG Contrast Tints & Shades

Share this tool

Converting...

Enter a color value above and click Convert Color

Supports HEX (#1A2B3C), RGB (rgb(26,43,60)), and HSL (hsl(210,40%,17%)).

What Is a HEX Color Code?

A HEX color code is a six-digit hexadecimal string that encodes a color in the RGB color model. Each pair of digits represents one channel — red, green, and blue — with values from 00 (0) to FF (255).

# 1A 2B 3C

# Red Green Blue

#1A2B3C decodes as: Red = 0x1A = 26, Green = 0x2B = 43, Blue = 0x3C = 60. The hash prefix is optional in CSS property values but is the universal convention for color codes.

The 3-character shorthand works when each pair is a repeated digit — #AABBCC shortens to #ABC. CSS expands each character by doubling it, so #F0A is identical to #FF00AA. The 8-character form adds an alpha transparency channel: #RRGGBBAA.

How to Convert HEX to RGB

Converting HEX to RGB requires splitting the six-character string into three two-character pairs and converting each from base-16 (hexadecimal) to base-10 (decimal):

Strip the leading #.
Take characters 1–2 (Red), convert from hex: 1A₁₆ = 1×16 + 10 = 26.
Take characters 3–4 (Green): 2B₁₆ = 2×16 + 11 = 43.
Take characters 5–6 (Blue): 3C₁₆ = 3×16 + 12 = 60.

Result: #1A2B3C → rgb(26, 43, 60).

To go the other direction — RGB to HEX — divide each decimal value by 16, keeping the quotient and remainder. Write each as two hex digits: 26 ÷ 16 = 1 remainder 10 → 1A.

RGB vs HSL vs HSV — Which Should You Use?

RGB

Red / Green / Blue

Best for CSS and web — the native format for screens. Each channel is a light intensity. Direct hardware mapping.

HSL

Hue / Saturation / Lightness

Best for design tools. Hue is the pure color (0–360°), Saturation is intensity, Lightness is brightness. Intuitive for humans.

HSV

Hue / Saturation / Value

Used in Photoshop and creative apps. Value is maximum brightness. Shading and tinting are more predictable than HSL for artists.

CSS natively supports rgb() and hsl(). HSV is not a CSS function — it is used internally by graphics editors and must be converted before use in stylesheets.

WCAG Contrast Requirements

The Web Content Accessibility Guidelines (WCAG 2.1) define minimum contrast ratios between foreground text and its background. The ratio is calculated from relative luminance — a perceptually-weighted measure of brightness.

Level	Normal text	Large text (18pt / 14pt bold)
AA	4.5 : 1	3.0 : 1
AAA	7.0 : 1	4.5 : 1

The luminance formula linearises each RGB channel: values ≤ 0.04045 are divided by 12.92; higher values use ((c + 0.055) / 1.055)^2.4. The final luminance is 0.2126·R + 0.7152·G + 0.0722·B, weighted for human perception (green is most sensitive).

Tints and Shades — Building a Color Palette

A tint is created by mixing a color with white. At 10%, 10% of each channel moves toward 255. A shade is created by mixing with black — each channel is multiplied by a factor less than 1.

Formula for a tint at step i (10%–70%): R_out = R + (255 − R) × (i × 0.1)

Formula for a shade at step i: R_out = R × (1 − i × 0.1)

Design systems like Tailwind CSS use 10-step palettes (100–900) built on this principle. Having a consistent tint/shade scale ensures hover, focus, and disabled states all have enough contrast from the base color.

Common Color Codes Reference

Color	HEX	RGB	HSL
White	#FFFFFF	rgb(255, 255, 255)	hsl(0, 0%, 100%)
Black	#000000	rgb(0, 0, 0)	hsl(0, 0%, 0%)
Red	#FF0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)
Lime	#00FF00	rgb(0, 255, 0)	hsl(120, 100%, 50%)
Blue	#0000FF	rgb(0, 0, 255)	hsl(240, 100%, 50%)
Yellow	#FFFF00	rgb(255, 255, 0)	hsl(60, 100%, 50%)
Cyan	#00FFFF	rgb(0, 255, 255)	hsl(180, 100%, 50%)
Magenta	#FF00FF	rgb(255, 0, 255)	hsl(300, 100%, 50%)
Silver	#C0C0C0	rgb(192, 192, 192)	hsl(0, 0%, 75%)
Gray	#808080	rgb(128, 128, 128)	hsl(0, 0%, 50%)

Frequently Asked Questions

What is the difference between HEX and RGB?

HEX and RGB represent exactly the same color information — RGB is the decoded form and HEX is the same values written in hexadecimal. #1A2B3C and rgb(26, 43, 60) are identical. CSS accepts both formats; HEX is more compact for fixed colors while RGB is easier to manipulate in JavaScript.

Can I convert RGB back to HEX?

Yes. This tool accepts rgb() format directly — select the RGB tab and enter your value. The conversion is lossless because RGB integers (0–255) map exactly to hex pairs (00–FF).

What does the alpha channel (#RRGGBBAA) mean?

The 8-character form adds an alpha transparency byte. #1A2B3CFF is fully opaque (FF = 255), #1A2B3C80 is ~50% transparent (80 = 128), and #1A2B3C00 is fully transparent. CSS also supports rgba() which takes a decimal fraction from 0 to 1.

Why do some HEX codes only have 3 characters?

The 3-character shorthand works when each pair in the full 6-character code has identical digits. #AABBCC shortens to #ABC because each character is simply doubled on expansion. #A5B3CC cannot be shortened because the pairs (A5, B3, CC) are not all repeated digits.

What WCAG contrast ratio do I need to pass accessibility?

For normal body text you need at least 4.5:1 for AA compliance and 7:1 for AAA. Large text (18pt regular or 14pt bold and above) has a lower threshold: 3:1 for AA and 4.5:1 for AAA. This tool calculates the ratio against both white and black backgrounds.

What are tints and shades used for?

Tints (lighter variants) are commonly used for backgrounds, hover states, and disabled elements. Shades (darker variants) are used for text, borders, and pressed states. Design systems like Tailwind and Material use a numbered scale (50, 100, 200... 900) built from tints and shades of a base color.

Related Tools

Color Code Converter

Convert between HEX, RGB, HSL, and CMYK with CSS snippets and WCAG output.

HEX / RGB / HSL Color Picker

Interactive picker with live preview and accessible text contrast check.