Color Picker
Identify the color code of any pixel on your screen.
Inspect, Extract, and Convert Colors: Instant HEX, RGB, HSL & CMYK Color Picker
You are browsing a beautifully designed website or reviewing an inspirational mood board, and a specific shade of navy blue or sunset orange catches your eye. You want to replicate that exact shade in your CSS stylesheet, Figma mockup, or Tailwind configuration.
Guessing color codes by adjusting random sliders rarely matches the original shade, resulting in mismatched brand colors, inconsistent button states, or clashing design elements.
Our free online Color Picker gives you total control over digital color. Upload any image, photograph, or screenshot, hover over any pixel with the precision magnifying lens, and instantly copy the exact HEX code, RGB values, HSL coordinates, or CMYK print values with a single click.
Understanding the Core Digital Color Models
1. HEX Codes (Hexadecimal Notation)
A 6-character alphanumeric string prefixed by a hash sign (e.g., #4F46E5). The first two characters represent Red, the middle two Green, and the last two Blue, ranging from 00 (no light) to FF (full intensity). HEX is the absolute standard across HTML, CSS, SVG, and web design frameworks.
2. RGB & RGBA (Red, Green, Blue, Alpha)
Defines colors using integers from 0 to 255 for each primary light channel (e.g., rgb(79, 70, 229)). Adding an alpha channel (rgba(79, 70, 229, 0.85)) controls background opacity, making it indispensable for frosted glass modals and overlay drop shadows.
3. HSL (Hue, Saturation, Lightness)
The most intuitive color model for human designers (e.g., hsl(243, 75%, 59%)). Hue is an angle on the 360-degree color wheel (0 is Red, 120 is Green, 240 is Blue). Saturation is color vibrancy (0% is gray, 100% is vivid). Lightness controls brightness (0% is pitch black, 100% is pure white). HSL makes creating harmonious color palettes, hover states, and dark mode variants effortless.
4. CMYK (Cyan, Magenta, Yellow, Key/Black)
The four-color subtractive ink system used by commercial printing presses. Screens emit light (additive RGB), whereas physical paper absorbs and reflects light (subtractive CMYK). Converting your digital design colors to CMYK before sending business cards, flyers, or merchandise to the print shop prevents dull or unexpected color shifts.
Designing for Accessibility: The 4.5:1 Contrast Rule
Picking beautiful colors is only half the battle; ensuring your users can actually read your content is equally essential. Low-contrast text frustrates mobile users in bright sunlight and makes your website completely inaccessible to millions of people with vision impairments.
👁️ WCAG 2.1 Contrast Standards
- Level AA (Minimum Requirement): Standard body text must achieve a contrast ratio of at least 4.5:1 against its background. Large text (18pt+ or 14pt bold) requires at least 3:1.
- Level AAA (Enhanced Standard): Demands a 7:1 contrast ratio for normal body copy, ensuring effortless readability on all mobile displays.
- Interactive Elements: Form input borders, toggle switches, and graphical icons must satisfy at least a 3:1 contrast ratio against adjacent surfaces.
Frequently Asked Questions
How do I pick a color from an image using this tool?
Upload your image via drag-and-drop or file selector. Move your cursor across the preview canvas—the built-in magnifying loupe zooms in pixel-by-pixel. Click on the desired pixel to lock the color and copy its HEX or RGB code to your clipboard.
Can I pick colors directly from outside my browser window?
Yes! If your browser supports the native EyeDropper API (supported in Google Chrome, Microsoft Edge, and Opera on desktop), clicking the "Pick from Screen" button lets you sample colors from any desktop application, Photoshop window, or secondary monitor.
Why do printed colors sometimes look duller than on my monitor?
Computer monitors have a much wider color gamut (sRGB or DCI-P3) and actively shine light into your eyes. Commercial ink on paper operates under subtractive CMYK physics, which has a narrower gamut. Neon greens, electric cyans, and hyper-saturated purples cannot be faithfully reproduced in standard four-color offset printing without custom Pantone spot inks.
Is there any data sent to third parties?
None. The color picker operates locally in your browser memory using HTML5 canvas context. No images, screenshots, or extracted hex palettes are uploaded or stored.