Advanced Color Palette Generator

How it works

This generator uses advanced algorithms to find the most visually distinct colors within your specified range. For HSL, it considers the cylindrical nature of the hue wheel and optimizes for perceptual distance. For OKLCH, it uses the perceptually uniform color space for even better visual distinction.

Why use OKLCH for Color Palettes?

Standard color pickers often struggle with consistency. "Yellow" at 50% lightness looks much brighter than "Blue" at 50% lightness. OKLCH (Oklab) is a modern color space designed to fix this. It ensures that colors with the same "Lightness" value actually look equally bright to the human eye. This makes it the superior choice for generating accessible and harmonious UI color schemes.

Supported Color Schemes

• Pastel Palettes: High brightness, low saturation. Perfect for backgrounds and gentle UIs.
• Neon & Vibrant: High saturation, specific brightness. Ideal for dark mode accents and cyberpunk themes.
• Vintage & Retro: Desaturated ease with warmer hues. Great for nostalgic branding.
• Nature Inspired: Earth, Ocean, and Forest themes derived from organic hue ranges.

Interactive Fine-Tuning

Every generated color is fully customizable. Click on any swatch to open the advanced color picker, where you can adjust hue, chroma, and lightness with precision. Whether you need to ensure WCAG contrast compliance or just want a slightly warmer tone, you have complete control over every individual color in your palette.

How Sequential Gradients Work

Create smooth color transitions by setting start and end colors, then optionally adding intermediate stops. The generator interpolates colors in OKLCH space for perceptually uniform gradients - meaning each step looks equally spaced to your eyes.

Tips

• Multi-stop gradients: Add intermediate colors for complex transitions like rainbow effects.
• Hue path: Control which direction around the color wheel the gradient travels.
• CSS export: Get a ready-to-use CSS linear-gradient with all your stops.

Manual Override

Need to tweak a specific step in your gradient? Click any color swatch to manually adjust it. This is perfect for correcting perceptually uneven transitions or adding a custom touch to an otherwise mathematical progression.

How Color Extraction Works

Upload any image and this tool will identify the most dominant colors using k-means clustering. The algorithm groups similar pixels together and finds representative colors that best capture your image's palette.

Color Harmony

Click anywhere on the image to select an "anchor" color. The palette will regenerate with colors that harmonize with your selection based on color theory principles:

• Complementary: Colors opposite on the wheel (bold contrast)
• Triadic: Three colors equally spaced (balanced)
• Analogous: Neighboring colors (subtle, cohesive)

Tips

• Click to refine: Select any color as an anchor - the rest of the palette will be regenerated to harmonize with it.
• Adjust count: Use the slider to extract more or fewer colors from your image.
• Filter extremes: Toggle the white/black filters to focus on mid-tone colors.

Refine Extracted Colors

Automated extraction is just the starting point. Click any extracted swatch to fine-tune it. Adjust the saturation to make a background color pop, or shift the lightness to create better text contrast, all while maintaining the harmony derived from your original image.