Color Picker Guide: HEX, RGB, HSL Color Codes Explained (2026)

Every color format is just a different way of expressing the same underlying color. Here is when and why each is used:

HEX explained

A HEX color code is a 6-digit hexadecimal number: #RRGGBB. Each pair of digits represents Red, Green, Blue (0–255 in base-16). #000000 is black (0,0,0), #ffffff is white (255,255,255), #ff0000 is pure red. Shorthand: #fff = #ffffff, #f00 = #ff0000.

RGB explained

RGB stands for Red, Green, Blue. rgb(255, 0, 0) is red; rgb(0, 255, 0) is green; rgb(0, 0, 255) is blue. Mixing equal amounts of all three creates grey (rgb(128,128,128)) or white (rgb(255,255,255)).

HSL explained — the most intuitive for design

HSL stands for Hue, Saturation, Lightness. Hue is the color angle on the color wheel (0° = red, 120° = green, 240° = blue). Saturation is how vivid vs grey (0% = grey, 100% = vivid). Lightness is how light vs dark (0% = black, 100% = white, 50% = the "true" color). HSL is the most intuitive for designers — to make a color lighter, just increase L. To create a muted palette, reduce S.

Color theory gives you a framework for choosing colors that work well together. Here are the fundamental relationships:

The color wheel

Primary colors: Red, Yellow, Blue. Secondary colors: Orange (R+Y), Green (Y+B), Violet (B+R). Tertiary colors are between primary and secondary. On the digital color wheel, primary colors are Red (0°), Green (120°), Blue (240°).

Color harmonies

• Complementary: Colors opposite on the wheel (blue + orange, red + green). High contrast, eye-catching. Good for CTAs and accents.
• Analogous: 3 adjacent colors on the wheel (blue, blue-green, green). Harmonious and easy on the eye. Good for backgrounds and serene designs.
• Triadic: 3 colors equally spaced (red, yellow, blue). Vibrant and balanced. Good for playful brands.
• Split-complementary: A color plus the two colors adjacent to its complement. Softer than complementary but still high contrast.
• Monochromatic: Different shades and tints of one hue. Clean, elegant, sophisticated.

Psychology of color

• Red: Urgency, passion, danger (used by YouTube, Netflix, Coca-Cola)
• Blue: Trust, reliability, calm (used by Facebook, LinkedIn, Samsung)
• Green: Nature, growth, health (used by WhatsApp, Spotify, Whole Foods)
• Yellow: Energy, optimism, warning (used by McDonald's, IKEA, Snapchat)
• Black: Luxury, sophistication (used by Chanel, Apple, Nike)

Brand colors are usually protected intellectual property — only use them for reference or when building integrations/partner content. Here are the official colors of major brands:

CSS Custom Properties (CSS Variables)

For web projects, define your brand colors once and reuse everywhere:

:root {
  --color-primary: #1d4ed8;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #1e40af;
  --color-accent: #f59e0b;
  --color-text: #111827;
  --color-bg: #ffffff;
}

Color accessibility means ensuring that people with color blindness or low vision can read and understand your content. About 8% of men and 0.5% of women have some form of color vision deficiency.

WCAG contrast requirements

• AA standard (minimum): 4.5:1 contrast ratio for normal text, 3:1 for large text
• AAA standard (enhanced): 7:1 for normal text, 4.5:1 for large text

Contrast ratio quick reference

Color blindness safe palettes

The most common color blindness is red-green (deuteranopia). Never rely on red vs green alone to convey meaning. Use blue + orange or blue + yellow as safe alternatives. Always add icons or text labels alongside color to ensure meaning is not lost for colorblind users.