Color Conjure 🎨

Color Conjure is an open-source color palette generator that helps designers and developers create accessible and consistent color schemes for their projects. Generate shades, check color contrasts, and export colors in various formats with ease.

🚀 Demo

Check out the live application: Color Conjure on Netlify

Please note that this is a work in progress, and some features may not be fully functional.

❗️PLEASE NOTE ❗️ - We use Seline for tracking user interactions and improving the application. Seline is a simple, lightweight, cookieless, private website analytics tool.

✨ Features

Color Shade Generation: Generate a range of shades from a base color.
Contrast Checker: Ensure text is readable against background colors by checking contrast ratios.
Export Options: Export generated colors in multiple formats like HEX, HSL, CSS variables, Tailwind CSS configurations, etc.
Accessibility Compliance: Verify color combinations against WCAG guidelines AA and AAA standards.
Interactive Color Manipulation: Adjust colors using HEX, RGB, and HSL inputs with previews.

🧰 Tools & Libraries

🛠️ Installation

Prerequisites

Node.js (v20 or higher)
npm (v9 or higher)

Steps

Clone the Repository

git clone https://github.com/utk09-NCL/color-palette-generator.git

cd color-palette-generator

Fresh Install Dependencies
```
npm run bootstrap-dev
```
Start the Development Server
```
npm run dev
```
Open the Application

The application should open automatically in your default browser. If not, visit http://localhost:5173 to view the application.
Build for Production

To build the application for production, run:
```
npm run build && npm run preview
```
The optimized files will be in the dist directory.

📝 Usage

Generate Color Shades
- Enter a base color in HEX, RGB, or HSL format.
- Click on the "Generate Shades" button to create a range of 11 colors, from 50, 100, 200, ..., 900, 950 shades.
Check Color Contrast
- Click on the "Check Colour Contrast" button to verify the contrast ratio between the text and background colors.
- The contrast ratio is displayed along with the WCAG compliance level (AA or AAA), and the columns are sortable.
Export Colors
- Click on the "Export Colors" button to view the export options.
- Choose from range of formats like HEX, HSL, CSS variables, and Tailwind CSS configurations.
- Click on the "Copy Code" button to copy the color values to the clipboard.
- If you add more than one color set/section, then you can "Export All Colors to JSON" and "Export All Colors to HEX".

📄 License

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

🤝 Contributing (Code and Design)

Contributions are welcome! Please read the CONTRIBUTING.md file for guidelines on how to contribute to this project. Please note that by participating in this project, you agree to abide by the terms of the CODE_OF_CONDUCT.md.

You can even contribute by creating designs for the project. Check the DESIGN.md file for more information.

🐛 Issue Reporting

If you find any bugs or issues, please open an issue on the GitHub repository and provide as much information as possible.

🆕 Feature Requests

If you have any feature requests or suggestions, please open an issue on the GitHub repository and provide as much information as possible, we would love to hear your ideas! Follow the FEATURE REQUEST TEMPLATE template.

❤️ Code of Conduct

Please read the CODE_OF_CONDUCT.md file for details on our code of conduct. TL;DR: Be Nice, Be Respectful, Be Inclusive.

🌟 Show Your Support

If you like this project, give it a ⭐️ on GitHub and share it with your friends!

📧 Contact Me?

If you have any queries or want to discuss this project or just tech, find my contact details on my [Personal Website]: utk09[dot]com

Thanks in advance for all your contributions! 🌟

Author

utk09-NCL

utk09-NCL / color-palette-generator

readme