Picking your startup's brand colors feels like the kind of decision you should be able to make in twenty minutes over coffee. Then you actually try, and four hours later you have nineteen Figma tabs open, three browser tabs about color psychology from 2014, and the creeping suspicion that the indigo you thought was perfect looks exactly like Stripe, Linear, and the last six SaaS landing pages you scrolled past.
This guide is the version I wish someone had handed me before my first pitch deck. It is short on poetry and long on rules that survive contact with engineering, ads, and a designer who joins six months later. By the end you will have a five-color system that holds up in product, on a billboard, and in dark mode — and you'll have done it without arguing about whether cobalt feels different from azure.
A founder's brand palette has exactly three jobs. Forget the rest.
Most of the bad startup branding I see fails on job two or three. The accent color looks gorgeous in the Figma frame and unusable when product engineering tries to ship a state-management dashboard with it. Pick colors with the messiest screen in your future product in mind, not the homepage hero.
Don't try to design a five-color palette in one sitting. Pick the hero color — the one your CTA buttons live in, the one that becomes the background of the favicon — and let the rest of the palette derive from it.
For most early-stage software startups, the hero color falls into one of four temperaments. Choose by the feeling you want users to associate with your product, not by the color you personally like:
| Temperament | Hue range | Reads as | Used by |
|---|---|---|---|
| Trust / serious | Blue 210–240° | Bank-grade, calm, default-safe | Stripe, Plaid, Notion, Linear |
| Energy / playful | Orange / pink 0–30°, 320–340° | Consumer, social, exciting | HubSpot, Substack, Cash App |
| Creative / smart | Purple / magenta 270–310° | AI, design tools, generative | Figma, Anthropic, Discord |
| Growth / fresh | Green / teal 140–180° | Health, finance-positive, eco | Robinhood, Whoop, Spotify |
If your competitors all sit in one column, you have a real choice: blend in to look credible, or jump to a neighboring column to look different. Both work. What does not work is staring at the wheel hoping the right answer reveals itself. Pick a temperament in five minutes and move on.
Once you have the temperament, pin a single hex code. Pure web-safe primaries (#0000FF, #FF0000) are noisy and date themselves to 1999. Pull the saturation down 5–15% and shift the hue 5–10° off the primary. Examples that age well: #4F46E5 (indigo), #10B981 (emerald), #F97316 (warm orange), #A855F7 (violet).
The 60-30-10 rule is the oldest interior-design heuristic still worth knowing. Sixty percent of any composition is a dominant neutral. Thirty percent is a secondary tone. Ten percent is the accent that grabs the eye. It works for living rooms, websites, and pitch decks for the same reason: the eye gets bored when one color hogs the canvas and overstimulated when three colors fight for attention.
Translated to a startup palette:
#000 and #FFF are too harsh; nudge them. #0A0A0F for dark, #FAFAFC for light.The most common mistake I see early-stage teams make: treating their hero color as the dominant 60%. The result is a landing page that screams from every pixel and a product that gives users no signal where to look. Restraint compounds.
One hex code is not a palette. You need 9–12 shades of each working color so engineering can build hover states, borders, backgrounds, and disabled variants. The industry standard is the Tailwind-style 50/100/200/.../900/950 ramp.
You do not need to hand-roll this. Pick the hero color, drop it into a generator that outputs an analogous, complementary, and triadic set of palettes, and copy the ramp. The two minutes you save here is two minutes; the two weeks you save by having every shade pre-named (--accent-500 not "the medium purple") is the actual gift.
Drop in your hero color, get analogous, complementary, triadic, and monochromatic palettes with full 50–950 shade ramps. Export as CSS variables, Tailwind config, or JSON. No signup, no watermark, no email.
Open the Color Palette Generator →Most palettes look great on a Dribbble shot and fall apart in real product. Before you commit, run yours against five contexts that find the cracks fast:
If the palette wobbles in any of those, fix it now. Rebrands six months in cost three weeks of engineering time and the goodwill of every customer who has to relearn where the "save" button is.
WCAG 2.2 contrast is the floor. AA requires 4.5:1 for body text and 3:1 for large text and UI components. AAA — the higher bar — requires 7:1 and 4.5:1. Pick AA as the absolute minimum and aim for AAA on body copy. The cost is nothing. The benefit is your product staying usable for the 8% of men with red-green color deficiency, the 4% of users on poor displays, and every regulator who's started enforcing the European Accessibility Act this year.
Two pitfalls catch almost every early-stage team:
#A0A0A0 on #FFFFFF is 2.5:1 — fails AA. It looks elegant in the comp and unreadable on a real screen. Push to #6B7280 or darker.Run every text/background pair through a contrast checker before locking. If you only check the homepage hero, you'll miss the form labels that quietly lock half your users out.
The palette only exists once it's named and committed. Two engineers using "the medium purple" mean two different colors. The ten minutes you spend on naming is what stops a year of inconsistency.
The minimum viable design-token file:
--color-bg: #0A0A0F;
--color-bg-card: #15151F;
--color-text: #F5F5FA;
--color-text-dim: #A0A0B8;
--color-accent: #A855F7;
--color-accent-hover: #9333EA;
--color-success: #10B981;
--color-warning: #F59E0B;
--color-danger: #EF4444;
Commit it to the repo. Reference variables, never raw hex codes, in product code. When marketing wants to test a new accent for a campaign, you change one line and the whole product follows.
Three things shifted this year that older brand-color guides don't account for:
The dominant phone display in 2026 is OLED with HDR support. Pure black #000 is now actually black — pixel off — and high-saturation accents on dark backgrounds glow in a way that LCDs never showed. Test your dark mode on an actual OLED phone, not just a designer's M3 MacBook.
Every AI design tool defaults to the same gradient lavender, pale teal, and soft coral. If your color picker output looks like the homepage of every AI startup launched on Product Hunt this quarter, push the saturation up or pick the unfashionable temperament on purpose.
As of June 28, 2025, the EAA requires WCAG 2.1 AA conformance for any consumer-facing software sold in the EU. "We'll fix accessibility after launch" is no longer a viable position if you have any European users. Bake contrast into the palette decision, not the post-launch backlog.
Thirty minutes, no rebrand a year later. The startups that nail their palette early do not have better taste than everyone else — they had a checklist and the discipline to follow it.
Look at the brand colors of the last ten companies that crossed $100M ARR. The vast majority are a slightly desaturated blue, green, or purple. The exotic colors — neon yellow, deep maroon, electric coral — show up in agencies, in fashion, and in a handful of consumer apps. They almost never show up in software that businesses pay for.
This is not a coincidence. The boring color is boring because it's the color the largest group of buyers feels safe paying with a corporate card. If you're a B2B founder, picking the bold color to "stand out" is a way to lose a year of growth to vibes. Stand out with your product. Let the color carry trust.
Now: open the generator, pick a temperament, lock the hex, ship the palette.
Type or paste a hex code. Get analogous, complementary, triadic, and monochromatic palettes with shade ramps. Export to CSS, Tailwind, or JSON. Free, no signup, no email.
Open the Color Palette Generator →