Brand colour palette generator
Pick a brand hue, choose a colour harmony and a mood, and get a five-colour palette with contrast checks and ready-to-paste CSS.
A headline in your ink colour
Body text sits on the surface colour. Links use the primary when contrast allows.
:root {
--brand-primary: #cf5604;
--brand-secondary: #bf8103;
--brand-accent: #fe6f81;
--brand-ink: #2b1b13;
--brand-surface: #fdf3ef;
}How colour harmonies work
A colour wheel arranges hues in a circle, and harmonies are simply fixed angles on it. Toggle the harmony above and watch the markers move: analogous colours sit within 30° of the brand hue, a complementary colour sits directly opposite at 180°, and a triad splits the circle into three 120° slices.
Angles alone do not make a palette work. Lightness does most of the heavy lifting: text needs strong lightness contrast against its background, which is why every palette here includes a very dark ink and a very light surface, and why each swatch reports its WCAG contrast ratio.
Colour associations to use with care
Blue is widely read as trustworthy and is common in finance and tech; green suggests growth, health or sustainability; orange and red feel energetic and urgent; purple leans premium or creative. These associations are cultural, not universal, so check them against your audience and your competitors. Standing apart from the category colour is often worth more than matching it.
Frequently asked questions
How many colours should a brand palette have?
Most brands work with one primary colour, one or two supporting colours, an accent for calls to action, and a dark ink and light surface for text and backgrounds. That is the five-swatch structure this generator produces.
What is the 60-30-10 rule?
An interior-design rule of thumb that transfers well to brands: about 60% of a layout in a neutral or dominant colour, 30% in a secondary colour and 10% in an accent. The accent is what draws the eye, so save it for buttons and key actions.
What contrast ratio do I need for text?
The Web Content Accessibility Guidelines (WCAG 2.2) require at least 4.5:1 for normal body text and 3:1 for large text (about 24px, or 19px bold) at level AA. Every swatch here shows its contrast against white or near-black text.
Why does the generator use OKLCH?
OKLCH is a perceptually uniform colour space: equal steps in lightness look equally different to the eye, which HSL does not guarantee. That makes it easier to build palettes where the colours feel balanced. The output is converted to standard hex codes.
Can I get a palette from my business name?
Yes. Type your name and press "From my name": the hue is derived from the letters, so the same name always gives the same starting palette. Then adjust harmony and mood.