Color palettes

Turning a palette into an interface

A palette is a starting point, not a finished design system. Pick one colour to carry the brand, one neutral for text and surfaces, and keep the rest for accents and states. Every palette here exports as CSS custom properties or a Tailwind config, so the jump from swatches to code is a copy and paste.

The 60-30-10 rule

A reliable split is roughly 60% of the screen in a dominant neutral, 30% in a secondary colour, and 10% in an accent reserved for the things you want people to click. Interfaces fail more often from using an accent everywhere than from choosing the wrong hue.

How many colors should a palette have?

For an interface, three to five base colours is usually right: one brand colour, one or two neutrals, and an accent — plus semantic colours for success, warning and error. Anything more tends to be a ramp of the same colours rather than genuinely new ones.

How do I know a palette is accessible?

A palette on its own cannot be accessible or not — what matters is each pairing you actually use. Check every text-on-background combination against WCAG: 4.5:1 for body text and 3:1 for large text and UI elements. Open any swatch to see its contrast, or run the pair through the contrast checker.

Can I use these palettes commercially?

Yes, freely and without attribution. Colour values are not protected by copyright, so these can go into client and commercial work as they are.

How do I get a palette into my code?

Each palette page gives you ready CSS custom properties and a Tailwind theme extension. Paste the variables into your global stylesheet, or drop the Tailwind snippet into your config, and the colours become named tokens across the project.