Color Picker
Check WCAG contrast, build CSS gradients, and generate color palettes.
Just need to pick a color or convert HEX ↔ RGB ↔ HSL (with an eyedropper)? Use the HEX to RGB Converter.
Examples
Contrast check
Input
#1A1A1A on #F5F5F5
Output
≈ 16:1 — passes AA & AAA
CSS gradient
Input
#3B82F6 → #9333EA, 90°
Output
background: linear-gradient(90deg, #3B82F6, #9333EA);
Palette
Input
#3B82F6
Output
Shades + complementary, analogous, triadic colors
About this tool
This free online color studio brings three essentials together: a WCAG contrast checker with AA/AAA pass-fail and a live text preview; a CSS gradient builder with a copy-ready declaration; and a palette generator for shades, complementary, analogous, and triadic colors. Every tab has a color picker built in, and everything runs in your browser with no upload. For plain HEX ↔ RGB ↔ HSL conversion and an on-screen eyedropper, use the HEX to RGB Converter.
How to use
- Contrast: set text and background colors to check WCAG accessibility.
- Gradient: pick two colors and an angle, then copy the CSS.
- Palette: enter a base color and click any swatch to copy it.
Who it's for
Designers and developers checking accessibility compliance, building CSS backgrounds, and creating cohesive palettes — without juggling separate tools.
Frequently asked questions
What can this color tool do?
Three things in one place: check WCAG contrast between two colors, build a CSS gradient, and generate shade and harmony palettes from a base color. Every tab has a color picker built in.
Is it free?
Yes — completely free with no sign-up, and everything runs in your browser with no upload.
How does the contrast checker work?
Enter a text color and a background color and it shows the WCAG contrast ratio plus pass/fail for AA and AAA on both normal and large text, with a live preview.
What contrast ratio do I need?
WCAG AA needs at least 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1 respectively. The checker flags each level for you.
Can I copy the CSS gradient and palette colors?
Yes. The gradient tab gives a ready background: declaration to copy, and every palette swatch copies its hex when you click it.
Where do I pick a color or convert HEX/RGB/HSL?
Use the dedicated HEX to RGB Converter — it picks a color (with an on-screen eyedropper on Chrome/Edge) and shows HEX, RGB, and HSL. This studio focuses on what you do with colors: contrast, gradients, and palettes.
Can I grab a color from a web page or image?
Yes — use the HEX to RGB Converter's eyedropper (and its bookmarklet) to capture a color from anywhere on screen on Chrome and Edge, then bring the hex here.
Learn more
Related tools