Color picker
Choose a color on the saturation/brightness square and hue slider, type a HEX code, or use “Pick from screen” to grab any pixel on your display. Every format is one click to copy, and you can jump straight to a palette built around your color.
Selected color: #3E5C76 — rgb(62, 92, 118), hsl(208, 31%, 35%).
How to use the color picker
- Drag on the square to set saturation and brightness, and use the slider to set the hue.
- Or type a HEX code, or click “Pick from screen” (Chrome and Edge) to sample any pixel.
- Click any value — HEX, RGB, HSL, HSB, CMYK, LAB, OKLCH — to copy it.
- Use the tints and shades below for lighter and darker versions.
- Open the full color page or build a palette from your color.
HEX, RGB and HSL explained
HEX is a six-digit base-16 code (#RRGGBB) used in CSS and design tools. RGB lists the red, green and blue channels from 0 to 255. HSL describes a color as hue (0–360°), saturation and lightness, which is easier to adjust by hand. HSB (also called HSV) uses brightness instead of lightness and is what most design tools' pickers show.
Why OKLCH?
OKLCH is a modern perceptual color space supported in CSS. Equal steps in its lightness look equally different to the eye, which makes it ideal for building consistent color scales and accessible palettes.
Frequently asked questions
How do I pick a color from my screen?
Click “Pick from screen”, then click anywhere on your display. This uses the browser's EyeDropper API, available in Chrome, Edge and Opera on desktop.
How do I find the HEX code of a color in an image?
Use the image color picker: drop your image in, then click the exact pixel you want, or let it extract the dominant colors automatically.
Is the color picker free?
Yes — free, with no sign-up and no ads.