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.
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.
- 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.
- react
- chroma-js
- @tanstack/react-table
- react-hot-toast
- react-router-dom
- @headlessui/react
- clsx
- vite
- tailwindcss
- eslint
- prettier
- husky
- commitlint
- lint-staged
- vitest
- jsdom
- @testing-library/jest-dom
- @testing-library/react
- @vitest/coverage-istanbul
- Node.js (v20 or higher)
- npm (v9 or higher)
-
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 previewThe optimized files will be in the
distdirectory.
-
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".
This project is licensed under the MIT License - see the LICENSE file for details.
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.
If you find any bugs or issues, please open an issue on the GitHub repository and provide as much information as possible.
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.
Please read the CODE_OF_CONDUCT.md file for details on our code of conduct. TL;DR: Be Nice, Be Respectful, Be Inclusive.
If you like this project, give it a ⭐️ on GitHub and share it with your friends!
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
A big shoutout to all the contributors who have helped (and are helping) in building this project.