Color Picker
Pick any color and instantly get HEX, RGB, HSL, HSV, and CMYK values. Color harmonies, contrast checker, palettes, and saved colors — all in one place.
How to Use the Color Picker
1. Pick a color — click the color swatch on the left to open your browser's native color picker, or type a HEX code directly into the field.
2. Switch formats — use the HEX / RGB / HSL tabs to edit via sliders or number inputs. All formats update in sync.
3. Copy any value — click Copy next to any format in the "All Formats" list to copy it to clipboard.
4. Check harmonies — the harmony panel shows complementary, analogous, triadic, split-complementary, tetradic, tints, and shades. Click any swatch to switch to that color.
5. Check contrast — enter a background color in the WCAG panel to see the contrast ratio and whether it passes accessibility standards.
6. Save colors — click "Save Current Color" to bookmark your favorite colors in the browser.
Color Format Guide
- HEX (#RRGGBB) — The web standard. Six hexadecimal digits representing red, green, and blue channels 0–255. Most common in CSS and design tools.
- RGB (0–255 each) — Red, Green, Blue as decimal values. Directly maps to how screens emit light. Used in CSS:
rgb(167, 139, 250). - HSL (0–360°, 0–100%, 0–100%) — Hue (color wheel angle), Saturation (color intensity), Lightness (black to white). Most intuitive for designers. CSS:
hsl(258, 89%, 76%). - HSV/HSB (0–360°, 0–100%, 0–100%) — Similar to HSL but uses Value (brightness) instead of Lightness. Used by Photoshop and many design tools.
- CMYK (0–100% each) — Cyan, Magenta, Yellow, Key (Black). The print model — used in professional printing and physical design work.
WCAG Contrast Explained
Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for people with low vision or color blindness.
- AA (4.5:1) — Minimum for normal text. Required for most accessibility compliance.
- AA Large (3:1) — For large text (18pt+ or 14pt bold) and UI components.
- AAA (7:1) — Enhanced contrast. Required for the highest accessibility level.
Use the contrast checker to test your foreground/background color combinations before shipping your designs.
Frequently Asked Questions
About This Tool
Color Picker lets you visually pick any colour and instantly get its HEX, RGB, HSL, CMYK, and CSS variable values. Supports eyedropper sampling from your screen (Chrome/Edge), history of recent picks, and one-click copy for each format.
How to Use
- Click the colour swatch or gradient canvas to pick a colour.
- Use the hue slider to change the base hue, then click in the saturation/brightness square.
- Enter a HEX, RGB, or HSL value directly to jump to that colour.
- Use the Eyedropper button (Chrome/Edge) to sample a colour from anywhere on screen.
- Click any format value to copy it.
Logic & Algorithm
The colour picker canvas is drawn with a 2D gradient: horizontal white→selected-hue and vertical opaque→black overlaid. The clicked pixel's [r,g,b] values are read with getImageData(). RGB→HSL conversion uses the standard normalised formula; RGB→CMYK divides by the max channel value. The Eyedropper uses the EyeDropper Web API.