How to Pick & Convert CSS Colors: Tutorial

This tutorial shows you how to pick a color, get it in the exact format your stylesheet needs (HEX, RGB, or HSL), build a matching shade, and check it against accessibility contrast requirements before you ship. Ten minutes covers the whole workflow.

Step 1: Pick or Capture the Color

Open the Color Picker. You have two starting points:

Picking fresh: drag in the saturation/lightness square, then set the hue on the vertical slider. The values update live in every format.
Matching an existing color: paste any value you have — #3b82f6, rgb(59, 130, 246), or hsl(217, 91%, 60%) — and the picker jumps to it.

To capture a color from anywhere on your screen (a competitor's site, a logo in a PDF), use the browser's built-in eyedropper first: in Chrome or Edge DevTools, click any color swatch in the Styles panel and the eyedropper activates. Copy the HEX it reports, paste it into the picker.

Step 2: Read the Same Color in Three Formats

The picker shows one color in parallel notations:

HEX:  #3b82f6
RGB:  rgb(59, 130, 246)
HSL:  hsl(217, 91%, 60%)

All three are interchangeable — pick by what you're editing:

HEX — the compact default for design handoffs, config files, and most codebases.
RGB — needed when adding transparency in older syntax: rgba(59, 130, 246, 0.5) for a 50%-opacity overlay.
HSL — the format for reasoning about color. Hue 217 = blue; 91% saturation = vivid; 60% lightness = medium-bright. Want a darker variant of the same blue? Drop lightness to 40% and keep the rest: hsl(217, 91%, 40%). That single trick — vary L, hold H and S — produces coherent hover states and shade scales without guesswork.

For batch conversion between formats (including CMYK), the Color Converter handles it; the underlying math is covered in the color tools guide.

Step 3: Build the Variants You'll Actually Need

A UI color rarely ships alone — you need at least a hover shade and a subtle background tint. Using HSL arithmetic on our example:

:root {
  --brand:        hsl(217, 91%, 60%);  /* base    #3b82f6 */
  --brand-hover:  hsl(217, 91%, 50%);  /* darker  */
  --brand-tint:   hsl(217, 91%, 95%);  /* pale bg */
}

For a full palette (complementary and analogous hues, 10-step shade scales), generate one from the base color with the Color Palette generator, or get Tailwind-style 50–950 scales from the Tailwind Color Generator.

Step 4: Check Contrast Before You Commit

The step that separates usable color choices from support tickets. Paste your text color and background color into the Color Contrast checker and read the WCAG ratio:

4.5:1 — minimum for normal body text (WCAG AA)
3:1 — minimum for large text (18pt+/24px+) and UI components
7:1 — the stricter AAA level for body text

Concrete example: white text on our #3b82f6 blue scores about 3.68:1 — passes for large headlines and buttons, fails for body text. Fix by darkening the background (hsl(217, 91%, 45%) pushes the ratio past 4.5:1) or using the blue only for non-text elements. Checking now costs 30 seconds; retrofitting contrast across a shipped UI costs days.

Worked Example: Matching a Brand Color From a Logo

Open the logo image in the browser, activate the DevTools eyedropper, click the dominant color. It reports #e11d48.
Paste #e11d48 into the picker. HSL reads hsl(347, 77%, 50%) — a saturated rose red.
Create the hover state: lightness 50% → 40% = hsl(347, 77%, 40%) → #b91238 (approximately).
Contrast-check white text on the base color: ~4.6:1 — passes AA for body text. Ship it.

Working With Colors Without the Tool

/* Modern CSS can derive variants natively */
.button:hover {
  /* darken by dropping lightness via color-mix */
  background: color-mix(in srgb, var(--brand) 85%, black);
}

/* relative color syntax (Chrome 119+, Safari 16.4+) */
.tint {
  background: hsl(from var(--brand) h s 95%);
}

In DevTools, every color swatch in the Styles panel opens an inline picker with a built-in contrast-ratio readout against the element's background — the fastest check for a color already on the page. Sass users have had darken()/lighten() for years; the native color-mix() now does the same without a build step.

Common Problems and Fixes

The color looks different on the actual page

Usual suspects: an opacity or overlay layer between the element and viewer, a parent's filter, dark-mode media queries swapping variables, or wide-gamut displays rendering display-p3 colors differently than sRGB. Inspect the exact element in DevTools and read the computed color rather than trusting the stylesheet value.

3-digit vs 6-digit vs 8-digit HEX confusion

#fff expands to #ffffff (each digit doubles). An 8-digit value like #3b82f680 carries alpha in the last two digits — 80 hex = 128/255 ≈ 50% opacity. If a designer hands you 8 digits and your target doesn't support HEX-alpha, convert to rgba().

My HSL-derived shades look muddy

Pure lightness shifts can drift perceptually — very light tints lose their hue character, and mid-tone shifts change apparent saturation. For a polished scale, nudge saturation up slightly as lightness increases toward the extremes, or use a generated scale from the Tailwind Color Generator, which applies these corrections.

Gradient between two colors goes through gray

Interpolating between complementary-ish colors in RGB space passes through desaturated middle values. Build gradients with an intermediate hue stop, or use the CSS Gradient generator to preview before committing.

FAQ

Which color format should I standardize on in CSS?

HEX for static values, HSL (or the newer OKLCH) for anything you'll derive variants from. Consistency matters more than the choice — mixed formats across a codebase make color audits painful.

What's the difference between HSL and HSB/HSV?

Different lightness models. In HSL, 100% lightness is always white; in HSB (used by Photoshop and many design tools), 100% brightness at full saturation is the pure vivid hue. A designer's HSB values will not match CSS HSL — convert via HEX to avoid the mismatch.

Do I need to worry about color blindness?

About 8% of men and 0.5% of women have some form of color vision deficiency, most commonly red-green. Two rules cover most of it: never encode meaning in color alone (add icons or labels), and keep sufficient lightness contrast — which the WCAG ratio check from Step 4 already enforces.

How do I pick colors that go together?

Start from one anchor color and derive the rest by rule rather than eye: same hue at different lightness (monochrome), hues 30° apart (analogous), or 180° apart (complementary, use sparingly for accents). The Color Palette generator automates these harmonies from any base color.

How to Pick and Convert CSS Colors:
Step-by-Step Tutorial