Brand color is one of those decisions that feels like it should take an afternoon and somehow takes six months. You pick a teal, you fall out of love with the teal, your designer cousin says the teal "looks like a dental clinic," you bring in a brand consultant, you end up with the same teal but $14,000 lighter. There is a faster way.
This is the framework we hand to founders who need a brand palette that works at every size, on dark mode, on a 16-pixel favicon, and on every social platform — without a six-figure agency and without endlessly second-guessing the choice. It assumes you are not a trained designer and you do not want to become one.
Pick one accent color. Get analogous, complementary, triadic, and monochromatic variants — all AAA contrast checked, exportable as CSS variables, Tailwind config, or JSON. Free, no signup.
Open the Color Palette Generator →Most startup branding articles tell you to pick "five colors that represent your brand." This is the wrong starting point. It produces palettes that feel like a Pantone swatch book exploded — five competing colors that all want to be the hero, with nothing in tension.
The 2026 approach is the opposite. Pick one accent color. Derive the rest. Your accent is the single color that appears on every CTA, every active state, every focus ring, every chart highlight, every link. It carries 90% of your brand recognition. The other four colors in your palette are functional supporting cast: a near-black background, a near-white text, a muted card surface, a border tone.
If you only get the accent right, the rest writes itself.
Open whatever color you are considering as your accent. Now drop it into a 16×16 favicon mockup. If you cannot see it cleanly against both white and black at that size, the color is wrong — full stop.
Why this matters: your favicon is the most-rendered piece of your brand. It is in every browser tab, every bookmark, every search result row, every iOS home screen. A muddy mid-tone color (sage, dusty pink, beige, warm gray) disappears at 16 pixels. A high-saturation, high-contrast color survives.
Quick filter: if a color falls in the saturation 30–60% range or the lightness 35–65% range, it will look fine on a marketing site and dead on a favicon. Push toward saturation 70%+ and either lightness above 55% (vivid) or lightness below 25% (deep). Skip the muddy middle.
Once you have a candidate, generate a full set of variants in the favicon generator and look at them in an actual browser tab. If the icon disappears, the color is wrong. Pick another.
Color contrast determines whether your buttons are readable. The W3C ships two thresholds:
| Level | Normal text | Large text (18pt+) | UI components |
|---|---|---|---|
| AA (legal min in EU) | 4.5:1 | 3:1 | 3:1 |
| AAA (best practice) | 7:1 | 4.5:1 | 4.5:1 |
Two practical rules. First, your accent color needs at least 4.5:1 contrast against your background to be usable as a link or focus ring. Second, white text on your accent needs at least 4.5:1 contrast for primary buttons. If either fails, you have to lighten or darken the accent until it passes.
This is a hard constraint, not a stylistic preference. Failing AA exposes you to ADA lawsuits in the US and EAA fines in the EU starting June 2025. Pretty palettes that fail contrast get rewritten the week before launch — better to filter for it on day one.
The trap of "design tokens" tutorials is they teach you to ship 80 named colors before you have a single customer. For a pre-traction startup, the entire system fits in five tokens:
:root {
--bg: #0a0a0f; /* near-black, 1-3% lightness */
--bg-card: #15151f; /* one tick lighter — surfaces */
--border: #2a2a3a; /* outlines, dividers */
--text: #f5f5fa; /* near-white, never pure #fff */
--text-dim: #a0a0b8; /* secondary text */
--accent: #a855f7; /* your one chosen color */
}That is 6 tokens and 100% of what a launch-week SaaS needs. Add semantic tokens (success, warning, danger) only when you actually render a toast, not preemptively. Most startup design systems are 90% premature optimization.
Note: never use pure #000 or pure #fff. They create eye strain on OLED screens and look brutally amateur. Push the background to 1–3% lightness and the text to 95–97% lightness — you get the same readability with none of the harshness.
If you only need one accent, you are done. If you need a second color (a chart line, a secondary CTA, a gradient pair), pick it using one of three classical rules and stick to it:
The mistake to avoid: mixing harmony rules. If your accent is analogous-purple-pink and you bolt on a complementary green for "the data viz," your palette starts feeling random. Pick one rule, generate the variants in the palette generator, and ship the whole set together.
In 2026, ~52% of users run dark mode by default at the OS level. If your brand colors only work on a white background, you are leaving half your users with a worse experience and a worse-looking product. The trick is to verify both modes the moment you choose the accent — not as a follow-up project six months later.
Two principles that survive contact with both modes:
#a855f7 on white might need to shift to #c084fc (lighter, slightly less saturated) on a near-black background to maintain perceived punch without burning the eye.oklch(60% 0.2 290) and shift just the lightness for dark mode without re-picking the hue.Before locking the palette in, drop it onto the four surfaces it has to survive in the real world:
If the palette survives all four, ship it. If it fails one, swap the failing color before you tattoo it onto every screen, every email, every ad, and every business card.
Once you have your six tokens, write them once into :root, into your Tailwind config, into your design library, and into your meta theme-color tag. Then do not touch them for a year. Founders waste enormous amounts of time tweaking the brand color in month three because "it doesn't quite feel right." It almost never does. The discomfort is not the color — it is the founder seeing the color too many times.
Brand recognition is built by repetition. If you change your accent every quarter, you have no brand. If you ship a defensible color and use it relentlessly for 12 months across every CTA, every pitch deck, every demo, every customer email — by month nine, that color is your brand, regardless of which color you originally picked.
If you only have five minutes and you need a palette right now, here is the compressed version:
:root.Five minutes. One accent. Six tokens. A defensible palette that survives every surface your startup ships on. The agency takes six months and charges $40,000 to do roughly the same thing — and they pick a teal too.
Pick a color, get a complete startup-ready set with WCAG contrast scores, exportable as CSS variables, Tailwind config, or JSON. Free, no signup.
Open the Color Palette Generator →