Color ToolsJust Added

Tint and Shade Generator

Generate tints and shades of any color and export as CSS vars or Tailwind scale.

Base Color

Pick

Tints (Lighter)

#F4F5F6

#E7EAEE

#D8DEE9

#C7D3E5

#B5C7E3

#A0BAE3

#8AADE5

#72A0E9

#5892EE

#3C83F6

#3B82F6

Base color

Shades (Darker)

#1D70F7

#075FEE

#0453D2

#0247B6

#003B99

#002F7A

#00235C

#00173D

#000C1F

#00060F

100

200

300

400

500

600

700

800

900

50: #3C83F6100: #7EA6E7200: #B5C7E3300: #E0E4EB400: #3B82F6500: #075FEE600: #0247B6700: #002F7A800: #00173D900: #00060F

Export Scale

:root {
  --color-1: #3C83F6;
  --color-2: #7EA6E7;
  --color-3: #B5C7E3;
  --color-4: #E0E4EB;
  --color-5: #3B82F6;
  --color-6: #075FEE;
  --color-7: #0247B6;
  --color-8: #002F7A;
  --color-9: #00173D;
  --color-10: #00060F;
}

Frequently Asked Questions

Color scales are used in design systems to define a range of shades for a brand color. Tailwind CSS, Material Design, and most component libraries use numeric scales (50-900).

Copy the exported object and paste it inside your tailwind.config.js theme.extend.colors section.

The HEX list format is easy to import into Figma using community plugins like Paletter or Stylify It.