Long before "color picker" meant a little square you click on a webpage, choosing a precise color was a physical, laborious task — mixing pigment on a palette, comparing swatches under a north-facing window, or flipping through a printed fan deck. The Color Picker on this page compresses that entire history into a single click: pick a hue, drag a saturation/lightness square, and read off the exact HEX, RGB and HSL values behind it.
A short history of choosing colors on a screen
The first graphical color pickers appeared in the early 1980s alongside machines like the Xerox Star and, more famously, the original Macintosh in 1984. Susan Kare's team at Apple had to figure out how to let a mouse-and-bitmap interface represent millions of possible colors using a small, comprehensible widget. Early Mac and Amiga paint programs (MacPaint, Deluxe Paint) used simple palette grids because hardware could only display a limited number of colors at once — often just 16 or 256. As monitors moved from indexed color to true 24-bit color in the 1990s, software like Photoshop 2.0 (1991) introduced the now-familiar hue wheel plus saturation/lightness square, a design borrowed directly from color-science models developed decades earlier for print and television engineering.
How this tool represents color internally
Behind the square-and-slider interface, the picker works in the HSL (hue, saturation, lightness) color space because it maps intuitively to how people describe color — "a darker blue" or "a more muted red" — then converts that value in real time to RGB (the additive model your monitor's red, green and blue sub-pixels actually use) and to HEX (the compact base-16 shorthand browsers have accepted since HTML 3.2 in 1996). The conversion math follows the same formulas defined in the CSS Color Module, run instantly in your browser with no server call.
Where a color picker actually gets used
- Interface design — choosing a brand's primary and accent colors, then checking how they read at different lightness values for hover and disabled states.
- Illustration and digital painting — sampling and adjusting a base tone before building out a full palette of shadows and highlights.
- Data visualization — picking a base hue and generating a controlled range of lightness steps for charts, so categories stay visually distinct.
- Game and asset design — matching a sprite or texture's dominant tone against a style guide.
Frequently asked questions
Why does the same color look slightly different on another screen? Monitors vary in calibration, gamut (sRGB vs. DCI-P3 vs. Adobe RGB) and viewing conditions. The values this tool produces are exact in the sRGB space that the web assumes by default, but a wide-gamut display can render that same sRGB value with slightly different vibrancy.
What's the difference between HSL and HSB/HSV? They look similar but aren't identical — HSL's lightness runs from black through the pure hue to white, while HSB/HSV's "brightness" runs from black to the pure hue with no separate whitening step. Photoshop uses HSB; CSS uses HSL.
Can I paste in an existing HEX code instead of dragging the picker? Yes — type or paste any valid HEX, RGB or HSL value and the picker updates to match, which is useful when you already have a brand color and want to explore nearby shades.
Further reading
MDN — CSS <color> value — Reference for every color syntax browsers accept, including hex, rgb() and hsl().
Wikipedia — HSL and HSV — The mathematical relationship between hue/saturation/lightness and hue/saturation/brightness models.