Colour Palette Generator

How the Colour Palette Generator works

Colour palette generator: from one colour to a full set

A brand usually arrives as a single hex code, and the first job of building the interface is turning that one colour into a dozen that work together. Doing it by eye produces palettes where the grey is a different temperature from the blue, the hover state is barely different from the resting state, and dark mode is an afterthought. This generator derives every role from the brand hue with fixed rules, so the result is consistent and can be regenerated when the brand colour changes.

How the roles are derived. Primary is the brand colour, nudged by the mood. Primary hover is the same hue a step darker in light mode and a step lighter in dark mode, which is the direction that reads as "pressed" on each background. Primary soft is a very pale or very deep tint of the hue for secondary buttons, selected rows and badges. Secondary sits halfway to the accent with less saturation, so it supports rather than competes. Accent is the brand hue rotated by the harmony you choose — complementary for maximum contrast, split complementary for a softer opposite, analogous for a calm neighbour, triadic for a bold third.

Neutrals carry the hue. Background, surface, border and text are not pure greys: they carry a small amount of the brand hue, which is what makes a palette feel designed rather than assembled. In light mode the background is nearly white and surfaces are white; in dark mode the background is nearly black and surfaces step up from it, so cards lift off the page in both.

Status colours. Success, warning and danger use fixed green, amber and red hues at a lightness tuned for the theme, since users expect these to look the same across every product and a brand-tinted red is easy to mistake for an accent.

Moods. Vibrant raises saturation, Muted lowers it, Pastel lifts lightness and softens, Deep darkens and enriches. They apply to the coloured roles and leave the neutrals alone.

The output. Light and dark gives a :root block and a prefers-color-scheme: dark override, so switching is automatic. Rename the properties to match your system; the values are plain hex so they work in any browser and any build tool.

Related tools