Color Picker
Pick colors and copy HEX, RGB or HSL.
Pick from Image
Drop an image here
or click to browse - hover the image to magnify, click to pick a pixel
Picker
Values
Color Harmonies
Tints & Shades
Contrast Check (WCAG)
Color Blindness Simulation
A quick preview of how this color may appear to viewers with common types of color vision deficiency.
Saved Colors
Recent Colors
How to use
- Use the wheel and slider to dial in a colour, or paste a hex or RGB value.
- Drop an image to eyedrop colours directly from the pixels.
- Toggle between hex, RGB, HSL, HWB, and OKLCH representations.
- Pin colours you like to the swatch tray for easy comparison.
- Copy any code with one tap and paste it into your design tool.
Frequently asked questions
What is OKLCH and should I care?
OKLCH is a perceptually uniform color space. Changing the lightness component produces a visually linear change, which makes it ideal for accessible palettes and dark-mode systems. It is supported in all current major browsers.
Can I eyedrop a pixel from outside the browser window?
Yes if your browser supports the EyeDropper API (Chromium-based browsers and Safari Technology Preview). Otherwise, drop your image into the page and eyedrop from inside.
Does this work in dark mode?
Yes. The picker adapts to your site theme and the chosen color is shown over both light and dark backgrounds so you can preview contrast.
Are my pinned colors saved?
Yes. Pinned swatches persist in your browser's local storage on this device only. Clearing site data resets the tray.
HEX, RGB and HSL describe the same colour three different ways
HEX (#D4A373) is RGB written in base 16: D4 is 212 red, A3 is 163 green, 73 is 115 blue. It is compact and universal in CSS, but unreadable to humans. RGB exposes the same three channels as decimals, which helps when you are programmatically blending colours. HSL re-maps everything into hue (0-360 degrees around the colour wheel), saturation and lightness, and it is the only one of the three that matches how designers actually think: "same hue, a bit lighter" is a one-number change in HSL and an opaque three-number change in HEX.
Practical workflows
- Building a hover state? Keep H and S fixed, move L by 8-12 points. The result stays on brand without guesswork.
- Need a tint scale for a design system? Generate steps at L = 95, 85, 70, 55, 40, 25 with constant hue.
- Matching a colour from a photo? Sample several adjacent pixels. JPEG compression and lighting make single-pixel picks unreliable.
- Working with developers? Hand off HEX for CSS and the HSL triplet for documentation, since the HSL values explain the system.
A note on colour on screens
The same HEX value renders differently on a cheap TN panel, a calibrated designer display and an OLED phone in night mode. For brand-critical colour, define it once in HEX, check it on at least two real devices, and verify text contrast with a contrast checker rather than your eyes. Perceived colour is a property of the viewing setup as much as the code.
Quick reference: formats at a glance
- 3-digit hex is shorthand: #fa3 expands to #ffaa33 by doubling each digit.
- 8-digit hex appends alpha: #D4A37380 is the same terracotta at 50% opacity; in functional notation that is rgb(212 163 115 / 0.5).
- HSL hue landmarks: 0 red, 60 yellow, 120 green, 180 cyan, 240 blue, 300 magenta. Saturation 0% is always grey regardless of hue.
- Pure neutrals have equal RGB channels; the moment channels diverge, the grey takes on a temperature.
- CSS named colours (rebeccapurple, tomato) are fixed hex values underneath; fine for prototypes, replaced by tokens in production.
One workflow habit worth adopting: record every picked colour with a note about where it came from and what it is for. A bare hex value in a file three months later answers neither question.
Advertisement