@kalelbiwon/tailwindcolors

Interactive CLI that generates Tailwind-style color ramps (50–950) from a single hex color.

• Preserves your input color as 500
• Outputs CSS variables (Tailwind v4 friendly) or a Tailwind config JS object
• Supports: hex, rgba, hsl, hwb, lab, lch, oklab, oklch
• Automatically copies output to your clipboard

Usage (no install)

Because this package is scoped, run it with:

npx @kalelbiwon/tailwindcolors

What It Prompts For

• Base hex color (example: #4658D9)
• Desired output format (oklch recommended)
• Output type (CSS variables or JS object)
• CSS variable prefix (example: --color-primary-)
• Optionally wraps CSS in Tailwind v4 @theme { ... }

Tailwind v4 Output (CSS Variables)

If you choose CSS variables and enable wrapping, the CLI outputs:

@theme {
  --color-primary-50: oklch(...);
  --color-primary-100: oklch(...);
  ...
  --color-primary-500: oklch(...);
  ...
  --color-primary-950: oklch(...);
}

Paste that into your Tailwind entry CSS file:

@import "tailwindcss";

@theme {
  /* generated tokens */
}

Then use utilities like:

• bg-primary-500
• text-primary-600
• ring-primary-400

Tailwind Config (JS Object Output)

If you choose JS output, you'll get:

primary: {
  "50": "oklch(...)",
  "100": "oklch(...)",
  ...
  "500": "oklch(...)",
  ...
  "950": "oklch(...)"
}

Paste into:

theme: {
  extend: {
    colors: {
      primary: { ... }
    }
  }
}

Formatting Behavior

• OKLCH
  • Lightness → percentage (2 decimals)
  • Chroma → 4 decimals
  • Hue → 1 decimal
• HSL
  • Hue → 1 decimal
  • Saturation / Lightness → 1 decimal %
• HWB
  • Hue → 1 decimal
  • Whiteness / Blackness → 1 decimal %

All output is human-readable and design-friendly.

Local Development

Install dependencies:

npm install

Run locally:

npm run tailwindcolors

Publishing

npm version patch
npm publish --access public

License

MIT