Beautiful Tailwind Palettes

Generate consistent, accessible color palettes for your design system. Transform any color into a complete 11-shade Tailwind CSS palette.

Try the Playground View Documentation

⚡

Lightning Fast

Generate complete palettes instantly with our optimized algorithm. No waiting, no complex setup.

🔧

Multiple Formats

Use anywhere - ESM, UMD, Node.js. TypeScript support included out of the box.

Interactive Playground

Pick any color and see the magic happen

Choose Color:

Export Your Palette

Tailwind Config

CSS Variables

Usage Examples

Choose your preferred way to integrate

ES Modules

Modern JavaScript/TypeScript

// Install
npm install @freshworks/dew-theme-generator

// Import
import { generatePalette } from '@freshworks/dew-theme-generator';

// Use
const palette = generatePalette('#3b82f6');
console.log(palette['500']); // '#3b82f6'

UMD

Browser Script

Direct browser usage

<script src="path/to/index.umd.cjs"></script>
<script>
  const { generatePalette } =
    window.TailwindPaletteGenerator;

  const palette = generatePalette('#3b82f6');
  console.log(palette);
</script>

Node

Node.js

Server-side usage

// CommonJS
const { generatePalette } =
  require('@freshworks/dew-theme-generator');

// Generate palette
const colors = generatePalette('#3b82f6');

// Use in your build process
fs.writeFileSync('colors.json',
  JSON.stringify(colors, null, 2));

API Reference

Simple, powerful functions for color generation

generatePalette()

Generate a complete 11-shade Tailwind palette from any color.

Parameters

inputColor: string

Valid hex color (e.g., "#3b82f6")

Returns

{ [shade: string]: string }

Object with shades 50-950

Example

const palette = generatePalette('#3b82f6');
// Returns: {
//   '50': '#eff5ff',
//   '100': '#dbe8fe',
//   ...
//   '950': '#172e54'
// }

generatePaletteVariant()

Get a specific shade from the generated palette.

Parameters

inputColor: string

Valid hex color

variant: string | number

Shade key (50, 100, ..., 950)

Returns

string

Hex color for the variant

Example

const color700 = generatePaletteVariant(
  '#3b82f6',
  '700'
);
console.log(color700); // '#1d4ed8'