Pick a base color, select a harmony mode, and generate a complete palette. Extract colors from images, check accessibility contrast ratios, and export to CSS, SCSS, Tailwind, or JSON. Everything runs locally in your browser.
Last updated: March 2026 | Free to use, no signup required
Drop an image here or click to browse (JPG, PNG, WebP)
A color palette is a defined set of colors used together across a design system, website, or application. Rather than selecting colors ad hoc, designers and developers establish a palette upfront to ensure visual consistency. A typical web palette includes a primary color, one or two accent colors, a range of neutrals, and semantic colors for states like success, warning, and error.
The relationship between the colors in a palette matters more than any single color on its own. Colors that share a logical connection through hue, saturation, or lightness tend to look cohesive when placed side by side. This is where color harmony theory comes in. A palette built on harmonic relationships feels intentional, while a random assortment of colors often looks disjointed regardless of how attractive each color is individually.
Digital palettes are typically expressed as hex codes, RGB values, or HSL values. Each format serves a different purpose. Hex is the standard in CSS. RGB maps to how screens physically render color. HSL describes color in terms humans can reason about: hue is the color wheel position, saturation is the intensity, and lightness is how bright or dark the color appears.
Color harmony refers to combinations of colors that are visually balanced according to their positions on the color wheel. The six harmony modes in this tool each produce a different character.
Start with a single brand color or a color that reflects the tone of the project. A SaaS product might anchor on a professional blue. A food brand might start with a warm red or orange. Use that base color to generate a harmonic palette, then adjust saturation and lightness to create hierarchy. Primary actions get the most saturated color. Secondary elements use muted or lighter variants. Backgrounds and surfaces use near-neutral tones.
A practical web palette needs more than just the accent colors. Plan for at least four layers: background, surface (cards and panels), text, and interactive elements. Each layer should have enough contrast against its neighbors to remain readable. This tool's built-in contrast checker helps verify those relationships against WCAG standards before you commit to a palette.
Test your palette at scale before finalizing. A color that looks good in a small swatch can overwhelm a full-page layout. Apply the palette to actual UI components, including buttons, form fields, navigation, and data tables, to see how it holds up in context.
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background colors. Normal text requires a ratio of at least 4.5:1 for AA compliance and 7:1 for AAA. Large text (18px bold or 24px regular) needs 3:1 for AA and 4.5:1 for AAA. These thresholds exist because low-contrast text is difficult or impossible to read for people with low vision or color vision deficiencies.
Contrast ratio is calculated using the relative luminance of two colors. The formula compares the lighter and darker values on a scale from 0 (black) to 1 (white). The contrast checker in this tool runs that calculation for every pair of colors in your palette and displays the ratio alongside AA and AAA pass/fail indicators. This lets you identify problem pairs before writing any code.
Beyond contrast, consider how your palette performs under color blindness simulations. About 8% of men and 0.5% of women have some form of color vision deficiency. Avoid relying on color alone to convey meaning. Pair color indicators with icons, labels, or patterns so that information remains accessible regardless of how a user perceives hue.
Once you have a palette you are satisfied with, the next step is translating it into code. This tool supports five export formats. CSS custom properties (also known as CSS variables) work in any modern stylesheet. SCSS variables are useful if your build pipeline uses Sass. Tailwind config output gives you a ready-to-paste colors object for your tailwind.config.js file. JSON is a portable format for design tokens that can feed into tools like Style Dictionary or Figma plugins. Plain text is a simple list of hex codes for quick reference.
Name your colors semantically rather than by their literal hue. A variable called --color-primary is more maintainable than --purple-600 because it decouples the intent from the specific value. If the brand color changes from purple to blue next quarter, you only need to update the value, not every reference. This tool generates names like color-1 through color-5, which you can rename to match your project's naming conventions after export.
Most web design systems use between 5 and 8 core colors. This typically breaks down into 1-2 brand/accent colors, 2-3 neutral shades for backgrounds and text, and 2-3 semantic colors for success, warning, and error states. Each core color usually has a range of lighter and darker variants (sometimes called a color scale), which can bring the total number of individual values to 30 or more in a mature design system. The palette generated by this tool gives you the core harmonic colors, which you can then extend into full scales as needed.
A complementary scheme uses two colors that sit directly opposite each other on the color wheel, creating maximum contrast. A split-complementary scheme starts with one base color but instead of using its direct opposite, it uses the two colors adjacent to the opposite. This reduces the visual tension while still providing clear contrast. Split-complementary palettes are often easier to work with in practice because the softer contrast is more forgiving across different UI elements.
Yes. Upload any image using the extraction section below the palette generator. The tool samples pixels across the image and clusters them to identify the 5 most dominant colors. This is useful for deriving a palette from photography, artwork, or any visual reference. The extracted colors can then be used as starting points for further refinement with the harmony modes and saturation/lightness sliders.
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for large text (18px bold or 24px regular). Level AAA, which is a stricter standard, requires 7:1 for normal text and 4.5:1 for large text. The contrast checker in this tool calculates the ratio for every color pair in your palette and shows whether each pair passes AA and AAA thresholds. Most projects aim for at least AA compliance.
The Tailwind export generates a JavaScript object that fits inside the colors key of your tailwind.config.js file. Copy the output, open your config, and paste it into theme.extend.colors (to add alongside defaults) or theme.colors (to replace defaults). After saving, you can use the new colors as utility classes like bg-palette-1, text-palette-2, and border-palette-3. Run your build process to regenerate the CSS with the new values.
No. All image processing happens locally in your browser using the HTML Canvas API. The image is drawn onto a canvas element, and pixel data is read directly from that canvas using JavaScript. Nothing is uploaded, transmitted, or stored on any server. The same applies to the palette generation, export, and history features. Everything runs client-side and your data stays on your device.