Welcome to Fluid Color Palettes, where beautiful color palettes meet dynamic functionality! This project powers a Figma plugin that brings fully dynamic variables to your design process. But that's not all! You can also use this tool as a standalone website, offering a modern and minimal UI to visualize and interact with your chosen colors.
- 🆕 Updated TailwindCSS Support: Now supporting up to TailwindCSS V3.3.0+ with a new 950 color step.
- 🎨 Modern & Minimal UI: An intuitive interface that brings the joy back into choosing color palettes.
- 🔴🟢🟣 Dynamic Palettes: Generate color palettes from primary, secondary, and tertiary colors, including monochromatic shades.
- 📷 Snapshot: Save the entire UI as a PNG, perfect for using as a color template in your designs.
- 📋 Clipboard Friendly: Easily copy individual colors to your clipboard.
- 📱 Mobile-Friendly: Design on-the-go, directly from your mobile device.
- 🌞🌜 Day and Night: Supports both light and dark modes.
- 🎛️ Interactive & Graphic Visualization: See your palette come alive, either in an interactive format or as a graphic.
- 📜 Code Export: Grab the generated color tokens for different platforms, directly from the 'Code' tab.
CleanShot.2024-06-24.at.01.19.08.mp4
- RAW
- Tailwind CSS
- @shadcn/ui
- React Native Paper
- Figma plugin [WIP]
We welcome contributions from the community! If you have any ideas, suggestions, or bug reports, please feel free to open an issue or submit a pull request. We are always looking to improve and expand our project, and we would love to have you on board!
Hey there, code wrangler! This GitHub project is rocking the MIT license,
which means you can take it, shake it, break it, or make it your own.
Seriously, go wild—I’m not going to lose any sleep over it. Enjoy! 😎🎉
Huge shoutout to these awesome libraries that make my project shine 🌟:
- 🎨 Culori: Our color wizard for magical color manipulations.
- 🌈 Extract-Colors: The extract artist helping us pull colors out of thin air.
- 🌟 Framer-Motion: The spell we cast for our smooth animations.
- 🛡️ Jsonwebtoken: Our secret keeper for secure tokens.
- 🧙♂️ Lucide-React: Creating icons that enchant the UI.
- 🚀 Next.js: The magic carpet that takes our project to the web.
- 🌓 Next-Themes: The alchemist of light and dark UI themes.
- ⚛️ React & React-DOM: The heart and soul of our interactive UI.
- 🌈 React-Colorful: Our colorful companion in palette generation.
- 🎨 Tinycolor2: Tiny but mighty, a true color genius!
- 👨💻 shadn-ui: The core components that make up our UI.
- 🗃️ Zustand: Our state management potion brewer.
Thank you for helping us bring color and magic to the design and development world! 🎉