Color Picker

HEX, RGB, HSL codes. Ready-made palettes (Tailwind, Material). Eyedropper from an image. Harmonious colors and a WCAG contrast checker.

HEX #7D7DF5

RGB rgb(125, 125, 245)

HSL hsl(240, 86%, 72%)

NAME Cornflower Blue

Recent colors

Your most recently picked colors are saved here automatically.

Harmonious colors

Complementary

Triadic

Analogous

Contrast (WCAG)

TEXT

3.21:1

Low contrast

AA · text AA · large AAA · text AAA · large

Click on the background or text to replace it with the current color

Eyedropper from an image

Upload an image

JPG, PNG, WEBP — click or drop

Click on the image to pick a color

Ready-made palettes

Online color picker — why is it useful?

A color picker is an essential tool for designers, frontend developers, and content creators. Quickly grabbing a color in HEX, RGB, or HSL format, building a palette for your brand, and extracting a color from an image — all of this happens instantly in your browser with this site.

Ready-made palette sets: Tailwind CSS, Material Design, Pastel, Vintage, and Brand — each useful in its own context.

What is WCAG contrast?

WCAG (Web Content Accessibility Guidelines) is the standard that makes websites accessible to users with limited vision. The contrast ratio between text and background:

AA · text — minimum 4.5:1 (for regular-sized text)
AA · large — minimum 3:1 (18pt or 14pt bold text)
AAA · text — enhanced 7:1 (regular text)
AAA · large — enhanced 4.5:1 (large text)

What are harmonious colors?

For several colors to look beautiful together, there must be a certain relationship between them:

Complementary — the color 180° opposite on the color wheel. Strong contrast.
Triadic — 3 colors at 120° intervals. Natural balance.
Analogous — 3 colors close to one another. A soft look.

Frequently asked questions

Where are color codes used?

HEX (#7D7DF5) is the standard for frontend design and development. RGB is used in CSS and graphics programs. HSL is for adjusting the depth of a color (darker, lighter).

How do I pick a color from an image?

Upload an image to the "Eyedropper from an image" section on the right side of the page. Then click anywhere on the image — the exact color of that point is picked.

Where are "Recent colors" stored?

Saved colors are kept only in your browser's local storage — they are not sent over the internet. Clicking the save button stores the color permanently.

What does the contrast checker do?

It calculates the contrast ratio between two colors. On your site, the combination of text and background should be distinct enough for users with weak vision.

Why do I need a random color?

When you're starting a new project or looking for inspiration. Start from a random color and build a harmonious palette.