Note
This project is primarily built and maintained using AI coding agents.
Swatcher is a powerful and intuitive color system design tool aimed at helping developers and designers create, manage, and export accessible color palettes and design tokens. Whether you're building a design system from scratch or fine-tuning an existing one, Swatcher provides the precision tools you need.
- Advanced Color Math: Precise color calculations and manipulations across different color spaces.
- Robust State Management: Powered by React
useReducerand the Context API for scalable application state. - Dark-Themed Interface: A clean, user-friendly workspace optimized for focused design work.
- Export Formats: Easily export your color system as design tokens (CSS variables, JSON, etc.) for direct integration into your projects.
- Accessibility Built-in: Includes APCA contrast calculations to ensure your colors are readable and compliant with modern accessibility standards.
- Gamut Warnings: Get real-time alerts when colors fall outside the standard sRGB gamut, preventing display inconsistencies.
- Customizable Curve Editing: Fine-tune color scales and gradients with a visual curve editing system.
To get a local copy up and running, follow these simple steps.
You will need Node.js installed on your machine.
- Node.js (v18 or higher recommended)
- npm or yarn
- Clone the repository
git clone https://github.com/ericges/swatcher.git
- Navigate to the project directory
cd swatcher - Install NPM dependencies
npm install
- Start the development server
npm run dev
npm run dev- Starts the local development server.npm run build- Creates a production-ready build in thedistdirectory.npm run lint- Runs ESLint to check for code style issues and ensure code quality.npm run preview- Locally preview the production build.
This project is configured for continuous deployment using GitHub Actions. Whenever a commit is pushed to the main branch, the application is automatically built and deployed as static files to GitHub Pages.
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag enhancement. Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'feat: Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Ensure your code passes the linting checks by running
npm run lintbefore opening a pull request. - Keep components focused and use the provided
Tailwind CSS v4utility classes.
Distributed under the MIT License. See LICENSE for more information.