Color System Builder
Turn one base color into a complete design token system with scales, semantic tokens, and CSS variables.
Color Scale
50#f1f1fe
100#e3e3fc
200#bdbff9
300#8f91f5
400#575af0
500#151aea
600#1114bb
700#0d0f8c
800#080a5e
900#050638
950#030421
About Color System Builder
Color System Builder generates a complete design token system from a single base color. Enter any hex color to instantly produce an 11-step color scale (50–950), semantic design tokens for backgrounds, surfaces, text, and borders, plus ready-to-paste output in CSS custom properties, Tailwind CSS config, and SCSS variables — no design tool required.
Private & free — this tool runs entirely in your browser.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.