Color Palette Generator

Generate complementary, triadic and analogous palettes from a base color as HEX and CSS variables.

FreeNo sign-up
Options
Palette

  • #646C3D

    hsl(70, 28%, 33%)

  • #4C6C3D

    hsl(100, 28%, 33%)

  • #3D6C44

    hsl(130, 28%, 33%)

  • #3D6C5C

    hsl(160, 28%, 33%)

  • #3D646C

    hsl(190, 28%, 33%)

CSS variables
:root {
  --brand-1: #646C3D;
  --brand-2: #4C6C3D;
  --brand-3: #3D6C44;
  --brand-4: #3D6C5C;
  --brand-5: #3D646C;
}

Generate complementary, triadic and analogous palettes from a base color as HEX and CSS variables.

The problem with picking a brand color is that one color does not carry an interface. This tool derives a full palette from a base color using color theory — analogous, monochromatic, complementary, split-complementary, triadic and tetradic — and returns HEX, HSL and paste-ready CSS variables.

How to use it

  1. 1Choose the base color with the picker or by typing a HEX value.
  2. 2Switch between schemes to see how the same base resolves under each theory.
  3. 3Copy the whole set or the CSS variables into your design file or code.

FAQ

Related tools