Color Shade / Tint Generator

About this tool

Enter a base hex color and generate a range of lighter tints and darker shades, a quick way to build a consistent color scale for a design system.

Example

Input: #3b82f6

Output: 50-900 tint/shade scale

Privacy

This tool runs entirely in your browser. Your data is processed locally and never uploaded to a server.

How to use this tool

1. Enter a base hex color such as #3B82F6 into the input field.
2. Choose how many lighter tints and darker shades you want to generate.
3. Click generate to build the color scale.
4. Copy the shades you need into your design system, CSS, or theme file.

Step by step, what happens

1. The tool reads your base hex color and checks that it is a valid hex value.
2. It then builds a consistent palette around that base color by creating lighter tints and darker shades.
3. Each generated color stays related to the original hue so the scale feels uniform.
4. You can use the output as a quick reference when naming tokens like primary-100 or primary-900.

Worked example

A designer wants a usable blue scale for buttons, backgrounds, and hover states starting from one brand color.

Input: #3B82F6

1. Paste #3B82F6 into the base color field.
2. Generate the palette to see lighter tints above it and darker shades below it.
3. Pick the values that fit your UI states, such as a very light tint for backgrounds and a darker shade for text or borders.

Tips and common mistakes

• Use a valid hex color, including the leading #, so the tool can parse it correctly.
• Start with a brand color that is already close to the tone you want, because the generated scale stays tied to that base.
• Check the generated shades on real UI surfaces, since a color that looks good in a list may feel too strong or too pale in context.
• Keep your chosen tint and shade names consistent across your design system so developers can reuse them easily.

Frequently asked questions