Color Palette Generator

Upload a logo or photo and the tool samples pixels from the image on an HTML canvas, skipping pixels that are mostly transparent or close to pure white or black so backgrounds don't dominate the result. It groups similar shades together by rounding each RGB channel into buckets, counts how often each bucket appears, and returns the five most common colors as your extracted palette. Use those colors directly as your Primary, Secondary, and Tertiary colors.

These describe how colors relate to each other by hue angle on the color wheel, where HSL’s hue value runs from 0–360°. Complementary colors sit exactly opposite each other (180° apart) for maximum contrast. For a calm, cohesive look, analogous colors sit close together, about 30° apart. Triadic spaces three hues evenly, 120° apart, for a balanced yet vibrant palette. Split-complementary softens that contrast further: it pairs a base color with the two hues flanking its complement (150° and 210° away), giving strong contrast without the tension of a pure complementary scheme. This generator’s Random and Manual modes use this exact hue math to suggest secondary and tertiary colors.

There’s no fixed rule, but most effective brand and UI palettes work well with 1–3 core colors: a primary, an optional secondary, and an optional tertiary accent, plus light and dark surface tones for backgrounds. That’s why this tool lets you generate a 1, 2, or 3-color palette and automatically pairs it with matching light/dark surfaces. Stacking more than 3–4 saturated colors together tends to make a design feel busy and weakens brand recognition.

HEX (like #3B82F6) and RGB (59, 130, 246) encode the exact same red/green/blue channel values, just written in base-16 versus base-10. HEX is more compact for CSS, while RGB (or RGBA) is what you need when you also want to control transparency. HSL describes the same color using hue (its 0–360° position on the color wheel), saturation, and lightness percentages, which makes it the easiest format for hand-tuning a color, such as lowering lightness to build a hover state or a darker shade without shifting the hue. Every color in this generator shows all three formats so you can copy whichever one your project needs.

Check the contrast ratio between your text color and its background against the WCAG 2.1 thresholds: 4.5:1 for normal text and 3:1 for large text (18pt/24px and above, or 14pt/18.66px and above when bold) to meet the AA level, or 7:1 and 4.5:1 respectively for the stricter AAA level. Contrast isn’t the whole story, either. Two colors can pass a contrast check and still be hard to tell apart for colorblind users if they only differ in hue, not lightness. Pair this generator with our Color Contrast Checker tool to test your exact text and background combinations before shipping.

Use the Export panel once you’ve generated a palette. The CSS option outputs ready-to-use custom properties (--color-primary, --color-secondary, and so on), the Tailwind option outputs a theme.extend.colors config with full 50–900 shade scales for your primary and secondary colors, and the JSON option outputs the raw palette data (hex, RGB, and HSL values) for feeding into design tools or a custom design-token pipeline. Toggle "Include shade variations" in the CSS export to get the same 50–900 tint-and-shade scale used in the Tailwind output.

It’s rule-based, not AI-generated. Random mode picks a starting hue and applies real color-theory formulas (complementary, analogous, triadic, split-complementary, or monochromatic) to derive the rest of the palette, and Manual mode uses the same hue math to suggest a matching secondary and tertiary color as you pick your own. That means every result is deterministic and explainable: each suggested color traces back to a specific hue rotation from your base color rather than a black-box model.