Why We Built the Color Picker
- Designers juggle color across web, print, and UI, and a single format or a failed contrast check can derail a whole project. We built a picker that hands you HEX, RGB, HSL, and CMYK at once, samples colors from any image, builds harmony-based palettes, and checks WCAG contrast in the same place. It saves and exports your colors, runs entirely in your browser, and stays completely free.
Pick and Convert a Color in Three Steps
Choose a color from the wheel, enter a value directly, or upload an image and use the eyedropper to sample any pixel. The tool instantly shows HEX, RGB, HSL, and CMYK, which you can copy with a click. From there, generate a harmony-based palette from your base color, run a WCAG contrast check on any text-and-background pair, and save or export the colors you like. Everything runs in your browser.
Common Mistakes to Avoid
❌ Relying on a color you only checked on one screen
✓ Solution:
The same value looks different on OLED versus LCD, and on cheap or older displays a neon like #00FF00 can render muddy. Test key colors across a few screens, and for critical UI elements lean toward shades with reliable cross-device rendering rather than the most saturated option.
❌ Ignoring color blindness
✓ Solution:
Roughly 8% of men have some color vision deficiency, and red-green combinations are the most problematic. Don't rely on color alone to convey meaning — pair it with icons, text labels, or patterns, and test combinations so information isn't lost for users who can't distinguish those hues.
❌ Eyeballing print colors
✓ Solution:
RGB is additive for screens; CMYK is subtractive for ink, so a vibrant on-screen purple can print dull or grayish, and paper stock and coating shift it further. Use the CMYK values for print work, specify coated versus uncoated for brand colors, and request a printed proof before any large run.
❌ Skipping the contrast check
✓ Solution:
Low-contrast text — light gray on slightly lighter gray — can look stylish but be unreadable for many users, and inaccessible designs carry real legal risk. Run every text-and-background pair through the contrast checker, aiming for at least AA (4.5:1), and 7:1 for body text where readability matters most.
❌ Documenting colors in only one format
✓ Solution:
A single HEX value isn't enough when the same color has to work in a stylesheet, a print file, and a brand guide. Record colors in the formats each medium needs — HEX or RGB for web, CMYK for print, and a Pantone reference for brand standards — so the color stays consistent everywhere it appears.
Frequently Asked Questions
Upload an image or drag it into the tool, then hover the eyedropper over any pixel and click to sample it. The HEX, RGB, HSL, and CMYK values appear instantly, and you can click any code to copy it. Zooming in lets you select precisely, which is ideal for matching a brand color from a logo or pulling a palette from a reference image.
HEX is a six-digit code used mainly in web and CSS. RGB sets red, green, and blue from 0–255 for screens. HSL describes hue (0–360°), saturation, and lightness, which is more intuitive for adjustments. CMYK gives ink percentages for print. The tool shows all four at once, so you can use HEX or RGB for web and CMYK for print without converting manually.
Start with a base color, then use the harmony rules: complementary opposites for high-contrast CTAs, analogous neighbors for calm schemes, triadic for balanced vibrancy, monochromatic for a clean single-hue look, and tetradic for richer four-color sets. Generate a few options, check them against your accessibility needs, and save the palette that fits your project.
WCAG contrast measures the luminance difference between text and its background. AA requires at least 4.5:1 for normal text (3:1 for large text), and AAA requires 7:1. Meeting these keeps text readable for users with low vision or color blindness, and inaccessible designs have led to real legal action. The built-in checker tests any pair before you ship it.
Yes. Colors you pick are kept in session history, and you can star favorites for later. From there you can export as CSS variables or a JSON palette, or share them with your team — useful for documenting brand colors or building a design system. Saved colors persist between visits in the same browser.
Color Picker: Extract HEX, RGB, HSL & CMYK Colors, Build Palettes & Check Contrast — Free & Instant
The Color Picker lets you choose a color from a visual wheel or sample it straight from an uploaded image with an eyedropper, then gives you the value in every format you need — HEX for web, RGB for screens, HSL for intuitive adjustments, and CMYK for print. Zoom in for pixel-precise selection when matching brand colors from a logo or pulling a palette from an inspiration image.
It goes well beyond single-color picking. A palette generator builds schemes from established harmony rules — complementary, analogous, triadic, monochromatic, and tetradic — so you can start from one brand color and get a balanced set. A built-in WCAG contrast checker tests foreground and background pairs against AA (4.5:1) and AAA (7:1) thresholds, helping you keep text readable and designs accessible before launch rather than after.
It's built for web developers, UI/UX and graphic designers, digital artists, and print professionals who need accurate, consistent color across media. Copy any value with a click, save colors to history and favorites, and export as CSS variables or JSON for your design system. Everything runs in your browser, with nothing to install. No signup, completely free.
Five related tools picked to keep users moving.
