PaletteHero — Color scale generator with CSS, SCSS & AI-ready tokens

primary

secondary

tertiary

quaternary

quinary

neutral auto

Convert to code:

Live preview

Your palette applied to real components with automatic light and dark mode. Hover and pressed colors use the next step in the same column; click any of them below to pick a step from another column instead.

Acme light mode

Build faster with your colors

Every color on this card comes from your semantic tokens. Hover and press the buttons to see the states.

Monthly report New

Inputs use --bg and --border; focus uses the main color.

Color	Base	Hover	Pressed
primary	500
secondary	400
tertiary	300
quaternary	100
quinary	300

Acme dark mode

Build faster with your colors

Every color on this card comes from your semantic tokens. Hover and press the buttons to see the states.

Monthly report New

Inputs use --bg and --border; focus uses the main color.

Color	Base	Hover	Pressed
primary	400
secondary	300
tertiary	200
quaternary	50
quinary	200

/* PaletteHero — https://palettehero.com */

/* 1. Primitive scales (never change between themes) */
:root {
  --primary-50: #F2F7FF;
  --primary-100: #E9F1FF;
  --primary-200: #CDE0FF;
  --primary-300: #ABC5F1;
  --primary-400: #84A4D8;
  --primary-500: #5C80BC;
  --primary-600: #3B5A8F;
  --primary-700: #1F3A68;
  --primary-800: #0B224A;
  --primary-900: #021436;
  --primary-950: #010F2E;

  --secondary-50: #ECFAFB;
  --secondary-100: #D8F6F7;
  --secondary-200: #B7E3E4;
  --secondary-300: #8AC5C8;
  --secondary-400: #56A3A6;
  --secondary-500: #337C7F;
  --secondary-600: #0F595C;
  --secondary-700: #003C3E;
  --secondary-800: #002628;
  --secondary-900: #001A1B;
  --secondary-950: #001617;

  --tertiary-50: #FFF4F2;
  --tertiary-100: #FFE7E4;
  --tertiary-200: #FFC2BB;
  --tertiary-300: #F1948A;
  --tertiary-400: #C26E66;
  --tertiary-500: #984C45;
  --tertiary-600: #732F2A;
  --tertiary-700: #541714;
  --tertiary-800: #3E0606;
  --tertiary-900: #300001;
  --tertiary-950: #2A0001;

  --quaternary-50: #FAF7E9;
  --quaternary-100: #F9E79F;
  --quaternary-200: #CEBD79;
  --quaternary-300: #A59556;
  --quaternary-400: #817236;
  --quaternary-500: #615419;
  --quaternary-600: #473B00;
  --quaternary-700: #312800;
  --quaternary-800: #221B00;
  --quaternary-900: #191400;
  --quaternary-950: #171100;

  --quinary-50: #EFF9FA;
  --quinary-100: #DCF2F4;
  --quinary-200: #B7DBDE;
  --quinary-300: #8ABABF;
  --quinary-400: #659296;
  --quinary-500: #446D71;
  --quinary-600: #284E52;
  --quinary-700: #123539;
  --quinary-800: #022427;
  --quinary-900: #00191C;
  --quinary-950: #001518;

  --neutral-50: #F6F7F8;
  --neutral-100: #EEF0F3;
  --neutral-200: #DADCE0;
  --neutral-300: #BBBEC3;
  --neutral-400: #95999F;
  --neutral-500: #6E7279;
  --neutral-600: #4E5258;
  --neutral-700: #33363C;
  --neutral-800: #1F2226;
  --neutral-900: #13161A;
  --neutral-950: #101215;
}

/* 2. Semantic tokens — light mode (default) */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: var(--neutral-50);
  --surface: var(--neutral-100);
  --surface-2: var(--neutral-200);
  --border: var(--neutral-300);
  --text-muted: var(--neutral-600);
  --text: var(--neutral-950);
  --primary: var(--primary-500);
  --primary-hover: var(--primary-600);
  --primary-active: var(--primary-700);
  --primary-subtle: var(--primary-100);
  --primary-text: var(--primary-600);
  --on-primary: #000000;
  --on-primary-hover: #ffffff;
  --on-primary-active: #ffffff;
  --secondary: var(--secondary-400);
  --secondary-hover: var(--secondary-500);
  --secondary-active: var(--secondary-600);
  --secondary-subtle: var(--secondary-100);
  --secondary-text: var(--secondary-500);
  --on-secondary: #000000;
  --on-secondary-hover: #ffffff;
  --on-secondary-active: #ffffff;
  --tertiary: var(--tertiary-300);
  --tertiary-hover: var(--tertiary-400);
  --tertiary-active: var(--tertiary-500);
  --tertiary-subtle: var(--tertiary-100);
  --tertiary-text: var(--tertiary-500);
  --on-tertiary: #000000;
  --on-tertiary-hover: #000000;
  --on-tertiary-active: #ffffff;
  --quaternary: var(--quaternary-100);
  --quaternary-hover: var(--quaternary-200);
  --quaternary-active: var(--quaternary-300);
  --quaternary-subtle: var(--quaternary-100);
  --quaternary-text: var(--quaternary-500);
  --on-quaternary: #000000;
  --on-quaternary-hover: #000000;
  --on-quaternary-active: #000000;
  --quinary: var(--quinary-300);
  --quinary-hover: var(--quinary-400);
  --quinary-active: var(--quinary-500);
  --quinary-subtle: var(--quinary-100);
  --quinary-text: var(--quinary-500);
  --on-quinary: #000000;
  --on-quinary-hover: #000000;
  --on-quinary-active: #ffffff;
}

/* 3. Semantic tokens — dark mode (follows the OS unless data-theme="light" is set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--neutral-950);
    --surface: var(--neutral-800);
    --surface-2: var(--neutral-700);
    --border: var(--neutral-600);
    --text-muted: var(--neutral-400);
    --text: var(--neutral-50);
    --primary: var(--primary-400);
    --primary-hover: var(--primary-300);
    --primary-active: var(--primary-200);
    --primary-subtle: var(--primary-900);
    --primary-text: var(--primary-400);
    --on-primary: #000000;
    --on-primary-hover: #000000;
    --on-primary-active: #000000;
    --secondary: var(--secondary-300);
    --secondary-hover: var(--secondary-200);
    --secondary-active: var(--secondary-100);
    --secondary-subtle: var(--secondary-900);
    --secondary-text: var(--secondary-300);
    --on-secondary: #000000;
    --on-secondary-hover: #000000;
    --on-secondary-active: #000000;
    --tertiary: var(--tertiary-200);
    --tertiary-hover: var(--tertiary-100);
    --tertiary-active: var(--tertiary-50);
    --tertiary-subtle: var(--tertiary-900);
    --tertiary-text: var(--tertiary-200);
    --on-tertiary: #000000;
    --on-tertiary-hover: #000000;
    --on-tertiary-active: #000000;
    --quaternary: var(--quaternary-50);
    --quaternary-hover: var(--quaternary-100);
    --quaternary-active: var(--quaternary-200);
    --quaternary-subtle: var(--quaternary-900);
    --quaternary-text: var(--quaternary-50);
    --on-quaternary: #000000;
    --on-quaternary-hover: #000000;
    --on-quaternary-active: #000000;
    --quinary: var(--quinary-200);
    --quinary-hover: var(--quinary-100);
    --quinary-active: var(--quinary-50);
    --quinary-subtle: var(--quinary-900);
    --quinary-text: var(--quinary-200);
    --on-quinary: #000000;
    --on-quinary-hover: #000000;
    --on-quinary-active: #000000;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--neutral-950);
  --surface: var(--neutral-800);
  --surface-2: var(--neutral-700);
  --border: var(--neutral-600);
  --text-muted: var(--neutral-400);
  --text: var(--neutral-50);
  --primary: var(--primary-400);
  --primary-hover: var(--primary-300);
  --primary-active: var(--primary-200);
  --primary-subtle: var(--primary-900);
  --primary-text: var(--primary-400);
  --on-primary: #000000;
  --on-primary-hover: #000000;
  --on-primary-active: #000000;
  --secondary: var(--secondary-300);
  --secondary-hover: var(--secondary-200);
  --secondary-active: var(--secondary-100);
  --secondary-subtle: var(--secondary-900);
  --secondary-text: var(--secondary-300);
  --on-secondary: #000000;
  --on-secondary-hover: #000000;
  --on-secondary-active: #000000;
  --tertiary: var(--tertiary-200);
  --tertiary-hover: var(--tertiary-100);
  --tertiary-active: var(--tertiary-50);
  --tertiary-subtle: var(--tertiary-900);
  --tertiary-text: var(--tertiary-200);
  --on-tertiary: #000000;
  --on-tertiary-hover: #000000;
  --on-tertiary-active: #000000;
  --quaternary: var(--quaternary-50);
  --quaternary-hover: var(--quaternary-100);
  --quaternary-active: var(--quaternary-200);
  --quaternary-subtle: var(--quaternary-900);
  --quaternary-text: var(--quaternary-50);
  --on-quaternary: #000000;
  --on-quaternary-hover: #000000;
  --on-quaternary-active: #000000;
  --quinary: var(--quinary-200);
  --quinary-hover: var(--quinary-100);
  --quinary-active: var(--quinary-50);
  --quinary-subtle: var(--quinary-900);
  --quinary-text: var(--quinary-200);
  --on-quinary: #000000;
  --on-quinary-hover: #000000;
  --on-quinary-active: #000000;
}