Color Picker

Pick perfect colors with our advanced visual color picker. Extract colors from images, use the screen eyedropper, simulate color blindness, and get instant HEX, RGB, HSL, HSV, and CMYK values. Built for developers, designers, painters, and photographers.

ON BLACK 9.00:1 AAA (Pass)
ON WHITE 2.33:1 Fail
ENTER COLOR (HEX / RGB / HSL / CSS NAME)
HUE 30°
SATURATION 100%
LIGHTNESS 50%
COLOR FORMATS
HEX #FF8C00
RGB rgb(255, 140, 0)
HSL hsl(33, 100%, 50%)
HSV hsv(33, 100%, 100%)
CMYK cmyk(0%, 45%, 100%, 0%)
CSS darkorange

Drop an image here or click to upload

Supports JPG, PNG, WebP, GIF, SVG
#000000
rgb(0, 0, 0)

Color Blindness Simulation

Aa

Protanopia

No red cones (~1% of males)

#000000

Aa

Deuteranopia

No green cones (~1% of males)

#000000

Aa

Tritanopia

No blue cones (very rare)

#000000

Aa

Achromatopsia

No color vision (extremely rare)

#000000

My Color Library

0

Save your favorite colors. Synced across all color tools.

Import format info

Import a JSON file with this format:

[
  {"hex": "#FF8C00", "name": "Orange"},
  {"hex": "#3B82F6", "name": "Blue"}
]

What This Tool Does

Visual Picker Canvas + Hue + Opacity strips
Screen Eyedropper Pick color from anything
Image Extraction JPG, PNG, WebP, GIF, SVG
Accessibility WCAG contrast + color blindness
All Formats HEX, RGB, HSL, HSV, CMYK

Keyboard Shortcuts

C Copy HEX
S Save to library
R Random color
E Eyedropper

Quick Copy for Developers

CSS Variable --primary-color: #FF8C00;
Tailwind 'primary': '#FF8C00'
SCSS $primary-color: #FF8C00;
RGBA rgba(255, 140, 0, 1)

Visual Color Selection for Everyone

Whether you're a web developer implementing a design system, a graphic designer building brand guidelines, a painter matching reference colors, an interior designer choosing room palettes, or a photographer color-grading images - our Color Picker gives you total control over color selection with an intuitive visual interface.

Click anywhere on the saturation-brightness canvas to find the exact shade you need, use the screen eyedropper to pick colors from anything on your display, or upload an image (including SVG files) to extract its color palette. Fine-tune with HSL sliders, check accessibility with WCAG contrast ratios, and simulate how colors appear to color-blind users.

How to Use the Color Picker

01

Pick Your Color

Click/drag on the canvas to choose saturation and brightness. Use the hue strip for base color, or click Eyedropper to pick from anywhere on your screen.

02

Fine-Tune with Sliders

Use the HSL sliders for precise adjustments, or type any color value (HEX, RGB, HSL, CSS name) directly into the input field.

03

Extract from Images

Upload any image (JPG, PNG, WebP, GIF, SVG) to pick colors from it. Click pixels to sample and get an auto-extracted palette of dominant colors.

04

Copy, Save & Export

Copy in HEX, RGB, HSL, HSV, CMYK, or CSS format. Save favorites to your library and export as JSON for sharing across devices.

Advertisement
Ad

Key Features

Visual Canvas Picker

Interactive saturation-brightness canvas with hue and opacity strips for intuitive color selection.

Screen Eyedropper

Pick any color from your screen - websites, images, apps, desktop - with a single click.

Image Color Extractor

Upload images (including SVG) and click pixels to extract exact colors with auto-palette detection.

Color Blindness Sim

See how your colors appear to people with Protanopia, Deuteranopia, Tritanopia, and Achromatopsia.

WCAG Accessibility

Real-time contrast ratio checks against black and white with AA/AAA compliance indicators.

All Formats + Dev Copy

HEX, RGB, HSL, HSV, CMYK, CSS name plus CSS Variables, Tailwind, SCSS one-click copy.

Advertisement
Ad

Frequently Asked Questions

How do I pick a color?
Click anywhere on the color canvas to select a saturation and brightness. Use the hue strip below the canvas to change the base hue. You can also type a HEX, RGB, or HSL value directly into the manual input field, use the HSL sliders, or click the Eyedropper button to pick any color from your screen.

How does the screen eyedropper work?
Click the Eyedropper button to activate the screen color picker. Your cursor will change to a magnifying crosshair. Click on any pixel on your screen (including other browser tabs, desktop, or any application) to pick that exact color. This feature works in Chrome, Edge, and other Chromium-based browsers.

Can I extract colors from an image or SVG?
Yes! Go to the "Image Picker" tab, upload or drag-and-drop an image (JPG, PNG, WebP, GIF, or SVG), then click anywhere on it to pick a pixel color. The tool also automatically extracts a palette of dominant colors from your image.

What is the color blindness simulator?
The color blindness tab shows how your selected color appears to people with different types of color vision deficiency, including Protanopia (red-blind, ~1% of males), Deuteranopia (green-blind, ~1% of males), Tritanopia (blue-blind, very rare), and Achromatopsia (total color blindness). This helps designers and interior designers create accessible and universally appealing color schemes.

What color formats are supported?
The color picker supports HEX, RGB, HSL, HSV, CMYK, and CSS named colors. You can copy any format with a single click. Developer-friendly formats like CSS Variables, Tailwind config, SCSS variables, and RGBA are also available in the Quick Copy section.

How do I save colors to my library?
Click the "Save" button in My Color Library or press "S" on your keyboard. All saved colors are stored locally in your browser and persist between sessions. You can also export your library as a JSON file and import it on another device. Your library is shared across all color tools on this site.

Is this tool useful for painters and interior designers?
Absolutely! Painters can upload reference photos and extract exact color palettes. Interior designers can test color combinations, check accessibility contrast, and simulate how colors appear to color-blind individuals. The CMYK values are particularly useful for print work, and the color library helps you save and organize project colors.

Is my data stored on your servers?
No. All color picking and processing happens entirely in your browser using JavaScript and the HTML5 Canvas API. Images you upload for color extraction are processed locally and never leave your device. Saved colors are stored in your browser's localStorage.