Hex Color Codes Explained — RGB, HSL, and How Colors Work in CSS

Every color you see on a screen is a combination of red, green, and blue light. A hex color code like #FF5733 is a shorthand for “maximum red, moderate green, very little blue.” Once you understand the pattern, you can read and write hex colors by sight.

Use the Color Picker on this site to convert between hex, RGB, HSL, and OKLCH, and to check color contrast ratios.

The anatomy of a hex color code

A hex color code is a # followed by 6 hexadecimal digits (or 3 for shorthand):

#RRGGBB
  ^^  red channel (00–FF)
    ^^  green channel (00–FF)
      ^^  blue channel (00–FF)

Each channel is a 2-digit hex number (0–255 in decimal). Two hex digits represent values from 00 (0) to FF (255):

#FF0000 = RGB(255, 0, 0)   = pure red
#00FF00 = RGB(0, 255, 0)   = pure green
#0000FF = RGB(0, 0, 255)   = pure blue
#FFFFFF = RGB(255, 255, 255) = white
#000000 = RGB(0, 0, 0)     = black
#808080 = RGB(128, 128, 128) = medium grey

For #FF5733:

• FF = 255 in decimal → full red
• 57 = 87 in decimal → moderate green
• 33 = 51 in decimal → low blue

Result: a red-orange color.

Hex to decimal conversion for color channels

Each 2-digit hex channel converts to decimal by the standard hex→decimal formula. For FF:

F = 15 (in hex, digits go: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)
FF = (15 × 16) + (15 × 1) = 240 + 15 = 255

For 57:

5 = 5 in decimal
7 = 7 in decimal
57 hex = (5 × 16) + (7 × 1) = 80 + 7 = 87 decimal

You don’t need to do this manually — that’s what the Color Picker is for. But understanding the math explains why #FF0000 is full red and #800000 is half-intensity “dark red” (128 ≈ half of 255).

3-digit shorthand

CSS accepts 3-digit hex codes where each digit is doubled:

#RGB = #RRGGBB
#F00 = #FF0000 (red)
#0F0 = #00FF00 (green)
#FFF = #FFFFFF (white)
#000 = #000000 (black)
#F5A = #FF55AA

3-digit codes only work when both digits of each channel are identical. #F5A is valid (#FF55AA), but #F53 is shorthand for #FF5533, not #F05030.

8-digit hex codes: adding transparency

CSS4 and modern browsers support 8-digit hex codes where the last two digits represent the alpha (transparency) channel:

#RRGGBBAA
#FF000080 = red at 50% opacity (80 hex = 128 decimal, ~50% of 255)
#FF000000 = red at 0% opacity (fully transparent)
#FF0000FF = red at 100% opacity (fully opaque)

This is equivalent to rgba(255, 0, 0, 0.5) in CSS. The 8-digit hex form is newer and less widely understood but fully supported in all modern browsers.

RGB color model

RGB (Red, Green, Blue) is an additive color model — you mix light, not pigment. Mixing all three at full intensity gives white. Mixing none gives black.

In CSS:

color: rgb(255, 87, 51);       /* Same as #FF5733 */
color: rgba(255, 87, 51, 0.8); /* 80% opacity */
color: rgb(255 87 51 / 80%);   /* Modern CSS syntax */

The RGB model maps directly to how your screen physically works: each pixel has red, green, and blue subpixels. The hex code tells each subpixel how bright to shine.

HSL color model

HSL (Hue, Saturation, Lightness) is a more human-intuitive way to specify colors:

• Hue: a degree on the color wheel (0–360°). 0°=red, 120°=green, 240°=blue
• Saturation: colorfulness (0%=grey, 100%=fully saturated)
• Lightness: brightness (0%=black, 50%=normal, 100%=white)

color: hsl(11, 100%, 60%);  /* Same hue as #FF5733, approximately */

HSL is useful for:

• Creating color scales: keep hue fixed, vary lightness: hsl(11, 100%, 20%) through hsl(11, 100%, 90%)
• Adjusting saturation for disabled states: hsl(11, 0%, 60%) — same lightness, grey
• Programmatic color schemes: rotate the hue for complementary/triadic colors

In CSS, you can use hsl() directly or convert to hex for values that need hex format. The Color Picker converts in both directions.

Converting between hex, RGB, and HSL

Hex to RGB

Split the 6-digit hex into three 2-character groups and convert each to decimal:

#3498DB → 34=52, 98=152, DB=219
RGB(52, 152, 219)

RGB to hex

Convert each decimal channel to 2-digit hex, zero-padded:

RGB(52, 152, 219) → 52=0x34, 152=0x98, 219=0xDB
#3498DB

In JavaScript:

function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('');
}
rgbToHex(52, 152, 219)  // '#3498db'

RGB to HSL

function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0; // achromatic
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h /= 6;
  }

  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

Common hex colors and their values

Color name	Hex	RGB
Black	#000000	0, 0, 0
White	#FFFFFF	255, 255, 255
Red	#FF0000	255, 0, 0
Green (lime)	#00FF00	0, 255, 0
Blue	#0000FF	0, 0, 255
Yellow	#FFFF00	255, 255, 0
Cyan	#00FFFF	0, 255, 255
Magenta	#FF00FF	255, 0, 255
Orange	#FFA500	255, 165, 0
Purple	#800080	128, 0, 128
Grey (medium)	#808080	128, 128, 128
Tailwind Blue 500	#3B82F6	59, 130, 246
Tailwind Green 500	#22C55E	34, 197, 94

CSS named colors vs hex

CSS supports 148 named colors (the CSS Color Level 4 specification). Named colors like red, cornflowerblue, papayawhip are readable but limited:

• Named colors are exact: red = #FF0000. If you want a slightly softer red, you need hex.
• Named colors don’t cover the full color space. Your brand orange #FF6B2B has no name.
• Named colors are fine for prototyping; use hex or HSL in production CSS for precision.

OKLCH: the modern alternative to hex

OKLCH (Oklch Color Space) is supported in modern browsers (Chrome 111+, Firefox 113+, Safari 16.4+) and is increasingly used in design systems:

color: oklch(65% 0.15 27);

OKLCH represents colors in a perceptually uniform space. Equal changes in lightness look equal to the human eye — unlike hex or HSL, where moving from hsl(0, 100%, 50%) to hsl(120, 100%, 50%) (red to green) appears to change both lightness and saturation, even though the numbers say both are 50% lightness.

For brand colors, OKLCH makes it easier to create consistent color scales where each step looks equally different to the eye.

The Color Picker supports OKLCH conversion alongside hex, RGB, and HSL.

Using the color picker

1. Enter a hex code like #3498DB to see its RGB, HSL, and OKLCH equivalents
2. Or use the visual color picker and copy the hex code for use in CSS
3. Check WCAG contrast ratio against background colors for accessibility compliance
4. Generate related colors: complementary (opposite on the color wheel), analogous (adjacent), or triadic

Related tools

• Color Picker — convert between hex, RGB, HSL, OKLCH and check contrast
• CSS Grid Generator — build CSS grid layouts visually
• Box Shadow Generator — generate CSS box-shadow values