All tools

Color Palette Generator

site-preview.com
Build Big Ideas

Combine your favourite colors and see how they behave in a real web interface.

Tag
Web interface

Preview the components.

Recommended palettes

Contrast check (WCAG)

Sample text for checking readability in real time.

How to choose the perfect color palette for your website

Choosing a color combination is one of the most important steps in building a digital interface. Colors aren't just decorative: they guide the user through the layout, define the visual hierarchy and express the brand's identity. This online color palette generator lets you find harmonious, ready-to-use combinations in a few clicks.

To build a solid, balanced design system, it's worth following the 60-30-10 rule: 60% of the space goes to a dominant color (usually neutral, or the background), 30% to a secondary shade (giving structure and contrast) and 10% to an accent color, ideal for drawing attention to call-to-action buttons or interactive elements.

With this tool you can test the accessibility of your combinations in real time against the WCAG 2.1 guidelines, making sure the contrast ratio between background and text (AA or AAA) is high enough for comfortable reading by everyone, including users with visual impairments. You can export your palette straight to CSS variables to paste into your stylesheet, speeding up the jump from prototyping to actual development.

Quick FAQ about the color palette generator

How does automatic generation work?

You can generate a new color combination by clicking the Generate new button or pressing the Space bar. The tool picks harmonious shades based on the style you've set (analogous, complementary or pastel colors, for instance).

How do I lock a color I like?

Hover over one of the colored blocks in the palette and click the padlock button. Once locked, that color stays put and won't change on subsequent generations, letting you hunt for the ideal surrounding colors.

How do I edit or enter a color manually?

Every color card has an adjust button (the controls/palette icon) that opens your operating system's native color picker. You can also click the HEX code under the card to copy it to the clipboard.

Other web design tools

If you want to round out how you manage your brand's colors, try the Palette Extractor from Images to pull colors out of a photo, or the CSS Gradient Generator to build ready-to-use gradient transitions.