Free Color Picker & Converter
Pick any color and get HEX, RGB, HSL, HSV, OKLCH, CMYK, and Tailwind output. Six color-theory schemes (complementary, analogous, triadic, tetradic, split, monochromatic), WCAG contrast checker, screen eyedropper, image color extractor, and a saved palette.
AI palette generatorFree
Describe your brand or project — AI builds a 5-color palette anchored to your current color.
Tints & shades
Color schemes
complementary
analogous
triadic
tetradic
split
monochromatic
WCAG contrast
Extract from image
Frequently asked questions
What is the difference between HSL, HSV and OKLCH?
HSL and HSV both use a hue/saturation cylinder, but their saturation and lightness/value axes differ in math. OKLCH is a modern perceptual color space (part of CSS Color 4) that produces results closer to what the human eye perceives — making it the best choice for gradients and accessible palettes. HEX and RGB describe the same color in different notations.
What is a good WCAG contrast ratio?
WCAG 2.2 sets these minimums: normal text 4.5:1 (AA) or 7:1 (AAA); large text (18pt+ or 14pt+ bold) 3:1 (AA) or 4.5:1 (AAA); UI elements and graphics 3:1. The tool tags any color pair as AAA, AA, AA Large, or Fail.
Does the eyedropper work in every browser?
The EyeDropper Web API is currently supported in Chromium browsers (Chrome, Edge, Opera, Brave). Firefox and Safari don't expose it yet. Click the Eyedrop button — if your browser doesn't support it, you'll get a friendly note.
How do I pick colors that work well together?
Use one of the schemes generated for you: complementary (opposite on the wheel, high contrast), analogous (adjacent, soft and harmonious), triadic (3 evenly spaced, vibrant and balanced), tetradic (4 evenly spaced, rich and complex), split-complementary (softer alternative to complementary), or monochromatic (one hue at varying lightness).
How is the image color extraction done?
Upload an image and the tool downsamples it to ~200 px wide, samples pixels at intervals, quantizes them to 4-bit-per-channel buckets, and returns the 6 most frequent average colors. Runs entirely in your browser — your image is never uploaded.
Pick colors with HEX / RGB / HSL / HSV / CMYK / OKLCH outputs. Adds AI palette generator — describe your brand brief and AI returns a cohesive 5-color palette with WCAG contrast checks.
How to use
- 1Use the color picker or paste HEX / RGB / HSL.
- 2All formats convert live — copy any.
- 3Browse tints & shades + color schemes (complementary, analogous, triadic).
- 4Or click 'AI palette generator' → describe your brief → AI returns 5 colors + CSS variables.
- 5Save palettes locally for later.
Why use this tool
- 6 color formats in one place — designers stop bouncing between websites.
- AI palette generator replaces Coolors / Adobe Color free tiers.
- WCAG AA / AAA contrast scores built into every comparison.
- Image color extraction from uploads — perfect for brand work.
Real-world examples
Brand palette
Brief 'cozy coffee shop, warm & inviting' → AI returns 5 colors (deep brown, warm cream, terracotta, soft black, off-white) with usage tips.
SaaS dashboard
Brief 'modern SaaS, energetic but trustworthy' → AI gives blue primary + complementary accent + neutral palette + ready-to-paste CSS vars.
Image color extraction
Upload an image → tool extracts the 6 dominant colors automatically.