CSS colours are the foundation of every web design — backgrounds, text, borders, shadows, gradients. A CSS colour picker turns the visual choice of "this shade of teal" into the exact hex, RGB, or HSL value you can paste into a stylesheet. For frontend developers, designers handing specs to engineers, and anyone tweaking site appearance, it removes the guesswork.

This guide covers the colour formats CSS accepts, when to use each, and the picker workflow that fits into design and development.

CSS Colour Formats

  • Hex — #RRGGBB or #RGB (e.g., #336699 or #369)
  • Hex with alpha — #RRGGBBAA (e.g., #336699CC)
  • RGB / RGBA — rgb(51, 102, 153) / rgba(51, 102, 153, 0.8)
  • HSL / HSLA — hsl(210, 50%, 40%) / hsla(210, 50%, 40%, 0.8)
  • HWB — hwb(210 20% 40%)
  • LCH / OKLCH — Newer, perceptually uniform colour spaces
  • Named colours — red, blue, rebeccapurple — 147 CSS-named colours

When to Use Which

  • Hex — Most widely understood; compact; default for designer-developer handoff
  • RGBA — When transparency is needed and hex with alpha isn't supported by tooling
  • HSL — When you need to adjust hue, saturation, or lightness programmatically
  • OKLCH — Modern; perceptually uniform; best for generating accessible colour systems

Colour Picker Workflow

  1. Open the picker
  2. Use sliders or colour wheel to choose
  3. Read the value in the format you need
  4. Copy and paste into stylesheet

Common Workflows

Brand Palette

Pick primary, secondary, accent colours. Document in design system. Export to CSS variables.

State Variants

Take base colour, generate hover (slightly darker), active (darker still), disabled (desaturated, lighter).

Accessibility Check

After picking, verify contrast against background. WCAG AA requires 4.5:1 for normal text.

HSL for Programmatic Adjustment

  • Same hue, different lightness — generate tint and shade variants
  • Same hue, different saturation — generate muted versions
  • Rotate hue — generate complementary or analogous colours

CSS Variables for Systematic Colour

Modern stylesheets define colours once and reference them:

  • --brand-primary: #336699;
  • --brand-primary-hover: #285380;
  • --text-on-brand: #ffffff;

Common Pitfalls

  • Hardcoded hex throughout stylesheet. Change requires find-and-replace; use CSS variables
  • Picking from one screen. Looks different on calibrated vs uncalibrated monitors
  • Forgetting dark mode. Same brand colour may need darker or lighter variant in dark theme
  • Insufficient contrast. Failing WCAG accessibility
  • Colour-only meaning. Red and green alone don't communicate to colour-blind users

Quick Tips

  • Pick once; reuse via CSS variables
  • Verify contrast for accessibility
  • HSL for programmatic colour adjustment
  • OKLCH for modern, accessible colour systems
  • Test colours in actual UI context, not just the picker

Use the CSS Color Picker on Popupnote

The CSS Color Picker on Popupnote provides a clean tool for choosing colours and getting hex, RGB, HSL, or CSS variable output — for frontend developers, designers, and anyone styling web content. The tool runs in your browser without any account required.