Skip to content
Color Codes

Color scale

Color Shades Generator - 50 to 900 UI Scale

Generate a 50–900 shade scale from one base color, copy CSS variables, and preview tints, shades and UI-ready color tokens.

Generated scale

CSS variables

--color-brand-50: #F4F6FB;
--color-brand-100: #E2EBF8;
--color-brand-200: #C2D5F5;
--color-brand-300: #90B6F4;
--color-brand-400: #5B96F5;
--color-brand-500: #2474F5;
--color-brand-600: #0D5BD9;
--color-brand-700: #0C47A6;
--color-brand-800: #0B3474;
--color-brand-900: #0A2247;

How to use this tool

Turn one brand color into a practical UI scale. The generator creates light tints through dark shades, labels them like common design systems, and exports CSS variables for product interfaces.

  1. 1 Enter a base color.
  2. 2 Review the generated 50–900 scale.
  3. 3 Copy individual shades or the full CSS variable block.

Frequently asked questions

What are 50–900 color scales?

They are labeled steps from very light to very dark, commonly used by UI systems and utility CSS frameworks.

Is the 500 shade always my original color?

This generator keeps hue and saturation direction from your base color, then creates a balanced scale around it rather than forcing one stop to be exact.

Can I use the scale for text colors?

Yes, but check text/background contrast. Very light tints often work better as backgrounds than foreground text.

How should I name exported variables?

Use a product-specific prefix such as --color-brand-500 so the scale can become a design token.