Color Picker
Pick any color and get its HEX, RGB, HSL, HSV and CMYK codes. Check text contrast, build matching palettes, grab colors from an image or from anywhere on your screen.
Pick a color
Text contrast (WCAG)
How readable is white or black text on this color? WCAG asks for at least 4.5:1 for normal text (AA) and 3:1 for large text.
Matching colors
Click any swatch to make it your current color.
Pick a color from an image
Choose an image, then click anywhere on it. The image stays on your device.
Free Online Color Picker
A color picker lets you choose a color visually and gives you the code to use it in a website, an app or a design file. This tool shows every common format at once: HEX, RGB, HSL, HSV and CMYK. It also checks whether text is readable on your color, suggests colors that go well with it, and can read a color from any image or from your screen. Everything runs in your browser.
How to Use the Color Picker
- Click the color box to open your browser’s chooser, drag the Hue, Saturation and Lightness sliders, or type a code into the HEX, RGB or HSL field.
- Press Copy next to the format you need.
- Use Save Color to keep colors for the session and Copy Saved to copy the whole list.
- Open an image in Pick a color from an image and click a pixel to use its color.
- On browsers that support it, Pick From Screen lets you sample any pixel on your display.
Color Formats Explained
| Format | Example | What it means |
|---|---|---|
| HEX | #2563eb | Red, green and blue written as three two-digit hexadecimal numbers. The most common format in CSS and design tools. |
| RGB | rgb(37, 99, 235) | The amount of red, green and blue light from 0 to 255. |
| HSL | hsl(221, 83%, 53%) | Hue (the color wheel angle from 0 to 360), saturation (how vivid) and lightness (how light or dark). Easy for making variations. |
| HSV | hsv(221, 84%, 92%) | Hue, saturation and value (brightness). Used in many graphics programs. |
| CMYK | cmyk(84%, 58%, 0%, 8%) | Cyan, magenta, yellow and black ink amounts used in printing. This is a simple conversion, so printed colors can differ. |
What the Contrast Ratio Means
Contrast ratio compares the brightness of text with its background, from 1:1 (no difference) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) set the minimums below. Good contrast helps everyone, especially people with low vision, and it makes pages readable in bright sunlight.
| Level | Normal text | Large text (about 18pt or 14pt bold) |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
Color Harmonies
- Complementary: the color opposite on the wheel. It gives the strongest contrast.
- Analogous: colors next to each other. They look calm and natural.
- Triadic: three colors spaced evenly around the wheel. Lively but balanced.
- Split complementary: the two colors beside the complement. Contrast with less tension.
- Tetradic: four colors in two complementary pairs. Rich, but best with one dominant color.
- Shades and tints: the same hue made lighter or darker. Ideal for backgrounds, borders and hover states.
Tips for Choosing Colors
- Start with one main color and build the rest of the palette from the harmonies.
- Follow the 60-30-10 idea: about 60% a neutral base, 30% a secondary color and 10% an accent.
- Test text on its background with the contrast checker before you commit to a design.
- Do not rely on color alone to show meaning. Add text or icons for people who cannot tell the colors apart.
Privacy
The picker works entirely in your browser. Images you open are drawn on a page canvas and are never uploaded. Saved colors last only until you close or reload the page.
Frequently Asked Questions (FAQ)
Is the color picker free?
Yes. It is free, needs no sign-up and has no limits.
How do I get the HEX code of a color?
Pick the color with the box or sliders and copy the value in the HEX field. You can also click a pixel in an image to get its code.
What is the difference between HEX and RGB?
They describe the same colors. HEX writes the red, green and blue amounts as hexadecimal digits, and RGB writes them as decimal numbers from 0 to 255.
Can I convert between HEX, RGB and HSL?
Yes. Type a value into any of the HEX, RGB or HSL fields and the other formats update at once.
What does the closest CSS name mean?
CSS has 148 named colors such as coral and steelblue. The tool shows the named color that looks most like your pick. It is a guide, not an exact match.
Why is Pick From Screen missing?
It uses a browser feature that is available in Chrome, Edge and other Chromium browsers. If your browser does not support it, the button is hidden. You can still use the image picker.
Does it work with transparent colors?
This tool works with opaque colors. If you type an 8-digit HEX code, the transparency part is ignored.