A fast, no-login color palette discovery tool - browse, search, like,
and publish four-color palettes with zero signup friction.
Created by Bilal Malik
Follow on Github bilalmlkdev
Welcome to PaletteSnap - a modern, open-source color palette tool built to make discovering, saving, and publishing four-color palettes effortless in your browser. Unlike sign-up-gated palette tools, PaletteSnap requires no account at all. Likes and collections are tied to your browser through an anonymous device identity, and anyone can publish a palette that instantly goes live for every visitor to discover - no approval queue, no friction.
- Frictionless Browsing: Switch instantly between New, Popular, Random, Tagged, and Custom Feeds with smart sidebar tag swatches and a multi-tag search bar.
- Zero-Barrier Publishing: Pick 4 colors, tag them, and publish instantly for the world to see - no accounts, emails, or passwords required.
- Anonymous Identity: Your likes and personal collections are tracked seamlessly via
localStorage. - Global Persistence: Backed by Supabase (Postgres) so published palettes and like counts sync globally in real time.
- Rich Palette Details: Get instant Hex & RGB values, click-to-copy functionality, and discover Related Palettes by shared tags.
- One-Click Export: Download any color scheme instantly as SVG, PNG, or JPEG.
- Fully Responsive: Optimized for mobile with a slide-out filter drawer, collapsible search, and adaptive header actions.
- Feeds & Search: Browse via New, Popular, or Random feeds, or combine filters using Multi-Tag Search and Sidebar Swatches.
- Infinite Scrolling: Seamlessly load more palettes as you scroll.
- Contextual Discovery: View Related Palettes that share tags with your current selection.
- Instant Publishing: Pick 4 colors, tag them, and publish instantly-no account needed.
- Fair-Use Limit: 20 published palettes per browser per week, enforced in the database, so one visitor cannot flood the shared palette feed.
- Local History: Track everything you've published on the device via My Creations.
- One-Click Export: Download color schemes as SVG, PNG, or JPEG, or copy hex values instantly with Click-to-Clipboard.
- Live & Optimistic Likes: Global, real-time like counts via Supabase with instant UI feedback.
- URL-Synced State: Every filter, search term, and view is instantly shareable via the URL.
- Resilient & Responsive: Features an Offline Fallback, smooth Token-Based Loading, and a fully mobile-optimized layout.
- Discover Palettes: Visit the live site and instantly explore beautiful four-color palettes. Filter using the multi-tag search bar or the popular color tags in the sidebar.
- Interact & Save: Hit the heart icon to save palettes you like. Your choices are automatically remembered on your device - no profile creation required.
- Copy & Export: Click on any individual color block to copy its Hex or RGB code instantly. You can also export full palettes as high-quality SVGs, PNGs, or JPEGs for your design workflows.
- Publish Your Own: Open the palette creation tool, choose 4 colors, assign descriptive tags, and hit publish to share it with the world instantly.
| Layer | Tools |
|---|---|
| Frontend | React 19, TypeScript, Vite 7, Tailwind CSS 4 |
| State | Zustand, React Router 7 |
| Motion | Framer Motion |
| Backend | Supabase (Postgres) with anonymous device identity |
| Deploy | Vercel |
Full contributor setup lives in CONTRIBUTING.md. Short version:
git clone https://github.com/bilalmlkdev/palettesnap.git
cd palettesnap
npm install
cp .env.example .envCreate a free Supabase project, run supabase/schema.sql in the SQL editor, then put your URL and anon key in .env:
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-publishable-keynpm run dev # http://localhost:5173
npm run lint # ESLint
npm run type-check # tsc --noEmit
npm run build # production buildCI runs all three checks on every push and pull request.
Contributions make the open-source community an amazing place to learn, inspire, and create. Any contributions you make to PaletteSnap are greatly appreciated!
- CONTRIBUTING.md - setup, style guide, commit format, and the PR process
- CODE_OF_CONDUCT.md - how we expect everyone to behave
- SECURITY.md - how to report vulnerabilities privately
- CHANGELOG.md - what changed between releases
- Report Bugs: Use the bug report template if you encounter layout bugs, performance issues, or incorrect asset generation.
- Suggest Features: Have an idea for a new export format, secondary filter tool, or UI improvement? Open a feature request.
- Submit Pull Requests: If you want to dive into the codebase and fix a bug or add a feature yourself, we welcome your code contributions. Start with issues labeled
good first issue.
- Fork the Project.
- Create your Feature Branch (
git checkout -b feature/AmazingFeature). - Commit your Changes using Conventional Commits (
git commit -m 'feat: add AmazingFeature'). - Push to the Branch (
git push origin feature/AmazingFeature). - Open a Pull Request against the main branch.
CI must be green (lint, type-check, build) before a PR can merge.
This project is licensed under the MIT License.
MIT License
Copyright (c) 2026 Bilal Malik
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.