Color Workbench — Convert, Pick, Palette & Contrast Tool
Color Workbench — Convert, Pick, Build Palettes and Check Contrast
One page for the color jobs developers and designers repeat every day: convert a color between formats, find harmonious companions, check text contrast against WCAG, build a gradient, and export the result as CSS, SCSS, Tailwind or design tokens. Everything runs in your browser.
Convert between color formats
Enter a color in any common notation and read it back in all the others at once:
| Format | Example |
|---|---|
| HEX | #3B82F6 |
| RGB / RGBA | rgb(59 130 246) |
| HSL / HSLA | hsl(217 91% 60%) |
| HSV | 217°, 76%, 96% |
| CMYK | 76%, 47%, 0%, 4% |
| LAB / LCH | perceptual, device-independent models |
| OKLCH | the modern CSS perceptual space — oklch(...) |
| XYZ | the CIE reference space the others are defined from |
Click any value to copy it.
Build palettes
- Harmonies — monochromatic, analogous, complementary, split-complementary, triadic and tetradic palettes generated from the current color. Click a swatch to make it the current color.
- Shades, tints and tones — the same hue mixed with black, white and grey, for hover states, borders and backgrounds.
- A Tailwind-style scale — a 50–950 ramp you can drop into a Tailwind config.
- Saved colors — keep favourites while you work.
Check contrast (WCAG)
The accessibility panel measures the contrast ratio of the current color against white, black, common greys and a custom background, and marks each pair against the WCAG 2.x thresholds:
| Level | Normal text | Large text (≥ 24px, or ≥ 18.66px bold) |
|---|---|---|
| AA | 4.5 : 1 | 3 : 1 |
| AAA | 7 : 1 | 4.5 : 1 |
Use it before shipping a brand color as body text: many saturated mid-tones pass AA only for large text.
Gradients
Build linear, radial and conic gradients with multiple color stops, set the angle, and copy the CSS — for example linear-gradient(135deg, #3B82F6 0%, #9333EA 100%).
Export for your codebase
Export the current color and its variants as CSS custom properties, SCSS variables, a Tailwind color object, JSON, or design tokens.
Which format should I use in CSS?
- HEX is compact and universally supported — fine for fixed brand colors.
- HSL is easiest to adjust by hand: change lightness for hover and active states.
- OKLCH keeps perceived lightness consistent across hues, so a palette built in OKLCH has even steps — the best choice for generated scales and themes in modern browsers.