/tailwindcss-palette-generator

Quickly generate tailwind color palettes from a base color.

Primary LanguageTypeScriptMIT LicenseMIT

Tailwindcss Palette Generator

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

NPM

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

Usage

Example - Basic

// tailwind.config.js
const {
  tailwindcssPaletteGenerator,
} = require("@bobthered/tailwindcss-palette-generator");

module.exports = {
  content: ["./src/**/*.{html,js,svelte,ts}"],
  theme: {
    extend: {
      colors: tailwindcssPaletteGenerator("#FF0040"),
    },
  },
  plugins: [],
};

Example - Multiple Colors

// tailwind.config.js
const {
  tailwindcssPaletteGenerator,
} = require("@bobthered/tailwindcss-palette-generator");

module.exports = {
  content: ["./src/**/*.{html,js,svelte,ts}"],
  theme: {
    extend: {
      colors: tailwindcssPaletteGenerator(["#FF0040", "#FFBB00"]),
    },
  },
  plugins: [],
};

Example - Custom Shades and Lightness

// tailwind.config.js
const {
  tailwindcssPaletteGenerator,
} = require("@bobthered/tailwindcss-palette-generator");

module.exports = {
  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
const {
  tailwindcssPaletteGenerator,
} = require("@bobthered/tailwindcss-palette-generator");

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