Color Picker & Palette

Pick a color and convert it between HEX, RGB, and HSL — then generate complementary, triadic, or analogous palettes.

  • Media
  • Free
  • No sign-up

Palettes

Complementary
Triadic
Analogous

Free · No sign-up · Runs in your browser

Why use it

  • HEX, RGB and HSL in sync

    Change any format and the others update instantly.

  • Palette generator

    Complementary, triadic and analogous palettes from any base colour.

  • Copy anything

    Click a swatch for its HEX value or copy a full CSS snippet.

Great for

  • Building a colour palette for a brand or UI
  • Converting design-tool colours into CSS values
  • Finding a contrasting accent for buttons and highlights

How to use

  1. Use the color picker or type a HEX, RGB, or HSL value.
  2. All formats update in sync as you change any one of them.
  3. Choose a palette type — complementary, triadic, or analogous — to generate related colors.
  4. Click any color swatch to copy its HEX value, or copy the full CSS snippet.

Questions

What formats are supported?
HEX (#rrggbb), RGB (0–255 per channel), and HSL (hue 0–360, saturation and lightness 0–100%). All three update in sync.
What is a complementary color?
The color exactly opposite on the color wheel — 180° away in hue. It provides maximum contrast and is useful for call-to-action highlights.
Does it support alpha / transparency?
Not currently. The tool works with fully opaque colors.

29 more free tools, no sign-up

Encoders, generators, media and marketing tools — all right in your browser.

Browse all tools