Color Palette Generator

Color Palette Generator Canvas API

Colors to extract:

8

Re-extract Download PNG New Image

Hover to pick any pixel color

#000000

Click on the image to add that color to your palette

Palette strip

Dominant Colors Click a swatch to see details

Color Detail Click any swatch in the palette tab to inspect

Select a color from the Palette tab to inspect its details here.

CSS Variables SCSS JSON JS Array Tailwind SVG

Copy

What is a Color Palette?

A color palette is a curated set of colors used consistently across a design. In web design and UI/UX, palettes establish visual identity, brand recognition, and aesthetic harmony. A well-chosen palette typically includes a primary brand color, secondary accent colors, neutral backgrounds, and semantic colors (success green, error red).

How Color Extraction Works

This tool uses the HTML5 Canvas API to read every pixel of your uploaded image directly in the browser — no server upload required. It then applies a median cut quantization algorithm to group similar colors and identify the dominant hues. The result is a palette of the most representative colors in the image, sorted by frequency (how many pixels belong to each color group).

Color Format Reference

• HEX: 6-digit hexadecimal format (e.g. #6F42C1). Most common in web CSS.
• RGB: Red, Green, Blue channels 0–255 (e.g. rgb(111, 66, 193)). Used in CSS and image editors.
• HSL: Hue (0–360°), Saturation (0–100%), Lightness (0–100%). More intuitive for design adjustments.
• HSV/HSB: Hue, Saturation, Value/Brightness. Used in design tools like Figma and Photoshop color pickers.

Color Harmony Types

• Complementary: Colors opposite on the color wheel. High contrast, vibrant.
• Analogous: Colors adjacent on the wheel. Harmonious and pleasing.
• Triadic: Three colors equally spaced (120° apart). Balanced and versatile.
• Split-complementary: A base color plus two colors adjacent to its complement.
• Tetradic: Four colors forming a rectangle on the wheel. Rich and complex.