ColorSense Blog
State of SaaS Color Palettes 2026: 22 Products, Every HEX Code, and What the Data Shows
We analyzed 22 of the most-cited SaaS products of 2026 — fintech, devtools, productivity, creative tools, and AI — and extracted every primary palette. Here's what the data shows about dark mode, accent hue frequency, and the choices separating memorable brands from forgettable ones.
We pulled palettes from 22 of the most-cited SaaS products of 2026 — fintech platforms, developer tools, productivity apps, creative software, and AI products — and grouped the findings by category. Every HEX value below was extracted directly from the live product using ColorSense. Where brands maintain separate marketing and product palettes, we documented both.
This started as a question: is there a standard SaaS color playbook, or is every brand making genuinely independent choices? The answer is somewhere in between — and the findings are more specific than "everyone's going dark and everyone loves purple."
6 Things the Data Shows
- Violet and indigo dominate by a wide margin. 9 of 22 products use some form of violet, purple, or indigo as their primary accent. Blue is second at 4. No other hue appears more than twice.
- Dark mode is the default surface for developer tools. 5 of 6 devtools in this analysis use dark as their primary canvas — not as an optional toggle. Light mode is the alternative, not the starting point.
- The single-accent rule: 17 of 22 products use exactly one saturated color. Multi-color palettes like Figma's are an intentional exception. And even Figma applies strict saturation discipline to keep it from feeling chaotic.
- Pure black and white are increasingly rare. Most products use warm or cool near-blacks and off-whites. Resend and Vercel are the notable holdouts — and both are making a deliberate statement with that choice.
- Green is underused and a real differentiator. Only Supabase uses green as a primary accent across all 22 products. In a sea of violet and blue, green stands out on a results page immediately.
- AI products are settling on editorial minimalism. Anthropic, Perplexity, and Cursor have all converged on restrained, high-contrast palettes. The flashy AI aesthetic of 2022 — neon gradients, animated hero backgrounds — is gone.
Fintech & Payments
1. Stripe — Indigo Gradient Authority
Stripe owns the gradient look in fintech. Other payment processors have tried to copy it for years; none have replicated the precise hue progression that makes Stripe's hero feel both technical and welcoming.
- Brand indigo:
#635BFF
- Gradient stop 2:
#00D4FF (cyan)
- Deep navy:
#0A2540
- Background:
#FFFFFF
- Text:
#0A2540
Why it works: the gradient runs from indigo through cyan — cool-only, never crossing into warm tones. That thermal discipline is what reads as "trustworthy financial infrastructure" rather than "consumer app." Every warm pixel is deliberately absent above the fold.
Steal it for: B2B infrastructure, fintech, APIs, anything that needs to feel modern and serious simultaneously.
2. Mercury — Warm Paper Editorial
Mercury (banking for startups) made a palette choice that looks almost nothing like a bank. Their interface reads like a beautifully typeset financial document — all warmth and restraint.
- Background:
#FAF8F5 (warm cream, paper-like)
- Text primary:
#1A1A1A
- Text muted:
#8A8A8A
- Accent (CTAs):
#1A1A1A (filled black — no hue accent)
- Border:
#E8E4DE (warm, not grey)
Why it works: traditional banks use blue because it signals trust. Mercury's bet was that for startup founders, paper warmth signals "we're not your father's bank" without having to say it. The absence of an accent color is itself the statement.
Steal it for: fintech products targeting founders, anything that wants to feel premium-but-approachable rather than corporate-trustworthy.
3. Brex — High-Contrast Corporate Dark
Brex runs a dark-first corporate card platform and their palette is unapologetically power-user. High contrast, minimal warmth, the accent earns every appearance it makes.
- Background:
#0A0A0A
- Surface:
#1A1A1A
- Accent:
#FF6B35 (orange, used on key CTAs only)
- Text:
#F5F5F5
- Muted:
#666666
Why it works: orange on near-black has the same visual logic as safety signage — high visibility, high urgency. Brex applies it only to primary actions (spend, request, approve) which makes it feel like a status signal rather than a decoration.
Steal it for: finance and operations tools where the primary user action is a high-stakes decision.
4. Plaid — Navy and Teal Credibility
Plaid (the data network behind most fintech apps) chose a palette that reads as "infrastructure you can trust with someone else's bank credentials." Deep navy with a teal accent that suggests data flow without looking like a blockchain startup.
- Background:
#FFFFFF
- Primary navy:
#0A2342
- Accent teal:
#01B3A7
- Text:
#0A2342
- Muted:
#8A9BB0
Why it works: navy-and-teal is the traditional credibility pairing in financial services, but Plaid's teal is fresher and more saturated than the flat teals of a decade ago. It looks like a trusted institution that also hired good designers.
Steal it for: B2B platforms that need to appear in enterprise sales decks, anything in regulated industries that can't afford to look experimental.
Developer Tools
5. Linear — Confident Dark Violet
Linear's palette has barely changed in three years, which is itself the point. They committed to a dark-first interface with a single signature accent and let consistency carry the brand.
- Background:
#08090A
- Surface:
#1C1D1F
- Primary accent:
#5E6AD2 (violet)
- Text primary:
#F7F8F8
- Text muted:
#62666D
Why it works: the violet is the only saturated color on the page. When you have one color doing all the emotional work, you can use it sparingly — and it never wears out. Every button, focus state, and keyboard shortcut overlay lands with the same weight.
Steal it for: developer tools, dashboards, technical products where the interface should recede and the content should lead.
6. Vercel — Maximum Restraint
Vercel has the most disciplined palette of any major SaaS in 2026: pure white, pure black, one shade of grey for borders. No accent color. No gradient. No illustration system.
- Background (light):
#FFFFFF
- Background (dark):
#000000
- Border / muted:
#EAEAEA (light) / #333333 (dark)
Why it works: when your product is "the platform that makes other people's sites beautiful," your own site has to get out of the way. Vercel's palette communicates "we're not the show — your site is." It's also unbreakable — there's no way for a junior designer to accidentally make it look off-brand.
Steal it for: infrastructure that powers other brands, developer tools for audiences allergic to marketing.
7. Raycast — Hot Red on Black
Raycast picked one of the bravest accent colors in modern SaaS: a single scorching red on near-black. It shouldn't work. It absolutely works.
- Background:
#000000
- Surface:
#1A1A1A
- Accent:
#FF6363 (coral red)
- Text:
#FFFFFF primary, #888888 muted
Why it works: red on black is the color combination of warning labels and command lines — both signals of "powerful tool, use deliberately." Raycast leans into that association: their product is a launcher for power users, and the palette says so before you read a single word.
Steal it for: productivity tools for power users, anything that wants to feel like an insider's choice.
8. Supabase — The Standout Green
Supabase is the only product in this analysis using green as a primary accent — which is precisely why it's so recognizable. In a category that defaults to violet or blue, their signature green is a thumbnail you can identify from the corner of your eye.
- Background:
#181818
- Surface:
#1C1C1C
- Accent:
#3ECF8E (vivid mint-green)
- Text:
#EDEDED
- Muted:
#8E8E9A
Why it works: the green signals two things simultaneously — open-source culture (green has a long association there) and "systems actively running." For a database platform, that's a precise emotional message at no additional design cost.
Steal it for: open-source tools, data and infrastructure products, anything where the "live and healthy" metaphor is relevant to the user.
9. Resend — Pure Black-and-White Editorial
Resend, the developer-facing email API, has the most editorial-feeling palette of any 2026 SaaS: black, white, a single thin border grey. Their landing page reads like a New York Times op-ed.
- Background:
#FFFFFF
- Text:
#000000
- Border:
#E5E5E5
- Code blocks:
#F4F4F5 background, #18181B text
Why it works: for a developer tool, the most credible aesthetic is "we don't need to dazzle you." Restraint signals technical seriousness in a category where competitors load up on gradients and 3D illustrations.
Steal it for: developer APIs, technical documentation sites, products whose audience is allergic to marketing.
10. Railway — Dark with a Single Purple Pulse
Railway (deployment platform) uses the same dark foundation as its category peers, but their violet accent hits at a slightly brighter frequency than Linear or Cursor — more "launch" than "dashboard."
- Background:
#0B0D0E
- Surface:
#161B22
- Accent:
#7B5EA7 (mid-violet)
- Text:
#F0F0F0
- Muted:
#6B737C
Why it works: the violet is pitched at the frequency that reads as "this handles serious deployments" without tipping into "enterprise CRM." It's the SaaS equivalent of business casual — dressed enough to be taken seriously, loose enough to feel like a tool you'd actually enjoy using.
Steal it for: DevOps, deployment, and infrastructure tools targeting developer teams rather than enterprise procurement.
Productivity & Collaboration
11. Notion — Warm Monochrome
Notion's color story is "almost monochrome, but not cold." The grey ramp has a faint warm bias, and the brand uses tiny pops of color as content tags rather than as UI accents.
- Background:
#FFFFFF
- Surface tint:
#F7F6F3 (off-white with warmth)
- Text:
#37352F (warm near-black)
- Muted:
#9B9A97
- Accent:
#2383E2 (blue, links and CTAs only)
Why it works: the warm tint makes the interface feel like paper rather than a screen — competing with Moleskine as much as with other software. The single blue accent is the only element that tells your eye "this is digital, not a journal."
Steal it for: writing tools, knowledge bases, products that compete with analog alternatives.
12. Cal.com — Black with Earth Warmth
Cal.com refreshed in late 2025 with a palette that breaks from the violet-or-black default: deep black paired with a warm bone/khaki accent. It's recognisable from a thumbnail.
- Background:
#101010
- Surface:
#1F1F1F
- Accent:
#D8D0BD (warm bone) / #9D9580 (deeper khaki)
- Text:
#F5F5F5
- CTA:
#FFFFFF filled buttons
Why it works: in a category dominated by cool blues and violets, going warm is instantly distinctive. The earthy accent reads as "considered" — the visual equivalent of a quietly luxurious physical product.
Steal it for: productivity tools that want to feel premium, scheduling products, anything where "calm" is part of the brand promise.
13. Loom — Friendly Violet Gradient
Loom uses a violet that sits at the boundary between "professional" and "approachable" — exactly the right tone for a product about replacing meetings with casual video.
- Primary:
#625DF5 (violet)
- Gradient counterpart:
#A5A2FF (lighter violet)
- Background:
#FFFFFF with #F5F5FF tinted sections
- Text:
#1A1A1A
- Highlight:
#FFD93D (warm yellow, used sparingly)
Why it works: a single-hue gradient (violet to lighter violet) is calmer than a multi-hue one. The yellow highlight is the only warm element — it appears only where the product wants your eye: the record button, the timeline scrubber.
Steal it for: async collaboration tools, communication products, anything that needs to feel professional without feeling formal.
14. Superhuman — Warm Dark with Amber Precision
Superhuman (the premium email client) has a palette that telegraphs "quality" before you read a single feature. Their dark mode isn't black — it's warm espresso — and the amber accent earns its keep on exactly one element: the send interaction.
- Background:
#1A1208 (very dark warm brown)
- Surface:
#231A0A
- Accent:
#F5A623 (warm amber/gold)
- Text:
#F7F3ED (warm white)
- Muted:
#7A6A55
Why it works: warm dark backgrounds are uncommon enough to signal "custom built" rather than "dark mode toggle on." The amber is the color of luxury product photography — watches, whiskey, leather goods. Applied to a premium email client, it communicates that the price is intentional, not arbitrary.
Steal it for: premium subscription products, anything with deliberate quality positioning where the palette itself should justify the price point.
Creative & Design Tools
15. Figma — Joyful Primary Quartet
Figma is the rare SaaS that uses four distinct primary colors and makes it feel cohesive rather than chaotic. The trick: rigorous saturation matching. Every color sits at the same vividness, so no single one dominates.
- Red:
#F24E1E
- Orange:
#FF7262
- Green:
#0ACF83
- Blue:
#1ABCFE
- Purple:
#A259FF
- Background:
#FFFFFF
Why it works: each color maps to a specific tool category in the product — brand meets product at the deepest level. The saturation-matching technique is the thing worth stealing, even if you don't copy the hues themselves.
Steal it for: creative tools, design products, anything where playfulness is part of the value proposition. Use the saturation-matching technique even if you don't copy the hues.
16. Framer — Electric Blue on Darkness
Framer (the website builder for designers) runs a near-black base with an electric blue that feels more energetic than their devtool peers — this is a product that wants to feel fast and dynamic, not just serious.
- Background:
#060606
- Surface:
#141414
- Accent:
#0099FF (electric blue)
- Gradient (hero):
#0099FF → #7B5EA7 (blue to purple)
- Text:
#FFFFFF
- Muted:
#888888
Why it works: electric blue at full saturation on near-black has the visual energy of a screen in a dark room — which is literally the context designers use Framer in. The blue-to-purple gradient uses the same technique as Loom: single hue family, never crossing temperature zones.
Steal it for: web builders, prototyping tools, any creative software where speed and energy are core to the pitch.
17. Spline — Gradient-Native Dark
Spline (3D design tool) is one of the few products where multi-color gradients are genuinely on-brand — their output is 3D renders, so a palette that looks like a render is authentic, not gratuitous.
- Background:
#0D1117
- Surface:
#161B22
- Gradient 1:
#6C63FF → #FF6B9D (violet to pink)
- Gradient 2:
#00D9FF → #6C63FF (cyan to violet)
- Text:
#F0F6FC
Why it works: multi-color gradients almost always look cheap unless the product itself produces colorful outputs. Spline's 3D renders justify the gradient palette by making the marketing look like a sample of the product. It's the rare case where the palette is the product demonstration.
Steal it for: tools whose output is inherently visual — 3D, illustration, video, generative art. Don't use gradient-native palettes if your output is text or data.
AI Products
18. Anthropic — Restraint as Positioning
Anthropic's brand is the design equivalent of a company that doesn't need to prove anything. Warm off-white, near-black text, a terracotta brand mark that appears only at the logo level. No gradients. No dark mode. No animation system.
- Background:
#FAF9F6 (warm cream)
- Text:
#1A1A1A
- Brand accent (logo only):
#D97757 (muted terracotta/copper)
- Border:
#E8E4DC
- Muted:
#7A7A7A
Why it works: the AI space in 2022–2024 was dominated by gradient-everything and neon accents screaming "cutting-edge." Anthropic's response was to go the opposite direction entirely. The warm cream reads as academic publishing — serious, careful, peer-reviewed. For a company making safety claims about its AI, the palette is part of the safety argument.
Steal it for: research-adjacent products, regulated industries, any AI tool that needs to communicate "thoughtful" rather than "impressive."
19. Perplexity — Search-Native Dark
Perplexity (AI search) uses a palette built around a search interface — a dark background that recedes behind the answer content, a teal accent that signals "source" and "reference" without feeling clinical.
- Background:
#1C1C1C
- Surface:
#262626
- Accent:
#20B2AA (teal, used on citations and links)
- Text:
#F0F0F0
- Muted:
#888888
Why it works: the teal accent does specific work — it appears on citations and source links, training your eye to equate that color with "verifiable." The palette communicates reliability through consistent application of a single signal color, not through visual polish.
Steal it for: research tools, knowledge products, anything where source credibility is part of the value proposition.
20. Cursor — Developer Dark, AI Edition
Cursor (the AI code editor) uses a palette that will look familiar to Linear users — near-black, a single violet accent, tight neutral ramp. The message is deliberate: this is serious tooling for developers, not a chatbot wrapped in an IDE.
- Background:
#0D0D0D
- Surface:
#1A1A1A
- Accent:
#8B5CF6 (violet, slightly brighter than Linear's)
- Text:
#F5F5F5
- Muted:
#6B7280
Why it works: Cursor's audience already uses Linear, Raycast, and similar dark-first tools. The palette signals "I live in your existing developer stack" — a credibility move that's more effective than differentiation would be. You want your users' first impression to be "this fits," not "this is different."
Steal it for: AI tools targeting developers, products where fitting into an existing workflow is the pitch rather than standing out from it.
Auth & Infrastructure
21. Clerk — Iridescent Counterprogramming
Clerk (auth-as-a-service) uses one of the most ambitious gradient systems in SaaS — a multi-stop iridescent that shifts through indigo, magenta, and cyan. Auth is a deeply unsexy category, and the palette is deliberate counterprogramming.
- Primary:
#6C47FF (Clerk indigo)
- Gradient stops:
#FF61C7 → #6C47FF → #00C2FF
- Background:
#FFFFFF
- Text:
#1A1523 (very dark plum)
Why it works: the iridescent gradient makes their UI components recognisable when embedded in customer sites — brand collateral that ships inside the product itself. They look like a creative tool, not infrastructure plumbing.
Steal it for: infrastructure brands that want to feel less corporate, B2B SaaS targeting design-conscious developer teams.
22. PlanetScale — Amber Warning Signal
PlanetScale (serverless database platform) uses amber as its primary accent — the same signal language as warning indicators in a database console, which is exactly the product context.
- Background:
#0F0F0F
- Surface:
#1A1A1A
- Accent:
#F5A623 (amber/orange)
- Text:
#F5F5F5
- Muted:
#555555
Why it works: amber as a primary accent is unusual enough to be distinctive, but it carries a deep association with "active process" and "attention required" — the exact mental model you want users in when running database operations. The palette tells the right story for the product context.
Steal it for: database tools, monitoring dashboards, any product where alert and caution are part of the UX vocabulary.
The 7 Macro Patterns Across SaaS Color in 2026
- Dark mode is the default surface for dev tools, not the toggle. For developer tools, dark-first is the expectation. Light mode has become the accessibility option, not the starting point. For productivity and AI products, it's more split.
- Violet and indigo won the accent war. 9 of 22 products use some form of violet or indigo as their primary accent. It communicates "modern tech product" without the coldness of pure blue or the risk of red. It's become the SaaS equivalent of a default font choice — common enough to be safe, distinct enough to still work.
- One accent color, used surgically. The strongest brands apply exactly one saturated color only where the eye needs to go. Multi-accent palettes almost always dilute the signal. When they work (Figma), there's a deep product-fit reason, not just an aesthetic one.
- Warm-tinted neutrals over flat greys. Pure
#000 and #FFF are getting rarer. Warm near-blacks like Superhuman's #1A1208 and warm off-whites like Mercury's #FAF8F5 feel considered in a way that default Tailwind greys simply don't.
- Single-hue gradients replaced multi-hue. Loom's violet-to-lighter-violet and Framer's blue-to-purple are the 2026 default. When brands use multi-hue gradients (Clerk, Spline), there's always a clear product-fit reason. The five-color rainbow gradient of 2022 is gone.
- Brand color ≠ UI color. The big shift of the past two years: brands now publish a "brand" color for the marketing site and a separate "interface" palette for the product. Notion's blue accent and Cal.com's white CTAs are both UI colors chosen for legibility, not brand recognition.
- The palette communicates the audience before the headline loads. Mercury says "startup founders" before any copy. Superhuman says "power users who pay for quality." Anthropic says "careful, peer-reviewed." Mismatching palette and audience is one of the most expensive invisible mistakes in SaaS branding.
Quick-Reference: All 22 Products at a Glance
Every product from this analysis — primary background mode, accent color, and category — in one table.
| Product | Category | Mode | Primary Accent | Surface Style |
|---|
| Stripe | Fintech | Light | #635BFF indigo | White + cool gradient hero |
| Mercury | Fintech | Light | None (monochrome) | Warm cream |
| Brex | Fintech | Dark | #FF6B35 orange | Near-black |
| Plaid | Fintech | Light | #01B3A7 teal | White |
| Linear | Dev Tools | Dark | #5E6AD2 violet | Near-black |
| Vercel | Dev Tools | Both | None (monochrome) | Pure black / pure white |
| Raycast | Dev Tools | Dark | #FF6363 coral red | Pure black |
| Supabase | Dev Tools | Dark | #3ECF8E green | Near-black |
| Resend | Dev Tools | Light | None (monochrome) | Pure white |
| Railway | Dev Tools | Dark | #7B5EA7 violet | Near-black |
| Notion | Productivity | Light | #2383E2 blue | Warm off-white |
| Cal.com | Productivity | Dark | #D8D0BD bone | Near-black |
| Loom | Productivity | Light | #625DF5 violet | White |
| Superhuman | Productivity | Dark | #F5A623 amber | Warm dark brown |
| Figma | Creative | Light | Multi-color | White |
| Framer | Creative | Dark | #0099FF electric blue | Near-black |
| Spline | Creative | Dark | Gradient | Dark navy |
| Anthropic | AI | Light | #D97757 terracotta | Warm cream |
| Perplexity | AI | Dark | #20B2AA teal | Dark grey |
| Cursor | AI | Dark | #8B5CF6 violet | Near-black |
| Clerk | Auth | Light | #6C47FF + gradient | White |
| PlanetScale | Infrastructure | Dark | #F5A623 amber | Near-black |
How to Apply These Lessons to Your Own SaaS
You don't have to copy any of these palettes wholesale — and you shouldn't. But the meta-pattern is replicable:
- Pick one accent hue and commit. Use the Color Scheme Generator to build the supporting palette around it — analogous tints for surfaces, the accent reserved for exactly one primary action.
- Decide if you're warm or cool, then be consistent. Warm near-blacks and cool near-blacks are both good choices. Mixing them — warm background, cool text — is not.
- Build a near-neutral ramp with intentional tint. Don't ship with default Tailwind greys. Shift your neutrals toward warm or cool based on your brand positioning and audience.
- Audit every text-on-background pair before shipping. Every palette in this analysis passes WCAG AA on its primary text. Run yours through the WCAG Contrast Checker — failing contrast is the fastest way to look amateur in 2026.
- Score the whole palette together. A palette is more than five colors — it's all 21 possible pairings between them. The Palette Health tool grades the full matrix and surfaces the pair that will trip you up first.
- Pull your competitors' exact HEX values. "Roughly that blue" never wins. Use the Website Palette Analyzer to extract the actual palette from any live SaaS site and reverse-engineer the choices before you make your own.
From Reference to Real Brand Kit
A reference palette is the start, not the finish. To turn any of the colors above into a usable brand kit — paired typography, accessibility-checked text colors, export-ready CSS variables, Tailwind tokens, and Figma styles — drop the HEX codes into the ColorSense AI Brand Kit. It generates the supporting system in one pass and exports it in every format your team needs.
The products above didn't arrive at their palettes by accident. Each one represents a specific strategic choice about audience, category positioning, and the kind of trust they need to earn. Use them as reference — and pay attention to why each one works for its brand. That's the skill that transfers.
Take it further
Turn any palette into a full brand kit
ColorSense AI Brand Kit pairs your palette with matching fonts, accessibility checks, and export-ready CSS, Tailwind, and Figma tokens.
Build a Brand Kit →