Palletto 🎨

A beautiful web app for extracting color palettes from images using the OKLCH color space. Upload an image and get 11 unique palette variations instantly!

Features

• 🖼️ Bulk Image Upload - Upload multiple images at once via drag-and-drop or file picker
• 🎨 11 Palette Variations - Get diverse color schemes from a single image
• 💡 Highlighter Mode - Calculates maximum possible vibrancy for each hue
• 🌈 OKLCH Format - Modern color space with better perceptual uniformity
• 📋 Easy Copying - Click any color to copy to clipboard
• 💾 Export Options - Export all palettes as CSS variables
• ✨ Beautiful UI - Modern, responsive design with smooth animations

The 11 Palette Variations

Each uploaded image generates these distinct palettes:

1. Extracted Colors - Original dominant colors from the image (k-means clustering)
2. Soft Pastels - Gentle, muted version (↑ lightness, ↓ chroma)
3. Complementary - Opposite colors (inverted lightness, +180° hue)
4. Vibrant Bold - Highly saturated, punchy colors (↑↑ chroma)
5. 🔥 Highlighter Neon - MAXIMUM possible chroma at optimal lightness (L=0.8)
6. Monochrome - Grayscale version (chroma = 0)
7. Dark Mode - Deep, dark tones (↓↓ lightness)
8. Neon Electric - Maximum saturation glow effect
9. Analogous Harmony - Adjacent color wheel (+30° hue)
10. Warm Tones - Shifted toward red/orange/yellow
11. Cool Tones - Shifted toward blue/cyan

💡 Special: Highlighter Neon Algorithm

The Highlighter Neon palette uses a sophisticated algorithm to calculate the absolute maximum chroma possible for each hue:

How it works:

• Sets lightness to 0.8 (the "highlighter sweet spot" where colors appear to glow)
• Calculates hue-specific maximum chroma:
  • Yellow-Green (60-120°): ~0.37 (highest)
  • Red (0-30°, 330-360°): ~0.33
  • Purple/Magenta (270-330°): ~0.32
  • Blue (240-270°): ~0.31
  • Cyan (180-210°): ~0.29
• Adjusts for lightness constraints (chroma capacity varies with L)
• Creates that fluorescent, highlighter marker effect

This palette will always give you the most vibrant possible color for each hue! 🔥

Installation

# Install dependencies
npm install

# Or using pnpm
pnpm install

Usage

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

How It Works

1. Smart Color Extraction

• Downscales image to ~150px for efficient processing
• Extracts unique colors with quantization (reduces near-duplicates)
• Uses k-means++ clustering for optimal color grouping
• Weights colors by frequency for accurate representation

2. OKLCH Transformations

All 9 variations are generated by manipulating OKLCH components:

• L (Lightness): 0-1 (dark to light)
• C (Chroma): 0-0.37 (gray to saturated)
• H (Hue): 0-360° (color wheel position)

3. Export & Use

Click "Export" to download CSS with all 10 palettes:

:root {
  /* Extracted Colors */
  --primary-1: oklch(0.5 0.2 270);
  --primary-2: oklch(0.6 0.15 330);
  
  /* Soft Pastels */
  --soft-1: oklch(0.85 0.08 270);
  
  /* Complementary */
  --inverted-1: oklch(0.5 0.2 90);
  
  /* ... all 10 palettes */
}

Technologies

• Vite - Fast build tool and dev server
• Culori - Professional color conversion library with OKLCH support
• Vanilla JS - No framework overhead, pure performance
• Canvas API - Image processing and color extraction

Why OKLCH?

OKLCH (Oklch color space) offers several advantages:

• ✅ Better perceptual uniformity than HSL
• ✅ More colors than sRGB (supports P3, Rec2020)
• ✅ No hue shift when changing chroma/lightness
• ✅ Native CSS support in modern browsers
• ✅ Predictable color transformations

Use Cases

• 🎨 Design Systems - Generate comprehensive color palettes
• 🖼️ Brand Guidelines - Extract colors from logo/images
• 🌐 Web Design - Get instant theme variations
• 📱 App Development - Create light/dark mode palettes
• 🎭 Accessibility - Test contrast with monochrome palette

License

MIT

Credits

Inspired by oklch-picker by Evil Martians