Colors EncyclopediaFree design system tool · No sign-up
Palette & Token Studio
Turn one color into a complete, usable design-system scale. Preview every shade, check its safest text color, and export clean tokens for your stack.
Live interface preview
Design with a coherent scale.
Buttons, surfaces, borders, focus states, and readable text all use the generated tokens.
Developer handoff
Export tokens
Connected encyclopedia
Matching this color…
Looking for an exact named-color record or the closest editorial color.
From color to code
Generate a complete design-system color scale
Start with one HEX color
Choose a brand, interface, or accent color. The generator creates eleven related shades from 50 through 950 while preserving the base hue.
Check readable text
Every swatch shows whether black or white provides the stronger contrast and identifies AA or AAA combinations for standard text.
Export tokens for your stack
Copy CSS custom properties, SCSS variables, structured JSON, or a Tailwind theme object without manually renaming eleven separate values.
Why use a 50–950 palette?
A consistent scale gives interfaces predictable surface, border, hover, focus, and text colors. Lighter steps work well for backgrounds and subtle states; middle steps support controls and brand accents; darker steps provide emphasis and readable foregrounds. The live preview helps evaluate the scale before it reaches production.