Build a palette that works beyond the swatches.
A practical guide to choosing color roles, extracting image palettes and exporting usable design tokens.
Begin with a job for every color
A useful palette is more than five colors that look good together. Start with roles: a surface for the page, a readable text color, a primary action, a secondary surface and a small accent. Five colors are often enough for a starting point. Add more only when the interface has another clear need.
Choose a preset or press Generate to explore. Balanced mixes changes in hue and lightness; Analogous keeps nearby hues; Complementary introduces opposing hues; Triadic uses three directions on the hue circle; Monochrome varies lightness within one hue family. These rules are starting points, not guarantees that every combination is accessible or aesthetically ideal.
Lock the decision you have already made
If you have a brand color, click a swatch code and enter its HEX, RGB or HSL value. Lock that swatch before generating again. Locked colors remain unchanged. The generator uses the first locked color as a hue reference. If you lock several colors, their relationship is preserved even when they do not follow the chosen harmony.
Change the number of colors from two to eight. Undo and Redo let you compare previous versions within the current tab. Lock states and order are included in that history. Reversing a palette changes the order without changing the values.
Use images as inspiration, then refine
Choose a JPG, PNG or WebP, or drag it into Image colors. Processing happens on your device. The tool accepts files up to 15 MB and 32 megapixels; large images are reduced to a preview of at most four million pixels. For clustering, it samples a thumbnail no larger than 160 by 160 pixels and groups similar colors. Transparent pixels with low opacity are excluded from clustering.
The resulting colors describe the sampled preview rather than the original camera data. Color profiles, browser decoding, resizing and transparency can affect values. Clicking the preview samples that displayed pixel, composited over white when transparent. Use the list of extracted swatches for keyboard access. A completely transparent image has no extractable colors; a solid image may yield just one.
Check a real layout, not only a row of squares
The live preview maps your palette onto a small interface. It chooses readable black or white text for the example, but this is not a full audit of every pair in the palette. Switch between light and dark arrangements to see whether your main colors still support the intended hierarchy.
Next open Contrast. Test the exact text and background pair you plan to use. A brand accent may work well on a large decorative shape while failing as small body text. Keep the brand color for large areas and choose a separate darker shade for text or links.
Export deliberately
CSS exports named custom properties. JSON exports each HEX value and its OKLCH representation. SVG and PNG create a labeled palette image, while HEX gives a plain list. These files are created in the browser and downloaded only when you choose Download.
Copy link encodes the palette in the part of the URL after #. Anyone who receives the full link can read those color values. The site does not create a database record. Images, undo history and lock states are not included in the link. Download or copy your palette before closing the tab, because work is not saved automatically.