Color Picker Workflow for Designers
The Problem with Picking Colors Randomly
Opening a color picker and dragging until something "looks right" leads to inconsistent palettes, poor accessibility, and painful developer handoffs. Professional designers use a structured workflow: source an initial color, build a scale, verify contrast, convert formats, and document the result.
A disciplined workflow does not slow you down. It eliminates the back-and-forth that happens when colors feel wrong in-context despite looking fine in isolation.
Step 1: Start With a Source Color
Every palette starts with one anchor color. Where you get it depends on the project:
| Source | When to use | Example |
|---|---|---|
| Brand guidelines | Corporate or product work | #2563EB from brand book |
| Mood board | New brand or campaign | Eyedropper from photo |
| Competitor analysis | Redesign projects | Load competitor screenshot |
| Keyword association | Early-stage exploration | "Trust" → blue, "Energy" → orange |
| Random generation | Creative experiments | Shuffle until one resonates |
Once you have your anchor, resist the urge to freestyle the rest. Derive complementary colors from systematic rules.
Step 2: Build a Full Scale
One color is never enough. You need a scale — typically 5 to 11 shades — for backgrounds, borders, hover states, disabled states, and text.
The HSL method (recommended)
Convert your anchor color to HSL, then adjust the lightness while keeping hue and saturation constant:
--brand-50: hsl(221 83% 95%); /* Lightest background */
--brand-100: hsl(221 83% 85%);
--brand-300: hsl(221 83% 70%);
--brand-500: hsl(221 83% 53%); /* Anchor color */
--brand-700: hsl(221 83% 35%);
--brand-900: hsl(221 83% 18%); /* Darkest text/bg */
HSL makes scale generation predictable because lightness maps directly to perceived brightness. HEX and RGB do not — incrementing a HEX pair does not correspond to linear brightness change.
Scale conventions
| Shade | Typical use |
|---|---|
| 50–100 | Subtle backgrounds, hover states on light surfaces |
| 200–300 | Borders, chips, secondary backgrounds |
| 400–500 | Primary actions, links, icons |
| 600–700 | Hover states on primary buttons, emphasis text |
| 800–900 | High-contrast text on light backgrounds |
Tailwind CSS popularized this numbering system. Even if you do not use Tailwind, the convention is widely understood by developers.
Step 3: Verify Contrast and Accessibility
A palette that looks harmonious in a color swatch can fail WCAG contrast requirements when applied to actual UI elements.
Minimum contrast ratios (WCAG 2.1)
| Element type | AA minimum | AAA minimum |
|---|---|---|
| Normal text (< 18px) | 4.5:1 | 7:1 |
| Large text (≥ 18px bold or ≥ 24px) | 3:1 | 4.5:1 |
| UI components and graphical objects | 3:1 | — |
Common failures
- Brand blue text on white background — often fails at 500 weight
- Gray placeholder text — commonly below 3:1
- Light brand background with white text — fails unless background is dark enough
Test every text/background combination in your palette. A color picker tool that displays contrast ratios alongside the color saves enormous time compared to checking after the fact.
Step 4: Convert to All Needed Formats
Your design tool may output HEX, but developers often need RGB, HSL, or CSS variables. Convert once at design time instead of leaving it to developers.
| Format | Use case |
|---|---|
| HEX | CSS properties, design tokens in JSON |
| RGB | JavaScript color manipulation, canvas rendering |
| HSL | Design system scales, theme variation |
| RGB with alpha | Overlays, overlays, hover states |
| HSL with alpha | Dark mode adjustments |
A good color picker tool outputs all formats simultaneously — no manual conversion needed.
Step 5: Dark Mode Derivation
If your product supports dark mode, derive the dark palette from light mode rather than designing it independently.
The inversion principle
Light backgrounds become dark surfaces. Light text becomes dark text. But brand colors stay the same — they are saturated enough to work on both backgrounds.
/* Light mode */
--surface: #FFFFFF;
--text-primary: #111827;
--brand-500: hsl(221 83% 53%);
/* Dark mode */
--surface: #111827;
--text-primary: #F9FAFB;
--brand-500: hsl(221 83% 60%); /* Slightly lighter for dark bg */
The brand color shifts slightly lighter in dark mode because the same absolute hue reads darker against a dark surface than against white.
Step 6: Document and Hand Off
A palette without documentation dies in translation. Provide developers with:
- CSS custom properties — pre-formatted and ready to paste
- Design token JSON — machine-readable for design system tools
- Contrast grid — a table showing every text/background pair and its ratio
- Usage rules — which shade for which purpose
The more explicit the handoff, the fewer Slack messages about "which blue?"
Key Takeaways
- Start every palette with one anchor color, then derive the rest systematically
- Use HSL to build scales — lightness maps to perceived brightness linearly
- Verify WCAG contrast for every text/background combination before committing
- Convert colors to all formats upfront rather than leaving it to developers
- Derive dark mode palettes from light mode — adjust lightness, keep hue
- Document your palette with CSS custom properties, design tokens, and usage rules
Try It Yourself
Pick, convert, and verify colors in one place with our free Color Picker. Choose visually, get HEX, RGB, HSL, and contrast checks — all output simultaneously with no manual conversion.