Color palette builder

Build a palette. Take the CSS.

Choose, name, and arrange colors with ordinary browser controls. Agate turns the finished palette into portable CSS custom properties.

Start with Agate’s palette See the CSS output

Your working palette

Five useful colors, ready to change

Device-local draft

Starting palette loaded.

Name Color
Hex value
Name Color
Hex value
Name Color
Hex value
Name Color
Hex value
Name Color
Hex value

Portable output

CSS custom properties

:root {
  --color-primary: #d76572;
  --color-secondary: #b0436a;
  --color-accent: #d94f9d;
  --color-background: #f7efe6;
  --color-text: #4a2c35;
}

Names become lowercase CSS identifiers. Repeated names receive a number so every property stays unique.

The starting values and CSS remain readable. Enable JavaScript to edit, reorder, save, or copy the palette.

Build a palette. Take the CSS.

Five useful colors, ready to change

Restore the starting palette?

A palette should leave the tool cleanly.

Build a palette. Take the CSS.

Five useful colors, ready to change

Palette colors

Restore the starting palette?

A palette should leave the tool cleanly.