Brand color palette
that ships with the build.
Pick a mood, get five colors with a built-in WCAG contrast check. Export to Tailwind, CSS variables, SCSS, or Figma Tokens in one click. No signup, no watermark, no upsell.
Ship faster, on brand.
A palette that works in light and dark mode without you tweaking 12 times.
:root {
--color-primary: #4c33ff;
--color-secondary: #f43e25;
--color-accent: #51fb66;
--color-light: #f2f1f9;
--color-dark: #151226;
}8 brand archetypes — calm, energetic, professional, playful, luxe, earthy, tech, sunset — bias the seed so the output matches your voice.
Every color is checked against your light, your dark, white, and black. AA, AAA, or fail — no separate tab.
Tailwind config, CSS variables, SCSS, and Figma Tokens JSON. One source of truth, four formats.
From the blog
A working method for choosing five brand colors fast — primary, secondary, accent, light, dark — that survive both light mode and dark mode without endless tweaks.
What 4.5:1, 3:1, and 7:1 actually mean for your brand colors — with worked examples for primary buttons, accent badges, and disabled text.
How to translate five brand colors into Tailwind's color system — including tints, shades, and the dark variant — without polluting the entire theme.
Who this is for
A working method for SaaS founders building a landing in a weekend — primary that converts, accent that screams 'free trial', dark variant that survives the dashboard.
You shipped the app. Now you have one weekend to give it a brand. Here is the fastest path through five colors and a working dark mode.
How to expand five base colors into a full token scale that works in CSS variables, Tailwind, SCSS, and Figma — without inventing each step by hand.
A staged approach to swapping a brand palette in a shipped product, from the first hex code to the last component, without a multi-week PR.
Questions builders ask
How does the brand color palette generator pick the secondary and accent colors?+
It reads the seed color in HSL space, then applies the color rule you pick (analogous, complementary, triadic, split complementary, or tetradic) and shifts the hue. Saturation and lightness are clamped into a UI-friendly range so the output works on real components, not just swatch grids.
What is the difference between primary, secondary, and accent in a brand palette?+
Primary is the color a user identifies you by, used on the main CTA and brand surfaces. Secondary is a supporting hue for less critical UI like tags or charts. Accent is a bold contrast color reserved for one or two emphasis points per screen, like a 'New' badge.
Which color rule should a SaaS landing page use?+
Triadic and split complementary work well for SaaS because they give one calm primary plus one loud accent without flooding the screen with high-saturation hues. Analogous is safest if the brand needs a calm, considered tone.
How does the WCAG contrast check work?+
Each output color is paired against four surfaces — your light, your dark, white, and black — and the relative luminance contrast ratio is computed. AA needs 4.5:1 for body text, 3:1 for large text and UI; AAA needs 7:1.
Can I export the palette to Tailwind CSS, SCSS, CSS variables, and Figma tokens?+
Yes. The export panel includes Tailwind config, SCSS variables, native CSS custom properties, and a Figma Tokens JSON file compatible with the Tokens Studio plugin.
Does this work for dark mode design systems?+
The palette includes a near-black 'dark' shade and a near-white 'light' shade derived from the seed hue, so you get a tinted dark background instead of pure black. Pair primary and accent with the dark surface and check the contrast table.
Is the generator free? Do I need to sign up?+
Free. No login, no email gate, no watermarks. Generate, copy, ship.
How do I share a palette with my team?+
Click 'Share palette'. The current seed, mood, and color rule are stored in the URL, so anyone who opens the link sees the exact same five colors.
What is a tetradic color scheme?+
Tetradic uses four colors arranged into two complementary pairs on the color wheel. It gives a rich, varied palette that needs a clear hierarchy — the generator weights one as primary and the rest as supporting tones.
Why do my generated colors look slightly different from the seed?+
Saturation and lightness are normalized into a range that reads well on real interfaces. A pure FF0000 red, for example, gets nudged to keep contrast usable on white surfaces while staying recognizably red.
Can I lock the seed and only randomize the supporting colors?+
Switch to a different mood after picking a seed. The mood biases the rule toward different hue spreads, so you get fresh variations without changing the primary identity color.
Does the tool work for non-Latin scripts?+
Color works the same regardless of script. The site UI is translated into Korean, Japanese, and Spanish, and all exports are language-agnostic — they are just hex codes.
Is monochrome a real brand option?+
Yes, when the brand voice is minimal or technical. Monochrome palettes here keep one hue, varying only saturation and lightness across primary, secondary, and accent.
How big can the contrast ratio go?+
21:1 is the maximum, achieved by pure black on pure white. Anything above 7:1 passes WCAG AAA.
What is the right number of brand colors?+
Five is the working sweet spot — primary, secondary, accent, light, dark. Going beyond invites accidental inconsistency. Need more shades? Generate tints and shades from these five at build time.
Color terms in 30 seconds
The signature hue that identifies a brand and drives main CTAs and navigation surfaces.
A supporting hue that complements the primary, used for less critical UI like tags, secondary buttons, and chart series.
A high-saturation contrast color used sparingly to emphasize one or two elements per screen.
The luminance ratio between two colors, used by the Web Content Accessibility Guidelines to measure legibility.
A palette built from a single hue, varying only saturation and lightness.
Three colors adjacent on the color wheel, typically within 30 degrees of each other.
Two hues directly opposite on the color wheel — for example blue and orange, red and green.
Three colors evenly spaced 120 degrees apart on the color wheel.
A base color plus the two colors adjacent to its complement.
Compared with other tools
Coolors is the granddaddy of palette generators. Where it shines, where it stops, and what Brand Palette Forge does differently for product teams.
Paletton is the classic color theory tool with the rotating wheel. Where it is unbeatable for theory and where it falls short for shipping.
Tailwind's official tools focus on shade scales for one color at a time. Forge solves the larger problem: a five-role brand palette that becomes the input to those shade scales.