Color Picker
Pick, convert, and generate color palettes. HEX, RGB, HSL, HSB, CMYK plus harmony, contrast, gradients, and image extraction.
All Formats
Recently Used
0 / 12Colors you pick will appear here.
Saved Palette (0 / 20)
Click Save to add the current color to your palette.
How to use
- 1
Click or drag on the color canvas to pick any color. Use the hue slider for the base color and opacity slider for transparency.
- 2
Copy the color in any format — HEX, RGB, HSL, CMYK, CSS variable, or Tailwind class — with one click.
- 3
Use the tabs: Harmony for palettes, Contrast for WCAG checking, Gradient for CSS gradients, Extract to pull colors from any image.
Free Color Picker — HEX, RGB, HSL, CMYK + Palette Generator
Free online color picker with HEX, RGB, HSL, HSB, CMYK. Includes harmony generator, WCAG contrast checker, gradient builder, and image color extractor. No signup, browser only.
Skycally's color picker is built for designers, developers, and anyone who needs precise colors fast. Drag the saturation/brightness canvas, scrub the hue slider, and read your color back in every format you use — HEX, HEX with alpha, RGB, RGBA, HSL, HSLA, HSB/HSV, CMYK, a CSS custom property, and the closest matching Tailwind class. Every format is a single click to copy, and the picker remembers your last twelve colors plus up to twenty pinned to a saved palette.
Beyond the picker, five focused tabs cover the most common color workflows. The harmony generator builds complementary, analogous, triadic, split-complementary, and tetradic palettes from any base color. The contrast checker enforces WCAG 2.1 AA and AAA ratios for normal and large text with a live preview, so you can ship accessible UI without leaving the page. The gradient builder gives you up to five stops, full direction control, linear and radial modes, and copy-ready CSS plus a Tailwind class. The image extractor pulls the eight most dominant colors from any photo you drop in — purely in your browser, nothing uploaded.
Everything runs client-side. Your colors, your saved palettes, and your uploaded images never leave your device — there is no account, no tracking, and no server round-trip. Bookmark the page, pin it as a tab, or use it on mobile with full touch support for the canvas and sliders.
Frequently Asked Questions
What color formats does this picker support?
HEX (6-digit), HEX with alpha (8-digit), RGB, RGBA, HSL, HSLA, HSB/HSV, CMYK, a ready-to-paste CSS custom property (--color-primary), and the closest Tailwind CSS class (e.g. blue-500). Each output updates live and copies with one click.
How does the WCAG contrast checker work?
We compute the relative luminance of your foreground and background colors using the official WCAG 2.1 formula, then return the contrast ratio. AA passes need 4.5:1 for normal text and 3:1 for large text (18pt+/14pt bold). AAA requires 7:1 and 4.5:1 respectively. Badges show pass/fail for each combination instantly.
What color harmony rules are included?
Complementary (180°), Analogous (±30°), Triadic (120° apart), Split-Complementary (150°/210°), and Tetradic (90° apart). Each harmony shows clickable swatches you can promote to the active color or copy directly as HEX.
How does the image color extractor work?
Drop an image, and a canvas reads its pixels, downscales for speed, buckets them into a color histogram, and returns the eight most frequent distinct colors. The image is processed entirely in your browser — it is never uploaded anywhere.
Can I save my favorite colors?
Yes. Click Save to pin up to twenty colors to a palette stored in your browser's localStorage. They persist across page reloads and devices that share the same browser profile. You can also copy the whole palette as a JSON array for use in code.
How accurate is the Tailwind color match?
We brute-force compare your color against the entire Tailwind CSS v3 palette (slate through rose, shades 50-950) using squared Euclidean distance in RGB space, and return the nearest named class. It is deterministic and works offline.
Can I build CSS gradients?
Yes. The gradient builder supports up to five color stops with adjustable positions, an angle slider with preset directions, and a linear/radial toggle. Copy the CSS or grab a Tailwind class with bg-gradient-to-* + from/via/to arbitrary hex values.
Is my data private?
Completely. The picker, all conversions, the harmony generator, the contrast checker, the gradient builder, and the image extractor all run in your browser using JavaScript and the Canvas API. No colors, images, or palettes are ever sent to a server.
You might also like
Other tools you might find useful.