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%)',
            },
        },
    },
},