Online color picker

Pick, convert, and build a complete palette.

Choose a color visually, fine-tune HEX, RGB, CMYK, HSL, or OKLCH values, generate harmonies, test accessibility, map UI roles, and export a production-ready color system.

CPS Everywhere

Use a CPS code, HEX, RGB, CMYK, or OKLCH value in any Playground workflow.

Global working color

#2563EB · HEX

Browse CPS

Color workspace

Pick, convert, harmonize, lock, reorder, save, and export colors.

Universal color input

#2563EB · HEX

Current color

#2563EB

oklch(54.6% 0.215 263)

HEX color

Harmony

Palette size

RGB sliders

Red

Green

Blue

CMYK sliders

Cyan

Magenta

Yellow

Black

OKLCH sliders

Lightness

Chroma

Hue

Your palette

Lock colors before creating a new variation, edit any swatch, or change the order.

Tints, tones, and shades

CSS variables

:root {
  --palette-1: #52EFBD;
  --palette-2: #24C6EB;
  --palette-3: #2463EB;
  --palette-4: #4824EB;
  --palette-5: #8F13C9;
}

Tailwind v4

@theme {
  --color-brand-50: oklch(96.8% 0.018 233); /* #E9F7FF */
  --color-brand-100: oklch(93.1% 0.036 242); /* #D4ECFF */
  --color-brand-200: oklch(86% 0.072 248); /* #ACD6FF */
  --color-brand-300: oklch(77% 0.119 256); /* #80B7FF */
  --color-brand-400: oklch(67.3% 0.173 260); /* #5493FF */
  --color-brand-500: oklch(58.9% 0.215 263); /* #3271FA */
  --color-brand-600: oklch(50% 0.203 263); /* #1D56D4 */
  --color-brand-700: oklch(41.9% 0.177 263); /* #1241AB */
  --color-brand-800: oklch(34% 0.143 263); /* #0B2F80 */
  --color-brand-900: oklch(26.9% 0.104 263); /* #082158 */
  --color-brand-950: oklch(17.9% 0.064 263); /* #030F2D */
}

Connected color workflow

Move from one color to a tested design system

The Playground keeps color selection, palette generation, accessibility checks, semantic roles, print planning, and exports in one connected workspace.

How to use this tool

1
Pick or enter a color
Use the visual picker or type HEX, RGB, CMYK, HSL, or OKLCH values.
2
Generate and refine a palette
Choose a harmony, lock important swatches, create a new variation, and reorder colors.
3
Test and assign roles
Run the Readiness Score, inspect every color pair, and map surfaces, text, actions, and status roles.
4
Export the result
Download images, code, design tokens, print references, or a complete design-system pack.

Useful for

Brand and website color exploration
Accessible UI palette design
HEX, RGB, CMYK, and OKLCH conversion
Design-system and developer handoff

What the Playground stores

Palettes, role mappings, and projects are stored in your browser unless you export or share them. Uploaded images and local project data are not sent to a Color Pick account because no account is required.

Important limitations

A high Readiness Score is an internal planning result, not an accessibility certification.
CMYK and print previews are approximations until confirmed with a calibrated proof.
Always test colors in the final interface, content, device, and production context.

Common questions

Answers before you export.

Which color formats can I use?

The Playground supports HEX, RGB, HSL, CMYK approximations, and OKLCH, with live conversion between the formats.

Can Color Pick fix a weak palette automatically?

Yes. Fix My Palette can improve contrast, separation, role coverage, print planning, and palette balance while preserving the palette’s general character.

Where are saved palettes stored?

Saved palettes and local projects remain in browser storage on the current device. Export a backup before clearing browser data.

Color Guides

Learn with practical color guides

Browse all guides

How to Create a Color Palette That Actually WorksBuild a role-based palette from one anchor color.How to Build an Accessible Color PalettePlan contrast, focus, states, and non-color cues.How to Design Colors for Dark ModeCreate layered surfaces and theme-ready role values.