‹ Back to Home

Palette Generator

Build color harmonies and a 50 to 950 shade scale.

Palette

  • harmony-1#6366F1 Black 4.70:1; white 4.47:1
    AA normal with suggested text
  • harmony-2#F1EE63 Black 17.15:1; white 1.22:1
    AA normal with suggested text
  • shade-50#F1F1FE Black 18.75:1; white 1.12:1
    AA normal with suggested text
  • shade-100#E3E3FC Black 16.66:1; white 1.26:1
    AA normal with suggested text
  • shade-200#C2C3FA Black 12.48:1; white 1.68:1
    AA normal with suggested text
  • shade-300#9395F5 Black 7.86:1; white 2.67:1
    AA normal with suggested text
  • shade-400#5B5EF0 Black 4.30:1; white 4.88:1
    AA normal with suggested text
  • shade-500#2327EB Black 2.56:1; white 8.20:1
    AA normal with suggested text
  • shade-600#1216C9 Black 1.98:1; white 10.59:1
    AA normal with suggested text
  • shade-700#0E119A Black 1.57:1; white 13.41:1
    AA normal with suggested text
  • shade-800#0A0C70 Black 1.30:1; white 16.16:1
    AA normal with suggested text
  • shade-900#060846 Black 1.13:1; white 18.57:1
    AA normal with suggested text
  • shade-950#030425 Black 1.05:1; white 20.04:1
    AA normal with suggested text

Settings

Harmony

Export

Format
:root {
  --harmony-1: #6366F1;
  --harmony-2: #F1EE63;
  --shade-50: #F1F1FE;
  --shade-100: #E3E3FC;
  --shade-200: #C2C3FA;
  --shade-300: #9395F5;
  --shade-400: #5B5EF0;
  --shade-500: #2327EB;
  --shade-600: #1216C9;
  --shade-700: #0E119A;
  --shade-800: #0A0C70;
  --shade-900: #060846;
  --shade-950: #030425;
}

What Palette Generator does

Build color harmonies and a 50 to 950 shade scale.

How to use it

  1. Pick a seed color and choose a harmony.
  2. Read black and white contrast ratios on the harmony and shade swatches.
  3. Choose CSS or JSON, then copy or save the palette.

Formats and limits

  • CSS variables or JSON copied or saved as palette.css or palette.json.

Privacy

Processing stays in this tab. Input and generated content are not uploaded or stored.

Related tools

All processing runs locally in your browser. This tool is provided as-is without warranty. Keep backups of your original files before processing.

By uploading media, you confirm you own the content or have permission to modify it. Please read the Terms and Conditions.