Colour palette generator and image colour picker.

Building a palette that works

A practical website palette usually needs fewer colours than people expect: one main brand colour for buttons and links, one accent for highlights, a dark colour for text, a light background, and a few greys. Too many strong colours compete with each other and with your calls to action.

• Complementary: the opposite colour on the wheel. Strong contrast; good for one accent.
• Analogous: neighbours on the wheel. Calm and cohesive.
• Triadic: three evenly spaced colours. Lively; use one as the main colour and the others sparingly.
• Shades and tints: darker and lighter versions of one colour, for hover states, backgrounds and borders.

Getting colours from a logo or photo

Image mode groups similar pixels together and shows the most common colours, which is a quick way to find a logo's exact brand colours or build a palette that matches your photography. For a precise match, click the exact spot on the image. Everything happens in your browser; your image isn't uploaded.

Check it's readable

Pretty colours aren't enough: text has to be readable on them. Each swatch shows whether white or black text passes the WCAG AA contrast level, and the colour contrast checker tests any pair and suggests a passing shade. For gradients built from your palette, try the CSS gradient generator.