@edaru/color-palette-generator

A powerful and easy-to-use TailwindCSS like color palette generator.

Features

• Generate custom color palettes based on a single hex color code
• Seamlessly integrate with TailwindCSS projects
• Create harmonious color schemes

Installation

Install the package using your preferred package manager:

npm install @edaru/color-palette-generator
# or
yarn add @edaru/color-palette-generator
# or
pnpm install @edaru/color-palette-generator

Usage

Import the generateCustomPalette function and use it with your desired color:

import { generateCustomPalette } from '@edaru/color-palette-generator'

const baseColor = '#123456'
const customPalette = generateCustomPalette(baseColor)

console.log(customPalette)

The generateCustomPalette function returns an object with color variations from 50 to 950, following the TailwindCSS naming convention.

Integration with TailwindCSS

To use your generated palette in a TailwindCSS project, add it to your tailwind.config.js file:

tailwind.config.js

import { generateCustomPalette } from '@edaru/color-palette-generator'

export default {
  theme: {
    extend: {
      colors: {
        custom: generateCustomPalette('#123456').shades,
      },
    },
  },
  // ... other configurations
}

tailwind.config.cjs

const { generateCustomPalette } = require('@edaru/color-palette-generator')

module.exports = {
  theme: {
    extend: {
      colors: {
        custom: generateCustomPalette('#123456').shades,
      },
    },
  },
  // ... other configurations
}

Now you can use your custom colors in your project, like bg-custom-500 or text-custom-200.

API Reference

generateCustomPalette(baseColor: string): object

Generates a color palette based on the provided base color.

• baseColor: A string representing a valid hex color code (e.g., "#123456")
• Returns: An object with color variations from 50 to 950

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.