What is color harmony?

Color harmony refers to combinations of colors that are pleasing to the eye based on their positions on the color wheel. Common types include complementary (opposite), analogous (adjacent), triadic (three equally spaced), and tetradic (four equally spaced) harmonies.

Is this color picker free?

Yes, completely free. No signup, no download, no ads blocking the tool. All color math runs in your browser — nothing is sent to any server.

🎨 Design

Color Picker

Q: How do I convert HEX to RGB?

Enter your HEX code (e.g. #a78bfa) in the HEX field or pick a color with the color wheel. The RGB, HSL, HSV, and CMYK values all update instantly. Click any copy button to copy the value to your clipboard.

Q: What is WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) contrast ratio measures the difference in luminance between text and its background. A ratio of 4.5:1 or higher passes AA for normal text; 7:1 passes AAA. Enter your background color in the Contrast Checker to see if your color combination is accessible.

Q: What is the difference between HSL and HSV?

Both use Hue and Saturation, but differ in the third value. L (Lightness) in HSL measures perceived brightness from black (0%) to white (100%), with the pure color at 50%. V (Value) in HSV measures the maximum RGB component, so a pure color has V=100% regardless of darkness.

Pick any color and instantly get HEX, RGB, HSL, HSV, and CMYK values. Color harmonies, contrast checker, palettes, and saved colors — all in one place.

Color Picker

Nearest CSS name: Exact match

HEX Code

H°

All Formats

Color Harmonies

WCAG Contrast Checker

Background color to compare against:

Text on background

Background on text

Color Palettes

Saved Colors

No saved colors yet

How to Use the Color Picker

1. Pick a color — click the color swatch on the left to open your browser's native color picker, or type a HEX code directly into the field.

2. Switch formats — use the HEX / RGB / HSL tabs to edit via sliders or number inputs. All formats update in sync.

3. Copy any value — click Copy next to any format in the "All Formats" list to copy it to clipboard.

4. Check harmonies — the harmony panel shows complementary, analogous, triadic, split-complementary, tetradic, tints, and shades. Click any swatch to switch to that color.

5. Check contrast — enter a background color in the WCAG panel to see the contrast ratio and whether it passes accessibility standards.

6. Save colors — click "Save Current Color" to bookmark your favorite colors in the browser.

Color Format Guide

HEX (#RRGGBB) — The web standard. Six hexadecimal digits representing red, green, and blue channels 0–255. Most common in CSS and design tools.
RGB (0–255 each) — Red, Green, Blue as decimal values. Directly maps to how screens emit light. Used in CSS: rgb(167, 139, 250).
HSL (0–360°, 0–100%, 0–100%) — Hue (color wheel angle), Saturation (color intensity), Lightness (black to white). Most intuitive for designers. CSS: hsl(258, 89%, 76%).
HSV/HSB (0–360°, 0–100%, 0–100%) — Similar to HSL but uses Value (brightness) instead of Lightness. Used by Photoshop and many design tools.
CMYK (0–100% each) — Cyan, Magenta, Yellow, Key (Black). The print model — used in professional printing and physical design work.

WCAG Contrast Explained

Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for people with low vision or color blindness.

AA (4.5:1) — Minimum for normal text. Required for most accessibility compliance.
AA Large (3:1) — For large text (18pt+ or 14pt bold) and UI components.
AAA (7:1) — Enhanced contrast. Required for the highest accessibility level.

Use the contrast checker to test your foreground/background color combinations before shipping your designs.

Frequently Asked Questions

How do I convert HEX to RGB?

Type your HEX code into the HEX field (e.g. #A78BFA) or pick a color with the color wheel. Switch to the RGB tab and the values update instantly. Click "Copy" next to the RGB row in the All Formats panel to copy it.

What is WCAG contrast ratio?

WCAG contrast ratio measures brightness difference between foreground and background. A ratio of 4.5:1 passes AA (normal text), 3:1 passes AA for large text, and 7:1 passes AAA. These thresholds ensure text is readable for people with visual impairments.

What is the difference between HSL and HSV?

Both use Hue and Saturation. The difference is in the third value: HSL uses Lightness (0% = black, 100% = white, 50% = pure color), while HSV uses Value (0% = black, 100% = full brightness of the hue). Photoshop and many design apps use HSV; CSS uses HSL.

What are color harmonies?

Color harmonies are combinations of colors that work well together based on their positions on the color wheel. Complementary = opposite colors (high contrast). Analogous = adjacent colors (natural, calm). Triadic = three equally spaced colors (vibrant). Tetradic = four equally spaced (rich but complex). Tints/shades = lighter/darker versions of your color.

Can I use this color picker offline?

All color math runs entirely in your browser — no server requests are made. After the page loads, it works offline. Your saved colors are stored in localStorage on your device and persist between sessions.

Color Picker

How to Use the Color Picker

Color Format Guide

WCAG Contrast Explained

Frequently Asked Questions

Related Tools

From the Blog