Tailwindcss Palette Generator

Quickly generate tailwindcss color palettes from a base color or colors.

Demo • Key Features • Installation • Usage • Examples

Demo

Interactive demo generating tailwindcss palettes

Key Features

• Generate color palette with as little as a hex value ( See Example )
• Generate multiple color palettes ( See Example )
• Customize the palette shade names & lightnesses ( See Example )
• Default color naming applied automatically or can be overwritten ( See Example )
• Zero (0) dependencies
• Typescript support
• Preserve Supplied Color

Installation

npm i @bobthered/tailwindcss-palette-generator

Options

The tailwindcssPaletteGenerator() function receives only one parameter.

Usage

Example - Basic

// tailwind.config.js
import { tailwindcssPaletteGenerator } from '@bobthered/tailwindcssPaletteGenerator';

export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            colors: tailwindcssPaletteGenerator('#FF0040')
        }
    },
    plugins: []
};

Example - Multiple Colors

// tailwind.config.js
import { tailwindcssPaletteGenerator } from '@bobthered/tailwindcssPaletteGenerator';

export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            colors: tailwindcssPaletteGenerator(['#FF0040', '#FFBB00'])
        }
    },
    plugins: []
};

Example - Custom Shades and Lightness

// tailwind.config.js
import { tailwindcssPaletteGenerator } from '@bobthered/tailwindcssPaletteGenerator';

export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            colors: tailwindcssPaletteGenerator({
                colors: ['#FF0040'],
                shades: [
                    { name: 'light', lightness: 95 },
                    { name: 'normal', lightness: 46 },
                    { name: 'dark', lightness: 7 }
                ]
            })
        }
    },
    plugins: []
};

Example - Override color names

// tailwind.config.js
import { tailwindcssPaletteGenerator } from '@bobthered/tailwindcssPaletteGenerator';

export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            colors: tailwindcssPaletteGenerator({
                colors: ['#FF0040', '#FFBB00'],
                names: ['red', 'yellow']
            })
        }
    },
    plugins: []
};