Color palette generator

This tool's live preview panel is a dynamic testing environment, not just a static image. You can directly manipulate its elements to refine your palette with two core interactions:

• Drag-and-Drop Swapping: Click and hold any swatch in the main palette, drag it over the live preview, and drop it directly onto a UI element like a button, the text, or the background. The tool will intelligently swap the dropped color's position in the palette with the color of the target element, allowing you to instantly reassign roles.
• Click-to-Edit: To modify a color directly from the preview, simply click on any element (e.g., the primary button or the paragraph text). This action automatically selects its corresponding color swatch in the main palette and opens the "Edit" panel, ready for you to adjust its properties.

You can extract a theme directly from any visual source using the image analysis function. The number of colors it extracts is determined by the "Color Count" selector in the header. To begin, click the "From Image" button to open the extractor, which supports three input methods:

1. Drag and Drop: Drag an image file from your computer directly onto the designated drop zone.
2. File Upload: Click the drop zone to open your system's file browser and select an image.
3. Clipboard Paste: Copy an image to your clipboard (e.g., from a screenshot or another application) and use Ctrl+V or Cmd+V to paste it while the extractor is open.

The tool's built-in algorithm will process the image on the client-side—no data is uploaded—and generate a palette based on its dominant colors.

This tool is optimized for creating and expanding brand guidelines. To build a brand color palette generator workflow, follow these steps:

• Lock Your Core Colors: Start with your primary brand color. Hover over its swatch and click the lock icon (🔓). Locked colors are preserved when you generate new themes, ensuring brand consistency.
• Explore Harmonies: With your core color locked, use the "Generate" button or select different harmony types (e.g., Triadic, Complementary) to discover supporting colors that work with your brand identity.
• Generate Monochromatic Scales: Select any color to open the editor. The panel automatically displays a full range of 10 tints (mixed with white) and 10 shades (mixed with black). Click any of these variations to apply it directly to your main palette—perfect for creating hover states, borders, or subtle background variations.

To ensure your design is inclusive and readable, navigate to the "Accessibility" tab. This panel functions as a built-in color palette accessibility checker, providing a full matrix of every foreground and background color combination from your current palette.

Each pair is evaluated against WCAG 2.1 standards, displaying its precise contrast ratio. A green "pass" indicates the combination meets or exceeds the 4.5:1 ratio required for normal text, while a red "fail" signals that it is not sufficiently readable. This allows you to identify and fix potential accessibility issues before exporting your colors.

The "Presets" tab contains a library of curated, aesthetic color palettes designed to serve as high-quality starting points. This feature is ideal for overcoming creative blocks or for rapid prototyping.

Simply click on any preset, such as "Sunset Glow" or "Vintage Modern," to instantly load its colors into the main palette. You can browse through the options without leaving the tab to quickly compare different visual styles. Once you find a preset you like, you can treat it as a new starting point—switch to the "Edit" tab to begin customizing it, lock colors, or generate tints and shades to make it uniquely yours.