Color System Generator
Generate a full color system from one color.
100% client-side — your files never leave your browser
Primary Palette
50#f0f6fe100#dde9fd200#bbd4fc300#8ab5f9400#5090f7500#0b64f4600#0950c3700#07409c800#063075900#042253950#021431Neutral Palette
50#f9fafa100#f4f5f6200#e6e8ea300#d2d5da400#abb1ba500#818a98600#656e7b700#505762800#353941900#22252a950#121416Semantic 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;
}