Skip to content
Developer Tools

Color System Generator

Generate a full color system from one color.

100% client-side — your files never leave your browser
Primary Palette
50#f0f6fe
100#dde9fd
200#bbd4fc
300#8ab5f9
400#5090f7
500#0b64f4
600#0950c3
700#07409c
800#063075
900#042253
950#021431
Neutral Palette
50#f9fafa
100#f4f5f6
200#e6e8ea
300#d2d5da
400#abb1ba
500#818a98
600#656e7b
700#505762
800#353941
900#22252a
950#121416
Semantic Colors
success
warning
error
info
:root {
  --color-primary-50: #f0f6fe;
  --color-primary-100: #dde9fd;
  --color-primary-200: #bbd4fc;
  --color-primary-300: #8ab5f9;
  --color-primary-400: #5090f7;
  --color-primary-500: #0b64f4;
  --color-primary-600: #0950c3;
  --color-primary-700: #07409c;
  --color-primary-800: #063075;
  --color-primary-900: #042253;
  --color-primary-950: #021431;
  --color-neutral-50: #f9fafa;
  --color-neutral-100: #f4f5f6;
  --color-neutral-200: #e6e8ea;
  --color-neutral-300: #d2d5da;
  --color-neutral-400: #abb1ba;
  --color-neutral-500: #818a98;
  --color-neutral-600: #656e7b;
  --color-neutral-700: #505762;
  --color-neutral-800: #353941;
  --color-neutral-900: #22252a;
  --color-neutral-950: #121416;
  --color-success-50: #f0fef6;
  --color-success-100: #ddfde9;
  --color-success-200: #bbfbd3;
  --color-success-300: #8bf9b3;
  --color-success-400: #51f68d;
  --color-success-500: #0df261;
  --color-success-600: #0ac24e;
  --color-success-700: #089b3e;
  --color-success-800: #06742f;
  --color-success-900: #045221;
  --color-warning-50: #fef9f0;
  --color-warning-100: #fdf1dd;
  --color-warning-200: #fbe4bb;
  --color-warning-300: #f9d08b;
  --color-warning-400: #f6b951;
  --color-warning-500: #f29e0d;
  --color-warning-600: #c27e0a;
  --color-warning-700: #9b6508;
  --color-warning-800: #744c06;
  --color-warning-900: #523604;
  --color-error-50: #fef0f0;
  --color-error-100: #fddddd;
  --color-error-200: #fbbbbb;
  --color-error-300: #f98b8b;
  --color-error-400: #f65151;
  --color-error-500: #f20d0d;
  --color-error-600: #c20a0a;
  --color-error-700: #9b0808;
  --color-error-800: #740606;
  --color-error-900: #520404;
  --color-info-50: #f0f6fe;
  --color-info-100: #dde9fd;
  --color-info-200: #bbd4fb;
  --color-info-300: #8bb5f9;
  --color-info-400: #5190f6;
  --color-info-500: #0d65f2;
  --color-info-600: #0a51c2;
  --color-info-700: #08409b;
  --color-info-800: #063074;
  --color-info-900: #042252;
}