How to Convert HEX to RGB Colors (and Why It Matters)

The Three Main Color Formats

If you work in web design or development, you’ll encounter three primary ways to represent color: HEX, RGB, and HSL. Understanding each format and when to use it will make your workflow significantly faster.

HEX Colors

Format: #RRGGBB Example: #0ea5e9 (sky blue)

HEX (hexadecimal) colors represent each color channel (Red, Green, Blue) as a two-digit base-16 number from 00 (0) to FF (255).

#0ea5e9 breaks down as:

• 0e = 14 (Red)
• a5 = 165 (Green)
• e9 = 233 (Blue)

When to use HEX

• Most common in CSS and design tools (Figma, Sketch, Adobe XD)
• Compact notation — easy to copy, paste, and type
• The industry default for web design

Shorthand HEX

When both digits of each channel are identical, you can abbreviate: #ffffff → #fff, #000000 → #000, #ff6600 → #f60.

RGB Colors

Format: rgb(R, G, B) Example: rgb(14, 165, 233)

RGB explicitly lists each channel as a decimal number from 0 to 255. This is the same color model as HEX, just in a different notation.

When to use RGB

• When you need transparency: rgba(14, 165, 233, 0.5) adds an alpha channel for 50% opacity
• When you’re manipulating colors programmatically — arithmetic is easier in decimal than hexadecimal
• When a design tool outputs in RGB format

RGB vs RGBA

Adding a fourth value (alpha, 0–1) creates RGBA:

• rgba(0, 0, 0, 0) — fully transparent
• rgba(0, 0, 0, 0.5) — 50% transparent black
• rgba(0, 0, 0, 1) — fully opaque black

HSL Colors

Format: hsl(H, S%, L%) Example: hsl(199, 89%, 49%)

HSL stands for Hue, Saturation, and Lightness:

• Hue (0–360°): the color type. 0°/360° = red, 120° = green, 240° = blue.
• Saturation (0–100%): how vivid the color is. 0% = gray, 100% = pure color.
• Lightness (0–100%): how bright. 0% = black, 50% = pure color, 100% = white.

When to use HSL

HSL is the most human-intuitive format. Want a darker version of a color? Just decrease the Lightness. Want a muted tone? Decrease Saturation. This makes it ideal for:

• Generating color palettes: vary only the Hue to get harmonious colors
• Dark/light mode: adjust Lightness for consistent theming
• Tints and shades: systematically lighten or darken any color

Manual Conversion: HEX → RGB

1. Take the HEX code without the # symbol: 0ea5e9
2. Split into pairs: 0e, a5, e9
3. Convert each pair from base-16 to base-10:
   • 0e → 0×16 + 14 = 14
   • a5 → 10×16 + 5 = 165
   • e9 → 14×16 + 9 = 233
4. Result: rgb(14, 165, 233)

Manual Conversion: RGB → HEX

1. Take each RGB value and convert to hexadecimal:
   • 14 ÷ 16 = 0 remainder 14 → 0e
   • 165 ÷ 16 = 10 remainder 5 → a5
   • 233 ÷ 16 = 14 remainder 9 → e9
2. Combine with #: #0ea5e9

Color Harmony at a Glance

HSL manipulation	Effect
Hue +30°	Analogous color (neighboring on color wheel)
Hue +180°	Complementary color (opposite on color wheel)
Saturation -50%	Muted/desaturated version
Lightness +20%	Tint (lighter)
Lightness -20%	Shade (darker)

In CSS: Which Format to Use?

All three formats are valid in CSS. A common convention:

:root {
  /* HSL for easy theming */
  --color-primary: hsl(199, 89%, 49%);
  --color-primary-light: hsl(199, 89%, 65%);
  --color-primary-dark: hsl(199, 89%, 35%);
}

/* HEX for one-off values */
border: 1px solid #e5e7eb;

/* RGBA for transparency */
background: rgba(14, 165, 233, 0.1);

Convert Colors Instantly

Our free Color Converter lets you input any HEX, RGB, or HSL value and instantly see all three formats with a live color preview — no registration required.