https://github.com/thatsinewave/chromalab
Chroma.Lab is a modern, intuitive color palette generator that helps designers, developers, and creatives discover, create, and save beautiful color combinations for their projects.
https://github.com/thatsinewave/chromalab
color color-palette color-picker color-scheme colorpalette colorpalettes colorpicker colorpicker-application colorpicker-tools colors good-first-bug good-first-contribution good-first-issue good-first-issues good-first-pr good-first-pr-first-contribution good-first-prs html-css-javascript html-css-js thatsinewave
Last synced: 12 days ago
JSON representation
Chroma.Lab is a modern, intuitive color palette generator that helps designers, developers, and creatives discover, create, and save beautiful color combinations for their projects.
- Host: GitHub
- URL: https://github.com/thatsinewave/chromalab
- Owner: ThatSINEWAVE
- License: mit
- Created: 2025-03-22T12:27:22.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-03-22T14:26:41.000Z (about 1 month ago)
- Last Synced: 2025-03-22T15:27:29.870Z (about 1 month ago)
- Topics: color, color-palette, color-picker, color-scheme, colorpalette, colorpalettes, colorpicker, colorpicker-application, colorpicker-tools, colors, good-first-bug, good-first-contribution, good-first-issue, good-first-issues, good-first-pr, good-first-pr-first-contribution, good-first-prs, html-css-javascript, html-css-js, thatsinewave
- Language: JavaScript
- Homepage: https://thatsinewave.github.io/ChromaLab/
- Size: 216 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# [Chroma.Lab](https://thatsinewave.github.io/ChromaLab)
Chroma.Lab is a modern, intuitive color palette generator that helps designers, developers, and creatives discover, create, and save beautiful color combinations for their projects.
## Features
- **Multiple Palette Types**: Generate color palettes based on different color theories:
- Random
- Analogous
- Monochromatic
- Complementary
- Triadic
- Tetradic
- Pastel
- Earthy Tones
- Gradient
- **Customizable Options**:
- Choose from 3 to 6 colors per palette
- Light/Dark theme support
- **User-Friendly Interface**:
- One-click color copying to clipboard
- Save favorite palettes
- Rename saved palettes
- Delete unwanted palettes
- **Persistence**:
- All saved palettes are stored locally in your browser
- Dark/light mode preference is remembered
## ☕ [Support my work on Ko-Fi](https://ko-fi.com/thatsinewave)
## Technologies Used
- **Pure JavaScript** (No frameworks or libraries)
- **HTML5** and **CSS3**
- **LocalStorage API** for data persistence
- **Clipboard API** for color copying
## Responsive Design
Chroma.Lab is fully responsive and works seamlessly across devices of all sizes:
- Desktop
- Tablet
- Mobile
## How It Works
1. **Generate a Palette**: Choose your desired palette type and color count, then click "Generate New Palette"
2. **Copy Colors**: Click on any color block or its hex code to copy to clipboard
3. **Save Palettes**: Click "Save Current Palette" to add the current palette to your collection
4. **Manage Saved Palettes**: Rename or delete palettes in your collection
5. **Toggle Theme**: Switch between light and dark mode with the sun/moon icon
## Development
### Project Structure
```
chroma-lab/
├── index.html # Main HTML structure
├── styles.css # Styling
├── script.js # Application logic
└── site-data/ # Favicons and site metadata
```
### Key Components
- **Color Generation Algorithms**: Different algorithms for each palette type
- **LocalStorage Management**: Save/load/delete user palettes
- **UI Interactivity**: Real-time color display and user feedback
- **Theming System**: Light/dark mode switching
## [Join my Discord server](https://discord.gg/2nHHHBWNDw)
## Installation
1. Clone the repository:
```
git clone https://github.com/ThatSINEWAVE/chroma-lab.git
```
2. Open `index.html` in your browser to run locally
3. No build process or dependencies required!
## Contributing
Feel free to submit issues or contribute improvements via pull requests.
## License
This project is open-source and available under the [MIT License](LICENSE).