DevTool Desk

Color Picker/Converter

Shades (click to use as base)

Hue palette (click to use as base)

Contrast checker

Sample text
Contrast ratio: 3.68:1 AA (normal text, 4.5:1) AA (large text, 3:1) AAA (normal text, 7:1)

Pick a color and see it instantly in HEX, RGB, HSL, and CMYK simultaneously. Use your OS's eyedropper to sample a color from anywhere on screen (Chrome/Edge), generate a palette of shades and hues from your base color, and check contrast against another color for WCAG accessibility compliance.

Frequently asked questions

Why isn't the eyedropper button showing up?

The eyedropper uses the browser's native EyeDropper API, which is currently only supported in Chromium-based browsers like Chrome and Edge. It's hidden automatically in browsers that don't support it.

What do the WCAG contrast badges mean?

They show whether your foreground/background pair meets the WCAG 2.1 contrast thresholds: 4.5:1 for AA-level normal text, 3:1 for AA-level large text, and 7:1 for the stricter AAA level — the minimums recommended for readable, accessible text.

Why might CMYK values look slightly different from what my printer software shows?

This conversion uses the simple, device-independent RGB→CMYK formula, which is a reasonable approximation for screen colors. Professional print workflows use ICC color profiles calibrated to specific inks and paper, which can shift values further.