Skip to content

Color Palette Generator

Choose a base color and generate nine light-to-dark HEX shades to compare and copy.

Use a three- or six-digit HEX value, such as #2563EB.

Palette scale 100 is the lightest step, 500 is the base color, and 900 is the darkest step.

Start with one color

Pick a base color or enter a three- or six-digit HEX value. The generator creates nine steps numbered 100 through 900. Step 500 is the color you entered; lower steps are lighter and higher steps are darker.

How the shades are made

Each step blends the RGB channels of the base color toward white or black. The result is a predictable light-to-dark scale, not a contrast check or a promise that the colors match a particular design system.

Copy the palette

Copy one HEX value from its card or copy the complete list at once. The values are six-digit HEX colors in uppercase, so they can be pasted into CSS, design notes, or a color token file.