📷 Drop an image here or click to upload, extract dominant colors
This color palette generator is simple yet powerful. Here's a detailed guide:
Basic Operation: Enter a HEX color value in the "Base Color" field (e.g., #FF6B6B), or click the color picker to select a color directly. Choose a color scheme mode from the dropdown menu, then click "Generate" to see a 5-color palette. Each swatch shows its color value; click to copy to clipboard.
Lock Colors: Click any color swatch to lock it. Locked colors won't change when you click "Random" or switch modes. Click again to unlock. This is useful for fine-tuning—keep colors you like and randomize the rest until you find the perfect combination.
Image Color Extraction: Drag and drop an image onto the upload area, or click to select a file. The tool analyzes image pixels and extracts the most frequent dominant color, setting it as the current base color and generating a matching palette. All image processing happens locally in your browser.
Export: Choose CSS, Sass, or JSON format from the dropdown, then click "Export" to generate code. CSS exports CSS custom properties under :root, Sass exports $variables, and JSON exports a usable object. Click "Copy" to copy the export to clipboard.
Color palette generators are widely used in design and development. Here are typical scenarios:
Brand Color Design: When designing a brand visual identity system, you need a complete set of auxiliary and accent colors derived from the primary brand color. This tool supports 7 color scheme modes, covering everything from conservative to bold brand styles. Export as CSS variables for direct use in websites and apps.
UI Interface Coloring: In web or app interface design, you need to assign different colors for primary, secondary, text, background, etc. The Analogous mode generates harmonious UI color systems, while Complementary mode is great for emphasizing contrast on action buttons and important alerts. The lock feature lets you fine-tune each color.
Image Color Inspiration: See a beautiful photo and want to extract its color palette? Upload the image to automatically extract the dominant tone and generate multiple color schemes based on it. This is incredibly useful for designers who need to match colors to specific images or scenes.
Color Wheel and Theory: The color wheel arranges hues in a circle. Common versions include RYB (red-yellow-blue) and RGB (red-green-blue). This tool uses the HSL color model (Hue, Saturation, Lightness) because it aligns better with human color perception—adjust hue to change color, saturation for vividness, and lightness for brightness.
The 7 Color Scheme Modes Explained: Monochrome uses different shades of a single hue—safe but may lack variety. Complementary uses opposite colors on the wheel—strong contrast and visual impact. Triadic uses three evenly-spaced colors—rich and balanced. Split Complementary is a variation with slightly lower contrast but more harmony. Analogous uses adjacent colors—naturally soft transitions. Tetradic uses two complementary pairs—the most colorful. Square uses four colors at 90-degree intervals—balanced and diverse.
Accessibility Design: Colors must not only be beautiful but also accessible. According to WCAG standards, normal text needs at least 4.5:1 contrast ratio against its background, and large text needs 3:1. Pair this tool with the Color Contrast Checker to ensure your palettes meet accessibility requirements.
This tool uses Canvas to read image pixels and extracts dominant colors by frequency analysis. It works best for images with clear dominant colors or solid backgrounds. All processing happens locally in the browser—images are never uploaded to any server.
Monochrome uses different shades of a single hue. Complementary picks opposite colors. Triadic selects three evenly spaced colors. Split Complementary uses one color plus two adjacent to its complement. Analogous picks adjacent colors. Tetradic uses two complementary pairs. Square selects four colors at 90-degree intervals.
Copy the exported CSS variables to your project's :root selector, then reference them in styles using var(--color-primary). Sass variables can be used directly in .scss files with $color-primary.
Click a swatch's lock icon to lock that color. Locked colors won't change when you generate random palettes or switch modes, allowing you to keep colors you like while experimenting with others.
JPG, PNG, GIF, WebP, SVG, and BMP are all supported. Images are read via the browser's FileReader API and pixels are extracted via Canvas—all processing happens locally.
Color harmony depends on the base color choice. Some colors may produce harsh or dull combinations in certain modes. Try different base colors or switch to other modes. Analogous and Monochrome modes tend to produce safer results.
Yes, completely free. This is a pure frontend application—all computation happens in your browser, with no server dependency, so it will remain free forever.