The short version
- A working tech color palette has five parts: a dark ground, a light ground, a neutral grey ramp, one brand accent and a set of status colours.
- Blue dominates technology branding because it reads as calm and reliable, which is exactly why a blue accent rarely makes a tech brand recognisable on its own.
- The accent is the part of a tech palette people remember, so it should be a colour your category does not already own.
- Status colours for success, warning and error should stay conventional even when the brand accent is unusual, because users rely on them to act.
- Every text and background pairing in a product palette should meet WCAG contrast, at least 4.5:1 for body text.
On this page
A good tech color palette is less about one hero colour and more about a system: a dark ground, a light ground, a ramp of neutral greys, one accent that belongs to you, and conventional colours for success, warning and error. Corporate blue fills the accent slot for so many software companies that it has stopped meaning anything in particular. Swap the accent for something your category doesn't own, keep the rest disciplined, and the brand still reads as competent technology.
Why tech brands keep choosing blue
Blue is safe. It reads as calm and dependable in most markets, it sits comfortably in interfaces, and it is the default link colour of the web. Those are good reasons, and the result is a sea of near-identical blues across banking apps, cloud dashboards and productivity tools. Colour psychology explains the associations; the problem is simply that everyone acted on them at once.
None of this means blue is wrong. It means blue can't be your only idea. If you keep it, pair it with an unexpected ground, a second colour, or a distinctive material, so the identity is recognisable even with the logo removed.
Eight tech color palettes with hex codes
Each palette below has a ground, a supporting tone and an accent. They are written as gradients so you can see how the colours behave together, then broken out into swatches for the two that work hardest in product UI.
- Night ink and acid lime suits developer tools and infrastructure: technical, nocturnal, impossible to confuse with a bank.
- Graphite and signal orange reads as hardware, robotics or anything physical. Orange also carries well on dark product photography.
- Paper and pine is the quiet option for research, writing and health software, where calm matters more than speed.
- Midnight violet and pink fits consumer apps and creative tools that want energy without the default blue to purple gradient.
- Deep teal and mint works for climate, data and fintech brands that want to feel fresh rather than corporate.
- Cool white and electric blue keeps blue but makes it vivid and singular, with almost nothing else around it.
- Espresso and amber is warm and unusual in tech, good for hospitality software, audio and anything human first.
- Black and soft periwinkle is restrained and premium, close to the look many AI products are converging on.
The five parts of a product palette
Marketing pages can get away with three colours. A product can't, because interfaces need borders, disabled states, highlights and alerts. Plan these roles before you pick shades, and the palette stays coherent as the product grows.
What it does
Example
#0b1020What it does
Example
#fafaf7What it does
Example
#f2f4f7 to #111827What it does
Example
#c6f432What it does
Example
Turning a tech palette into design tokens
Name colours by role, not by appearance. A token called --accent survives a rebrand; a token called --lime becomes a lie the day the accent changes. Define each role once for light mode and once for dark mode, and let components only ever reference roles.
:root {
--ground: #fafaf7;
--surface: #ffffff;
--text: #111827;
--text-muted: #4b5563;
--border: #d9dde3;
--accent: #3344ff;
--on-accent: #ffffff;
--success: #15803d;
--warning: #b45309;
--danger: #b91c1c;
}
@media (prefers-color-scheme: dark) {
:root {
--ground: #0b1020;
--surface: #141a2e;
--text: #eef1f6;
--text-muted: #8a94a8;
--border: #1e2a4a;
--accent: #c6f432;
--on-accent: #0b1020;
--success: #4ade80;
--warning: #fbbf24;
--danger: #f87171;
}
}Dark mode is where tech palettes are judged, since developers and power users often live in it. Dark mode design covers the details, such as lifting the ground slightly off pure black and lightening status colours so they don't vibrate. For gradients that stay vivid on modern screens, oklch gradients in CSS are worth a look.
Check contrast before you ship
Bright accents like lime, mint and amber look wonderful on dark grounds and fail as text on white. WCAG asks for 4.5:1 for body text and 3:1 for large text and interface elements. Test every pairing you plan to use, and write down which combinations are allowed. Colour contrast and accessibility has the full method.
Avoid
- Lime or mint text on a white page
- An accent used for buttons, links, charts and headings at once
- Pure black ground with pure white text everywhere
- Status colours bent to match the brand until red looks orange
Do
- Bright accents as fills with dark text on top
- One job for the accent: the primary action
- A slightly lifted dark ground and an off white text
- Conventional status colours tuned in shade only
Taking the palette beyond the interface
Launch posts, conference slides and changelog graphics are where a tech palette becomes a brand. Flat fills of the accent get repetitive fast, so give the marketing side a richer surface: the ground colour with light coming through it, grain, a slow drift of the accent. SaaS branding and fintech branding show how that plays out in two very different categories.
A launch image at the LinkedIn link size, 1200×627, where the background carries the brand and the words stay short.
The same system as a portrait feed post at 1080×1350.
This is where Gradiently fits. A Mark gives a tech brand a living background that only you can export with once you claim it, renders at every size from a link image to a slide, and keeps release notes readable by moving its calmest area behind the words. You can also ask the Designer for a launch post and it makes the other sizes for you.
Questions people ask
What colours are best for a tech company?
Any colour works if the palette has a clear structure: two grounds, a neutral ramp, one accent and conventional status colours. Choose an accent your competitors don't already use.
Why do so many tech companies use blue?
Blue reads as calm and reliable and sits comfortably in interfaces. Because so many companies chose it for the same reasons, a blue accent alone rarely makes a brand recognisable.
How many colours should a SaaS palette have?
Usually one brand accent, a neutral grey ramp of 8 to 10 steps, two grounds and four status colours. Products need many greys and very few brand colours.
Can a bright accent like lime work in a tech brand?
Yes, especially on dark grounds. Use it as a fill with dark text on top rather than as text on white, where it fails contrast.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile