Color picker with color names

How to use the color picker

1. Choose a hue on the rainbow strip: red, orange, yellow, green, blue, purple and back to red.
2. Drag inside the square to set saturation (left to right, from gray to full color) and brightness (bottom to top, from black to full light).
3. Or type exact values into the HEX, RGB or HSL fields. Everything stays in sync.
4. Read the name on the right: the closest common name, how close it is, and the most precise name from our full list of over 30,000.

The square and the strip also work from the keyboard: focus them and use the arrow keys, with Shift for bigger steps. Colors you settle on appear under Recent colors, and the heart button keeps a color in your saved list on this device.

Pick a color from anywhere on your screen

In Chrome, Edge and Opera on a computer, the Pick from screen button turns your cursor into an eyedropper that works outside this page too: click any pixel on your screen, in another window or app, and the picker jumps to that color and names it. Browsers that do not support it yet, such as Safari and Firefox, hide the button. For a photo, use color name from image instead.

HEX, RGB and HSL in one minute

HEX is the same as RGB written in base 16: #88B378 means red 136, green 179, blue 120. RGB gives each channel from 0 to 255. HSL describes the color the way people think about it: hue as an angle on the color wheel, saturation as a percentage of color, lightness from black through the pure color to white. The picker square itself uses HSV, where the top-right corner is always the fullest version of the hue. We also show OKLCH, the modern CSS format based on how the eye sees lightness.

Tints and shades

The row under the picker shows nine steps of the same hue, from a pale tint to a deep shade, built in the OKLab color space so the steps look evenly spaced. Click any step to make it the current color. It is a quick way to build a monochrome palette for a design.