How to use the Color Picker
- Drag inside the large square to choose saturation (left to right) and brightness (top to bottom). On a phone, drag with your finger.
- Move the Hue slider to change the base color and the Opacity slider for transparency.
- Or type exact values into the HEX, RGB or HSL boxes; everything stays in sync.
- Copy the result as HEX, RGB or HSL, or click any tint or shade below to copy that variation.
Features
- Saturation-brightness area with mouse, touch and keyboard control
- Hue and opacity sliders
- HEX, RGB and HSL fields that update each other
- Nine tints and nine shades of the current color
- Eyedropper for any pixel on screen in supported browsers
- Remembers your last color on this device
How this color picker works
The picker is built on the HSV model. The hue slider chooses a position on the color wheel, from red at 0° through yellow, green, cyan, blue and magenta back to red. The large square then shows every version of that hue: moving right increases saturation from gray to vivid, and moving up increases brightness from black to full strength. Any point in the square is one exact color, which the panel on the right reports in three formats.
The opacity slider sets the alpha channel, how see-through the color is. A checkerboard behind the preview shows transparency, and the HEX code gains a fourth pair of digits (for example #5b4cf080 at 50%) while RGB and HSL switch to their rgba() and hsla() forms.
Which format should you copy?
| Format | Example | Best for |
|---|---|---|
| HEX | #5b4cf0 | Style guides, design tools, HTML attributes |
| RGB | rgb(91, 76, 240) | CSS with transparency, image editing, code |
| HSL | hsl(245, 85%, 62%) | CSS themes where you adjust lightness |
All three are interchangeable in CSS. For CMYK, HWB or HSV values, paste the HEX code into the Color Converter.
Picking a color from your screen
Browsers built on Chromium, such as Chrome and Edge on desktop, offer the EyeDropper feature. Press Pick from screen, move the magnifier over any pixel, in this page, another window or even a video, and click to load it into the picker. Press Esc to cancel. In browsers without it, such as Firefox and Safari at the time of writing, the button is simply hidden. To sample colors from a photo you have saved, use the Image Color Picker instead.
Tints and shades
A tint is a color mixed with white and a shade is a color mixed with black. The two strips show nine steps of each, from 10% to 90%. They are useful for building a consistent set of interface colors from one brand color: a pale tint for backgrounds, a mid tint for borders, the base for buttons and a darker shade for hover and pressed states.
Keyboard controls
- Tab to the color square, then use the arrow keys to move by 1%, or hold Shift to move by 10%.
- The hue and opacity sliders respond to arrow keys, Page Up and Page Down, Home and End.
- Type in any field and the rest update as you go; leave the field to tidy up the value.
Tips for choosing interface colors
Very saturated colors are tiring over large areas, so save them for buttons and highlights and use soft tints for backgrounds. Always check text colors against their background with the Contrast Checker; many attractive mid-tones fail accessibility guidelines for body text. Once you have a base color you like, the Color Palette Generator suggests matching colors.
Frequently asked questions
How do I find the HEX code of a color on my screen?
In Chrome or Edge on a computer, press Pick from screen and click the pixel you want. The picker loads it and shows the HEX, RGB and HSL values.
Why is the Pick from screen button missing?
It relies on the EyeDropper feature, which Chromium-based desktop browsers such as Chrome and Edge provide. The button only appears in browsers that support it.
What is the alpha or opacity value?
Alpha controls transparency: 100% is fully solid and 0% is invisible. Colors with alpha are written as rgba(), hsla() or an 8-digit HEX code.
What is the difference between a tint and a shade?
A tint mixes the color with white, making it lighter and softer. A shade mixes it with black, making it darker. A tone, by contrast, mixes it with gray.
Does the picker remember my color?
Yes. Your last color is saved in this browser’s local storage, so it is still there the next time you open the page.