How to pick a color
- Drag in the large square to choose how strong and how bright the color is, and along the rainbow bar to change the hue. The bar below sets the opacity.
- Or type a color you already have into any box:
#FF6347,rgb(255 99 71),hsl(9 100% 64%),oklch(…)or a name liketomato. All the other codes update. - Press Copy next to the format you need. In Chrome and Edge, Pick from screen grabs a color from anywhere on your screen, even outside the browser.
Picking a color
The square shows every strength and brightness of one hue: colors get more vivid to the right and darker towards the bottom. The rainbow bar picks the hue itself. Click the small left half of the preview to go back to the color you had before your last change, which makes it easy to compare two options.
Under the preview you’ll find the color’s closest CSS name, so #FF6448 shows as close to tomato, and how well white or black text reads on it.
Shades, tints and recent colors
Shades and tints shows nine steps from nearly black to nearly white through your color. Click any of them to use it, which is a quick way to find a darker hover color or a light background in the same family. Every color you copy or pick from the screen is kept under Recent colors on this device.
Color formats at a glance
| Format | Example | Used in |
|---|---|---|
| HEX | #4785CC | CSS, design tools, most apps |
| RGB | rgb(71, 133, 204) | CSS, image editors |
| HSL | hsl(212, 57%, 54%) | CSS, adjusting by hand |
| HSV | hsv(212, 65%, 80%) | Photoshop and other image editors (also called HSB) |
| CMYK | cmyk(65%, 35%, 0%, 20%) | Printing (a rough conversion without a color profile) |
| OKLCH | oklch(60.8% 0.126 253.3) | Modern CSS, even color scales |
To convert a list of colors or a single code, the color converter does the same conversions with a text box.