Color Picker
Pick a color from the wheel, your screen or a code, and copy it as HEX, RGB or HSL.
Drag the large marker to change hue and saturation, and the outer ring to change lightness.
Indigo
#6366F1
Color codes
Click a copy button, or select a value.
- hexHexadecimal
#6366F1 - rgbRed, green, blue
rgb(99, 102, 241) - hslHue, saturation, lightness
hsl(239, 84%, 67%)
Use this color
About the Color Picker
How to pick a color online, read its HEX, RGB and HSL codes, and take it into a palette or a contrast check.Read the guideHide guide
The ColorOverflow Color Picker is a free online color picker. Choose a color on the color wheel, pick one from anywhere on your screen, or type a code you already have, and read it as HEX, RGB and HSL, each with its own copy button.
From there, open the color in the Palette Generator, check it in the Contrast Checker, get its shades and tints, or convert it to more formats. It runs in your browser with no sign-up.
How to pick a color
- Drag the large marker on the color wheel to choose the hue and saturation.
- Drag the small marker on the outer ring to make the color lighter or darker.
- Or type or paste a code in the Your color field. It reads HEX, RGB, HSL and more, and the swatch beside it opens your system's color picker.
- In browsers that support it, such as Chrome and Edge, select Pick a color from your screen, then click anywhere on your screen to take that color.
- Copy the HEX, RGB or HSL code, or copy all three at once.
HEX, RGB and HSL color codes
All three describe the same screen color, so use whichever your code or design tool expects. For HSV, CMYK or OKLCH, open the color in the Color Converter.
- HEX: the six-digit code used in CSS and most design tools, such as #6366F1. Each pair of digits is the red, green and blue level from 00 to FF.
- RGB: the same three levels as numbers from 0 to 255, such as rgb(99, 102, 241).
- HSL: hue as an angle from 0° to 360°, then saturation and lightness as percentages, such as hsl(239, 84%, 67%). It's the easiest to adjust by hand: change only the lightness to get a lighter or darker version.
What to do with your color
- Build a palette: open it in the Palette Generator, which adds matching colors with a complementary harmony you can change.
- Check contrast: test it as text on white against WCAG AA and AAA in the Contrast Checker.
- Get shades and tints: see the full scale from 950 to 50 for hover states, borders and backgrounds.
Frequently asked questions
- How do I pick a color from an image or a website?
- In Chrome, Edge and other browsers that support it, select Pick a color from your screen and click the color you want, on this page or anywhere else on your screen. To get a whole palette from a photo, use Palette from Image.
- Why don't I see the Pick a color from your screen button?
- It uses the browser's EyeDropper feature, which only some browsers have, such as Chrome and Edge on desktop. Where it isn't available the button is hidden, and you can still use the wheel or type a code.
- What's the difference between the Color Picker and the Color Converter?
- The Color Picker is for choosing a color visually and copying its HEX, RGB and HSL codes. The Color Converter is for a code you already have: paste it in any format and read it as HEX, RGB, HSL, HSV, CMYK and OKLCH.
- Why does the color look different in my design tool?
- The codes are standard sRGB, the color space of the web. A tool or screen set to a wider color space, or a different color profile, can show the same code slightly differently.
- Is the color picker free?
- Yes. It's free with no sign-up, and you can use the colors in personal and commercial projects.