Tailwind Color Palette Generator

This is a simple color palette generator for Tailwind CSS.

It uses Alpine.js for interactivity and Color.js for interpolating between the colors.

Instructions

Start and end colors

Choose the start and end colors using the HSL sliders.

Color space

This determines in which color space the interpolation happens. Choose between:

• HSL – hue / saturation / lightness

• LCH – lightness / chroma / hue

Interpolation method

This determines how the colors are interpolated in the polar coordinate space. Choose between:

• longer / shorter – it takes the longest / shortest route between the start and end colors, going "around the corner" (from 0° to 360°) if necessary

• shorter – it takes the shortest route between the start and end colors

• increasing / decreasing – it starts off with increasing or decreasing the hue and goes "around the corner" (from 0° to 360°) if necessary

• raw – it never goes "around the corner"

Using in Tailwind

To use the colors in Tailwind, click the "Copy to clipboard" button and paste it into your Tailwind config:

theme: {
    extend: {
        colors: {
            'brand': {
                100: 'hsl(474 0% 98%)',
                200: 'hsl(442.625 9.75% 86.625%)',
                300: 'hsl(411.25 19.5% 75.25%)',
                400: 'hsl(379.875 29.25% 63.875%)',
                500: 'hsl(348.5 39% 52.5%)',
                600: 'hsl(317.125 48.75% 41.125%)',
                700: 'hsl(285.75 58.5% 29.75%)',
                800: 'hsl(254.375 68.25% 18.375%)',
                900: 'hsl(223 78% 7%)',
            },
        },
    },
},