Color palette generator

Build a five-color starting palette, preserve locked swatches and compare black or white text contrast. Copy individual hex values or the complete CSS variables.

Create a usable starting point

Choose a base color before generating a palette. The first unlocked swatch takes that value, while the remaining swatches vary hue, saturation and lightness around it. The result is a set of five editable starting colors for a slide, small website or illustration. It is a suggestion generated from color relationships, rather than an assessment of a brand or a prediction of audience response.

Keep the colors that already work

Use Lock below a swatch to preserve it during the next generation. The pressed state identifies a locked color. Lock a main brand color and generate alternatives for the remaining positions, or lock four colors while exploring the fifth. Changing the base control does not replace a locked first swatch. Unlock it before generating if the first position should follow the new base color.

Example: a presentation accent

Start with #2B59E8 as the base, generate a set and lock the blue swatch. Compare the remaining colors on the actual slide background. A saturated swatch can work as a small accent while a less saturated one may work better over a larger area. This is a design choice to inspect in context, and the tool does not label a palette as professionally approved.

Read the contrast numbers

Each swatch shows the contrast ratio for pure black and pure white text on that solid color. The calculation uses the sRGB relative luminance formula linked below. The figure applies to that one foreground and background pair. It does not evaluate text size, font weight, focus indicators, images, transparency, gradients or every pair within the palette. Check the final interface and its actual states separately.

Copy and preserve a result

Copy beside a swatch copies its six-digit hexadecimal color. Copy CSS variables copies all five values in their current order for use in a stylesheet. These are plain color values, so they do not include locked states or create a permanent share link. Copy useful results before refreshing or closing the page. Clipboard access can depend on browser permission; the displayed codes remain available for manual copying.

Questions and limits

Does a generated palette guarantee accessibility? No. Only the displayed solid-color text pairs are calculated, and an entire interface requires further checks. Will the same base always produce the same set? No; unlocked positions include random variation. Is this a print proof? No; hexadecimal screen colors are not a CMYK conversion, and printed output depends on the production process. Color selection and palette generation run in this browser without sending the entered base color to a palette service.

W3C WCAG 2.2 — Contrast