Palette
Generate perceptual color systems from a single seed — optimized for the context, not canned from a template.
Engine
Goal
Gamut
Space
CVD model
Tonal Scale
50 #eff6ff #eff6ff
100 #d9e9ff #d9e9ff
200 #bad6ff #bad6ff
300 #8db9fe #8db9fe
400 #6097f1 #6097f1
500 #3473d8 #3473d8
600 #1154b9 #1154b9
700 #003791 #003791
800 #00236d #00236d
900 #001147 #001147
950 #000526 #000526
Neutral Scale
50 #f2f5fb #f2f5fb
100 #e5e8ed #e5e8ed
200 #d1d4da #d1d4da
300 #b4b8bd #b4b8bd
400 #95989d #95989d
500 #75787c #75787c
600 #585b5f #585b5f
700 #3d4044 #3d4044
800 #292b2f #292b2f
900 #16181c #16181c
950 #07090c #07090c
Semantic Tokens
primary #3473d8
on-primary #ffffff
primary-container #d9e9ff
on-primary-container #001147
surface #f2f5fb
on-surface #16181c
surface-dim #e5e8ed
surface-bright #f2f5fb
outline #95989d
CSS output
:root {
/* Advanced palette score 0.962 */
--primary-50: #eff6ff;
--primary-100: #d9e9ff;
--primary-200: #bad6ff;
--primary-300: #8db9fe;
--primary-400: #6097f1;
--primary-500: #3473d8;
--primary-600: #1154b9;
--primary-700: #003791;
--primary-800: #00236d;
--primary-900: #001147;
--primary-950: #000526;
--neutral-50: #f2f5fb;
--neutral-100: #e5e8ed;
--neutral-200: #d1d4da;
--neutral-300: #b4b8bd;
--neutral-400: #95989d;
--neutral-500: #75787c;
--neutral-600: #585b5f;
--neutral-700: #3d4044;
--neutral-800: #292b2f;
--neutral-900: #16181c;
--neutral-950: #07090c;
}