Color Swatch Collector

A color palette is a curated set of colors used together in a design project. Whether you're designing a website, creating a brand identity, decorating a room, or working on digital art — a well-chosen palette ensures visual harmony and consistency. Using this Color Swatch Collector, you can experiment freely, save your favorite combinations, and export them for use in CSS, design software, or brand guidelines.

Most professional palettes contain 3 to 7 colors. A typical structure includes: 1 dominant color (primary brand color), 1-2 secondary colors, 2-3 accent colors, and 1-2 neutral tones (grays, off-whites, dark shades). For UI design, 5-6 colors are usually ideal. Our tool lets you collect as many swatches as you need and refine them down to a perfect set.

Color harmonies are scientifically-backed color relationships on the color wheel. Complementary colors sit opposite each other (e.g., blue & orange) for high contrast. Analogous colors sit next to each other (e.g., blue, teal, green) for a serene look. Triadic uses three evenly spaced colors for vibrant balance. Click any swatch in your palette to see its harmony suggestions — then click any harmony dot to add it to your collection.

Once you've built your palette, click the Export dropdown. You can copy all colors as a HEX list (one per line), as CSS custom properties (--color-1: #6C5CE7;), as a JSON array for developers, or as comma-separated values. Your palette is also automatically saved to your browser's local storage, so it persists even after closing the tab.

HEX (#6C5CE7) is the most common web format — a 6-digit hexadecimal code. RGB (108, 92, 231) represents Red, Green, and Blue values from 0-255. HSL (Hue, Saturation, Lightness) is more human-friendly: hue is the color angle (0-360°), saturation is intensity, and lightness is brightness. Our tool displays both HEX and RGB for each swatch, and uses HSL internally for generating harmonious color suggestions.

Yes! If you're using Chrome or Edge, click the Eyedropper button to activate the built-in color picker that lets you sample any color from your screen — even outside the browser window. This is perfect for matching colors from images, logos, or other design inspirations. The eyedropper uses the modern EyeDropper API.