Brand palette generator
Start with one brand colour and get a full scale of tints and shades, with contrast checked on every step. Export it as CSS variables, Tailwind or JSON, or add the colours to Divi's global palette.
Brand colour
Use a 3 or 6 digit hex code, e.g. #6c47ff.
Used in the exported variable names, e.g. --brand-500.
Rotates the hue slightly as shades get darker, which often looks richer than a flat scale.
Colour harmonies
Accent ideas based on your base colour. Click one to build a palette from it.
Your palette
Click a swatch to copy itSuggested roles for Divi
A quick preview of the suggested roles working together on a card.
Get startedExport
Adding the palette to Divi
Open any module's colour picker, click + in the global colours row and paste each hex code. Global colours update everywhere they're used, so changing the brand later is one edit. For the CSS variables, paste them into Divi → Theme Options → Custom CSS and use var(--brand-500) in any CSS field.
What do the numbers mean?
The scale runs from 50 (almost white) to 950 (almost black). Your own colour sits on the step that matches its lightness, and the rest are spread evenly around it. This is the same naming Tailwind and most design systems use, so developers will recognise it straight away.
Which steps should I use?
Light steps (50 to 200) suit section backgrounds and borders. The middle steps work for buttons and links. Dark steps (700 to 950) are good for headings and text. Check the dot on each swatch to see which text colour stays readable on it.