Palletto: Extract Beautiful Color Palettes from Any Image

Try it now: languageseed.github.io/palletto

I'm excited to share Palletto, a powerful web app that transforms any image into 11 unique color palette variations using the modern OKLCH color space.

What Makes Palletto Special?

Palletto is a fork of the excellent oklch-picker by Evil Martians, enhanced with bulk image processing and an expanded palette generation system. Upload an image and instantly get 11 distinct color schemes ready to use in your design projects.

🎨 The 11 Palette Variations

Each image generates these unique 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

Key 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
• 🌈 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

Why OKLCH?

OKLCH (Oklch color space) offers several advantages over traditional color formats like HSL:

• ✅ 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

Perfect For

• 🎨 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

How It Works

Palletto uses smart color extraction:

1. Downscales images to ~150px for efficient processing
2. Extracts unique colors with quantization (reduces near-duplicates)
3. Clusters using k-means++ algorithm for optimal color grouping
4. Weights colors by frequency for accurate representation
5. Transforms into 11 variations by manipulating OKLCH components (Lightness, Chroma, Hue)

Export your palettes as CSS custom properties ready to drop into any project:

: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 11 palettes */
}

Tech Stack

Built with modern, performant 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

Get Started

Visit the live app at languageseed.github.io/palletto or run it locally:

# Clone the repository
git clone https://github.com/languageseed/palletto.git

# Install dependencies
npm install

# Start development server
npm run dev

🙏 Credits

Palletto is built on the excellent foundation of oklch-picker by Evil Martians. Huge thanks to the original creators for their vision of making OKLCH color manipulation accessible and beautiful.

🔗 Links

• Live App: languageseed.github.io/palletto
• Repository: github.com/languageseed/palletto
• Original OKLCH Picker: oklch.com
• Report Issues: github.com/languageseed/palletto/issues

---

Whether you're building a design system, extracting brand colors, or just exploring color theory, Palletto gives you the tools to work with colors in the most perceptually accurate way possible. Try it out and let me know what palettes you create! 🎨