Color Picker

Pick any color — HEX, RGB and HSL stay in sync, with matching colors included.

FREE TOOL · WORKS OFFLINE · NO SIGN-UP
#ff0000

Edit any field — the color input, the swatch and the other two formats update to match. Invalid entries are ignored.

🎨 Colors That Go With It

Complementary#00ffff
Analogous −30°#ff0080
Analogous +30°#ff8000

Complementary = hue + 180°. Analogous = hue ± 30°, same saturation and lightness.

🎨 How to Use This Color Picker

  1. 1.Pick a color. Use the color input, or type a HEX, RGB or HSL value directly — every format updates at once.
  2. 2.Copy the format you need. HEX for CSS and design tools, RGB for canvas work, HSL when you want to tweak lightness by hand.
  3. 3.Use the complementary color for contrast. It sits opposite on the wheel and makes buttons and calls-to-action stand out.
  4. 4.Use analogous colors for harmony. The two neighbors blend smoothly — ideal for gradients, backgrounds and soft accents.
  5. 5.Try red first. #ff0000 converts to rgb(255, 0, 0) and hsl(0, 100%, 50%), with cyan #00ffff as its complement.

❓ FAQ

How do HEX, RGB and HSL relate?

They are three notations for the same color. HEX writes it as six hex digits (for example #ff0000), RGB as three 0–255 channel values (rgb(255, 0, 0)), and HSL as hue, saturation and lightness (hsl(0, 100%, 50%)). Edit any one field and the other two update to match.

What is a complementary color?

The complementary color sits exactly opposite on the color wheel — its hue is 180 degrees away. Red (#ff0000) complements cyan (#00ffff). Complementary pairs give the strongest contrast, which is why they are popular for buttons on colored backgrounds.

What are analogous colors?

Analogous colors are the two neighbors of a color on the wheel, 30 degrees to either side. They share the same saturation and lightness, so they look harmonious together and are a safe choice for gradients, backgrounds and accents.

Is this color picker free?

Yes — 100% free, no sign-up. Pick and convert as many colors as you like, with nothing installed and nothing tracked.

More free tools →