Color Generator

Generate tints and shades from a base color to build palettes. Great for design systems and theming.

Color

Pick a base color to generate tints and shades. Use the swatch or Randomize; each palette value can be copied.

Base color

#2563EB

Palette

Tint 20%

#5182EF

Tint 40%

#7CA1F3

Tint 60%

#A8C1F7

Tint 80%

#D3E0FB

Base

#2563EB

Shade 80%

#1E4FBC

Shade 60%

#163B8D

Shade 40%

#0F285E

Shade 20%

#07142F

How this generator works

Pick a base color and the tool generates a full palette of tints (lighter) and shades (darker) from it. Tints are created by mixing with white, and shades by mixing with black, at consistent intervals. The result is a ready-to-use color scale similar to what you'd find in Tailwind CSS or Material Design.

Using the generated palette

Copy individual color values in HEX or RGB format. Use the lighter tints for backgrounds and hover states, the mid-range for borders and secondary elements, and the darker shades for text and primary actions. A well-structured palette from a single base color keeps your design cohesive.

When you'd use this

Starting a new project and need a color system
Building a design token set for a component library
Finding accessible foreground/background combinations from the same hue family
Quickly generating shades for CSS custom properties or Tailwind config