Generate light and dark variants

Designers use it to derive coordinated light and dark tones from a base color before defining an interface palette.

Generate light and dark variants. The entire operation stays in your browser, and the values you enter are never sent to a server, shared, or stored.

How to use

  1. Enter a base color in hexadecimal format in the input field.
  2. Run the generator to create lighter and darker variants.
  3. Review the suggestions and choose tones that fit your interface.
  4. Try another base color if the proposed palette does not match your goal.
  5. Copy the selected values into your design system or stylesheet.

Example

With the blue sample provided, see how the hue expands into lighter and darker tones. This helps build hover, active or disabled states without starting from a blank page.

Input

#2563EB

Output

100: #BED0F9
300: #719AF2
500: #2563EB
700: #1C4AB0
900: #133276

Limits and formats

Where processing happens

Generation takes place in your browser. The base color is not sent outside, and no palette is saved by the page. You can try several base colors during the same session.

Frequently asked questions

Can I start from a specific color?

Yes, enter the base color in hexadecimal form. The tool uses it to calculate a set of lighter and darker variants.

Are the variants accessible?

They offer contrast ideas, but the tool does not measure compliance. Check text and background pairs with a suitable contrast checker.

How many colors can I generate?

The process starts from one color and returns several tones. For a full palette, repeat it with each main color in your project.

Can I use the generated tones as my brand palette?

No. Generated tones do not replace a reviewed brand palette. The tool suggests lighter and darker variants from one color but does not check accessibility. Test each value in the real interface, because display conditions can change the look. A light or dark variant may fail on some backgrounds even if it looks correct in the list.

Is the base color saved when I generate a palette?

No. Generation takes place in your browser. The base color is not sent outside, and no palette is saved by the page. You can try several base colors during the same session. Copy the selected values into your design system or stylesheet before leaving. This keeps your color experiments local while you decide.

Tools in the same category