Generate a numbered color scale for user interfaces
UI Theme turns one base HEX color into a ten-step scale labeled 50 through 900. Use the lighter and darker values as candidates for interface surfaces, borders, accents, text, and states, then test the combinations in their real context.
Generate a UI theme from a base color
Choose a color with the picker or enter its HEX value. The tool keeps that color at the center of the calculation and immediately generates a related range around it.
Five lighter values are created by mixing the base color toward white, and four darker values by mixing it toward black. Together with the base color, they form the displayed ten-step scale.
Understanding the 50–900 scale
The labels run from 50 for the lightest result to 900 for the darkest. They provide predictable names for referring to values across an interface; they do not assign semantic roles or guarantee compatibility with every framework’s built-in palettes.
Lighter steps can be evaluated for backgrounds, subtle borders, and low-emphasis states, while middle and darker steps can be evaluated for accents, controls, and text. Every foreground and background pairing still needs contrast testing for its intended use.
Copy and export the generated theme
Each swatch exposes a copyable HEX value. The complete scale can also be exported as System UI JavaScript, SVG, or PNG.
The System UI export supplies the numbered values as a reusable theme color scale. SVG and PNG exports are visual references rather than design-token files.
From a color scale to a design system
A single scale is a useful foundation, not a complete design system. Add semantic naming, interaction states, neutral colors, status colors, theme modes, and verified contrast according to the needs of the product.