Home›Dev Tools›Color Picker
🎨

Advanced Color Picker

Explore colors, convert developer formats, create harmonious palettes and verify exact WCAG contrast—all in one private browser workspace.

Exact WCAG contrastPalette exportPrivate browser tool
#3B82F6
HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
HSVhsv(217, 76%, 96%)
CMYKcmyk(76%, 47%, 0%, 4%)
CSS--color: #3B82F6;
Accessibility (WCAG)
White: Black:

Test custom text contrast

on selected background—
AA textAA largeAAA text

Generated palettes

Complementary

Analogous

Triadic

Shades

Recent

Accurate accessibility checksUses the WCAG relative-luminance formula rather than a brightness approximation, with AA, large-text and AAA results.
Developer-ready formatsCopy HEX, RGB, HSL, HSV, CMYK or a CSS custom property, then export complete palettes as CSS or JSON.
Harmonious palette ideasGenerate complementary, analogous, triadic and tonal shade families from any selected base color.

How to use the color picker

  1. Choose a color using the native picker, enter a six-digit HEX value, generate a random color or use the screen eyedropper where supported.
  2. Copy the format your design or codebase needs.
  3. Review generated harmonies and click any swatch to make it the active color.
  4. Choose a text color in the custom contrast tester and check WCAG results before publishing.
  5. Copy CSS variables or download the palette as JSON for reuse.

Understanding color formats

HEX and RGB describe screen colors directly. HSL and HSV organize a color by hue, saturation and lightness or value, which can be easier when creating variants. CMYK shown here is a mathematical conversion for planning only; professional print output still depends on the printer, ink, paper and ICC color profile.

Frequently Asked Questions

Is the contrast ratio WCAG accurate?

The tool linearizes sRGB channels and calculates relative luminance and contrast according to the WCAG formula. Results still depend on the exact foreground, background, font size and weight used in the final interface.

Why is the screen eyedropper unavailable?

The EyeDropper API is not supported by every browser and generally requires HTTPS. When unavailable, use the native color control or paste a HEX value.

Are recent colors uploaded?

No. Recent selections are stored only in this browser's local storage so they can remain available after a refresh.

Is the CMYK value print-ready?

No. It is a convenient mathematical estimate. Accurate print conversion requires the intended press and paper profile in color-managed design software.