Palette Alchemy

🎨 Feature-rich color palette tool using Nuxt, TypeScript, Tailwind, and Shadcn/ui, letting designers generate palettes across color theories, analyze properties, export formats, and enjoy a responsive, elegant interface.

Features

• Generate color palettes in various modes (analogous, monochrome, complementary, triadic, compound, shades, tetradic, square)
• Random palette generation with customizable color count
• Color format conversions (HEX, RGB, HSL, HWB, etc.)
• Color analysis (hue, brightness, luminance, contrast)
• Responsive UI with sidebar controls and grid display
• Copy color values to clipboard with toast notifications
• Export palettes
• Built with a beautiful, accessible UI using Tailwind CSS and shadcn components

Tech Stack

• Nuxt 4 (Vue 3)
• Tailwind CSS
• Pinia (state management)
• chroma-js (color manipulation)
• vue-sonner (toasts)
• shadcn-vue (UI components)

Deploy Your Own

You can deploy this project to Vercel, Netlify, or any platform that supports Nuxt 4 static or SSR deployments.

• Vercel: vercel.com/new
• Netlify: netlify.com/new

Getting Started

1. Clone the repository:

   git clone https://github.com/KurutoDenzeru/palette-alchemy.git
   cd palette-alchemy

2. Install dependencies:

   npm install
   # or
   bun install

3. Start the development server:

   npm run dev
   # or
   bun run dev

4. Open in your browser: Visit http://localhost:3000

Configuration

• Tailwind CSS: Edit app/assets/css/tailwind.css and tailwind.config.js for custom styles.
• Nuxt Config: See nuxt.config.ts for module and build configuration.
• Palette Modes: Add or modify palette modes in app/composables/palette/usePalette.ts.
• State Management: Uses Pinia stores in app/composables/palette/usePaletteStore.ts.

Contributing

Contributions are always welcome!

See Contributing.md for ways to get started.