Color Picker
A professional color picker with HEX, RGB, HSL, HSV, and CMYK values, opacity control, WCAG contrast checker, accessibility score, and a built-in palette generator.
#3B82F6#3B82F6rgb(59, 130, 246)rgba(59, 130, 246, 1.00)hsl(217, 91%, 60%)hsv(217, 76%, 96%)cmyk(76%, 47%, 0%, 4%)Contrast checker (WCAG 2.1)
3.68:1Palette generator
Pick any color, convert instantly between HEX / RGB / HSL / HSV / CMYK, tune opacity, and copy the value in any format. Check WCAG contrast against a second color and generate complementary, analogous, triadic, tetradic, and monochromatic palettes.
About the Color Picker
A production-quality picker for designers and developers. Type a HEX code, drag an RGB or HSL slider, or use your OS's native color picker — every other value updates instantly. Copy the color as HEX, RGBA, HSL, HSV, or CMYK, tune opacity on a checkerboard preview, run a WCAG contrast check against any second color, and generate matching palettes. Everything runs in the browser.
Common use cases
- Extracting design-system tokens from a HEX brand color. - Building CSS variables in HSL for easy theming. - Preparing CMYK values for a print handoff. - Auditing button, link, and body-text pairings for WCAG compliance. - Generating on-brand accent, tint, and shade palettes. - Prototyping semi-transparent overlays and glass effects.
Tips for great results
- Start from HSL when you want to build a theme — the L (lightness) slider gives you tints and shades of the same hue. - For UI text, aim for at least 4.5:1 contrast (AA normal). Icons and large headlines can go as low as 3:1 (AA large). - Use the 8-digit HEX + alpha value for compact CSS: e.g. `#3B82F633` = 20% opacity. - Click any palette swatch to make it the new base color and iterate quickly. - For print work, treat the CMYK output as a starting point and always proof against a physical sample.
Limitations
- CMYK conversion assumes standard sRGB input and no ICC profile — it is directional, not press-accurate. - The contrast checker follows WCAG 2.1. WCAG 3 / APCA is not implemented yet. - Palettes are generated with pure HSL math; artist-tuned palettes may look different. - The 8-digit HEX alpha format is not supported by very old browsers.
Key features
Live conversion between every common color space, with copyable values in one click.
Adjust alpha from 0–100% and get both RGBA and 8-digit HEX (with alpha) instantly.
Compare any two colors and see pass/fail for WCAG 2.1 AA and AAA at normal and large text sizes.
A 0–100 score plus color-coded pass badges make it obvious whether a pairing is safe to ship.
Complementary, analogous, triadic, tetradic, monochromatic, and shade palettes derived from your base color.
The color preview, sliders, and palettes all update as you drag — no submit button.
Every value has its own copy button — HEX, RGBA, HSL, CMYK, or a whole palette swatch.
The picker never talks to a server. Great for confidential brand work.