Online Color Picker

How to use the Color Picker

1. Drag inside the square to set saturation and brightness, and use the sliders for hue and opacity.
2. Or type any color code: HEX, RGB, HSL, HSV or a CSS color name.
3. Use the eyedropper button (Chrome and Edge) to pick a color from anywhere on your screen.
4. Fine-tune with RGB, HSL, HSV, CMYK or OKLCH sliders, and click a value to copy it.
5. Click a harmony, tint, shade or tone to switch to it, and press Save color to keep it in your saved colors.

Color Picker features

• HEX, RGB, HSL, HSV, CMYK and OKLCH codes with one-click copy
• Color square, hue and opacity sliders, plus RGB, HSL, HSV, CMYK and OKLCH channel sliders
• Screen eyedropper to pick any color on your display (Chrome, Edge, Opera)
• Complementary, split-complementary, analogous, triadic, tetradic, square and monochromatic harmonies
• Tints, shades and tones of the current color
• Contrast against white and black, and a color blindness preview
• Saved colors and undo (Ctrl+Z), remembered in your browser

A free online color picker for designers and developers

This color picker lets you choose any color visually and see its code in every format you are likely to need: HEX, RGB, HSL, HSV, CMYK and OKLCH. Drag in the color square, slide the hue and opacity bars, or type a code you already have, and everything updates live. Click any value to copy it.

It is built for real design work, so alongside the codes you get color harmonies, tints and shades, contrast checks and a color blindness preview, all on one page and without signing up.

Ways to choose a color

• The color square and sliders. The square sets saturation and brightness, the bar below sets the hue, and the checkered bar sets opacity. This is the same HSV model used by Photoshop, Figma and most design apps, so it will feel familiar.
• Typing a code. Paste a HEX value, rgb(), hsl(), hsv() or a CSS color name such as tomato.
• Channel sliders. Switch between RGB, HSL, HSV, CMYK and OKLCH sliders to fine-tune one property at a time.
• The screen eyedropper. In Chrome, Edge and Opera, pick a color from anywhere on your screen, including other apps and browser tabs.
• Random. Press Space or the Random button for a fresh starting point.

Every change can be undone with Ctrl + Z, and your current color, slider mode and saved colors are remembered in your browser for next time.

Understanding the color codes

HEX and RGB are two ways of writing the same numbers. HSL and HSV are friendlier for adjusting a color by hand. OKLCH is the newest of the group: it is supported in all modern browsers and keeps lightness consistent across hues, which makes it ideal for design systems. For a deeper look at each one, see the HEX Color Picker, RGB Color Picker and HSL Color Picker.

Color harmonies, tints and shades

Choosing one color is only the start. The picker shows matching colors based on classic color theory, and clicking any of them makes it the current color:

• Complementary: the color opposite on the wheel, for maximum contrast.
• Split-complementary: the two neighbours of the complement, for contrast that is easier to balance.
• Analogous: neighbouring hues that always look calm together.
• Triadic, tetradic and square: three or four evenly spaced hues for colorful, playful schemes.
• Monochromatic: variations of a single hue.

Below the harmonies you will find tints (mixed with white), shades (mixed with black) and tones (mixed with gray). Send any harmony to the Color Palette Generator to keep building a full palette.

Accessibility built in

For every color you see its contrast ratio against white and black text, so you can tell at a glance whether it works as a background or as text. A preview shows how the color looks to people with protanopia, deuteranopia, tritanopia and achromatopsia. For a full WCAG check of a text and background pair, open the Contrast Checker.

Save your colors

Press Save color to keep a color in your saved colors. They stay in this browser, so you can build up a personal collection across visits, copy them all at once or open them as a palette. Nothing is sent to a server.

Picking a color from an image instead?

If the color you want is in a photo, logo or screenshot, use the Image Color Picker to click it directly, or the Image Color Extractor to get the whole palette of an image.

Color Picker: frequently asked questions