Free Accessible Color Palette Generator

Click Share URL to copy a link with your palette's colors encoded in it. Anyone who opens that link sees the exact same palette, no account needed.

Eight modes: Complementary, Analogous, Triadic, Tetrad, Square, Split-Complementary, Monochrome, and Random, each generating a palette from your base color (5 colors by default, 3 to 12 with the Colors menu). See the color theory guide for what each one looks like on the wheel and when to reach for it.

Yes. Type a hex code or a color name like teal or coral, or use the color picker above the mode buttons, to set your own base color, and every harmony mode will build from it instead of a random starting point. Click "Reset to random" at any time to go back to random generation.

Not directly from a URL, because browser security rules block a page from reading another site's content that way. But you can take a screenshot of the website and upload it to the Extract from Image tool above, which gets you the same result.

Yes. Export as CSS custom properties, SCSS variables, RGB or CMYK code lists, a PNG image of your swatches, or an SVG file, all generated instantly in your browser. The CMYK values are a standard on-screen approximation, not a print-profile conversion. Not sure which format to pick? See HEX vs RGB vs HSL vs CMYK. Building a light and dark theme? The light-dark() CSS generator turns two colors into one CSS declaration.

It compares two colors using the WCAG 2.2 relative luminance formula and reports whether the pairing clears the 4.5:1 (AA) or 7:1 (AAA) contrast ratio for text.

Yes, every feature on this page is free with no signup, including image extraction, the color blindness simulator, and all export formats.

Pick any harmony mode above and generate a palette instantly, or upload a photo you already like to the image extractor and pull colors straight from it. Both are free, with no account needed.

This isn't a downloadable app, but it works free in any browser, including on your phone, so there's nothing to install.

Five colors is a practical default for most projects, and it's what this generator starts with. If you need a different number, the Colors menu next to the base color lets you pick anywhere from 3 to 12. A common composition guideline is roughly 60% dominant color, 30% secondary, and 10% accent, which a five-swatch palette maps onto reasonably well. Read the full breakdown on choosing a color count for when fewer or more actually makes sense.

Start from one color that already represents your brand, generate a harmony from it, and check the pairing you plan to use for text against the contrast checker before finalizing it. For a deeper framework, see our guide to choosing brand colors.