Pick, convert and build with color, precisely.
A full color workspace — visual picker, format conversion, palette generation, and accessibility checks. Runs entirely in your browser.
Color Picker
Drag on the canvas, sample from your screen, or type a hex code to start.
--color-primary: #2DD4BF;
Color harmony
Generate a palette based on the current color.
Gradient generator
A two-stop linear gradient built from the current color and its complement.
Recent & saved colors
Your last 12 colors are kept automatically. Save the ones you want to keep.
Contrast checker
Checks the current color as text against white and black backgrounds, per WCAG 2.1.
Color blindness preview
Approximate simulation of how the current color appears with common color vision deficiencies.
Search by name
Type a CSS color name — or find the closest named color to what's picked.
100% private
Every calculation — picking, converting, palette building — happens locally in your browser. Nothing is uploaded to a server.
Instant & free
No sign-up, no watermark, no daily limits. Pick a color and every format updates in real time.
Built for developers
Copy straight to CSS variables, SCSS, Tailwind, Swift, Android XML or Flutter — plus WCAG contrast checks.
What is a color picker?
A color picker is a tool for selecting, inspecting, and converting colors between the formats used across design and code — HEX, RGB, HSL, HSV, and CMYK. Instead of guessing values by hand, you pick a color visually on a hue-and-brightness canvas, sample it directly from your screen with an eyedropper, or type in a known code, and immediately see it expressed in every other format.
Designers use a color picker to build consistent palettes, generate harmonious combinations like complementary or analogous colors, and check that text meets WCAG contrast requirements before shipping a design. Developers use it to grab a value in the exact syntax their codebase expects — a CSS variable, a Tailwind class, or a native color object for iOS, Android, or Flutter — without manually retyping or reformatting values.
This tool keeps every one of those steps in one place: pick or sample a color, fine-tune it with sliders, generate a matching palette or gradient, verify accessibility, and copy the exact code you need — all client-side, with nothing sent to a server.
Frequently asked questions
It uses your browser's native EyeDropper API to sample any pixel on your screen — including outside the browser window on supported browsers — and loads that exact color into the picker. If your browser doesn't support it, the button explains what's happening and you can still pick colors visually or by hex code.
No. All picking, conversion, palette generation, and contrast checking run entirely in JavaScript in your browser. Recent colors and saved favorites are stored only in your browser's local storage, never sent to a server.
Both describe color using hue, but HSL uses lightness (0% = black, 100% = white) while HSV/HSB uses value/brightness combined with saturation, which is closer to how the visual picker canvas works. This tool keeps both in sync automatically.
It computes the relative luminance of the foreground and background colors per the WCAG 2.1 formula, then derives the contrast ratio. A ratio of 4.5:1 or higher passes AA for normal text, and 7:1 or higher passes AAA.
The CMYK values shown use a standard RGB-to-CMYK approximation, which is a reasonable starting point for on-screen mockups. For final print production, always confirm against your printer's specific color profile.