TailScale

Generate TailwindCSS-compatible color shades from a base color.

Color Name

Color Value

hex

Brightness Spread

Here’s your Palette

Click to copy, edit to change.

green-100

green-200

green-300

green-400

green-500

green-600

green-700

green-800

green-900

Here are your Color Objects

Copy & paste into tailwind.config.js.

green: {
    100: '#F0FFF4',
    200: '#C6F6D5',
    300: '#9AE6B4',
    400: '#68D391',
    500: '#48BB78',
    600: '#38A169',
    700: '#2F855A',
    800: '#276749',
    900: '#22543D',
}