# Tech color palettes beyond corporate blue

[Canonical HTML page](https://gradiently.design/guide/tech-color-palettes)

Blue says trustworthy, and so does every other tech company's blue. Here are eight palettes with real codes that still feel like software, and the structure that makes any of them work in a product.

## 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.

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](https://gradiently.design/guide/color-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: `linear-gradient(135deg, #0b1020 0%, #1e2a4a 55%, #c6f432 100%)`
- Graphite and signal orange: `linear-gradient(135deg, #111111 0%, #2b2b2b 50%, #ff5b2e 100%)`
- Paper and pine: `linear-gradient(135deg, #f6f3ee 0%, #e4ddd2 50%, #2f5d50 100%)`
- Midnight violet and pink: `linear-gradient(135deg, #0d0b1f 0%, #3b1d6e 50%, #ff6fb5 100%)`
- Deep teal and mint: `linear-gradient(135deg, #061a1c 0%, #0f4c4a 55%, #5ef2c8 100%)`
- Cool white and electric blue: `linear-gradient(135deg, #fafaf7 0%, #d9dde3 50%, #3344ff 100%)`
- Espresso and amber: `linear-gradient(135deg, #1a1410 0%, #4a3426 50%, #ffb547 100%)`
- Black and soft periwinkle: `linear-gradient(135deg, #0a0a0a 0%, #1f1f24 60%, #9b8cff 100%)`

Eight starting points. Notice how much work the ground does: the same accent feels like a developer tool on black and like a calm productivity app on paper.

- **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.

- Night ink: #0b1020
- Slate navy: #1e2a4a
- Fog grey: #8a94a8
- Cloud: #eef1f6
- Acid lime: #c6f432

Night ink and acid lime as a working set: two grounds, one mid grey for secondary text, and the accent. Lime is used for one button and one highlight per screen, never for body text on white.

## 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.

| Role | What it does | Example |
| --- | --- | --- |
| Dark ground | App background in dark mode, footers, hero sections | `#0b1020` |
| Light ground | App background in light mode, documents, email | `#fafaf7` |
| Neutral ramp | Text, borders, dividers, disabled states, in 8 to 10 steps | `#f2f4f7` to `#111827` |
| Brand accent | Primary buttons, links, the one thing to press | `#c6f432` |
| Status colours | Success, warning, error, information | Green, amber, red, blue |

Roles first, shades second. Most products need far more greys than brand colours.

> **Keep status colours boring** An unusual accent is a brand decision. An unusual error colour is a usability problem. Red for errors and green for success should stay recognisable, even if you tune their exact shade to sit with your accent.

## 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.

```css
: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;
  }
}
```

Role tokens for both modes. The accent can shift between modes: electric blue on white, lime on night ink, as long as both feel like the same brand.

Dark mode is where tech palettes are judged, since developers and power users often live in it. [Dark mode design](https://gradiently.design/guide/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](https://gradiently.design/guide/css-gradient-oklch) 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](https://gradiently.design/guide/color-contrast-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](https://gradiently.design/guide/saas-startup-branding) and [fintech branding](https://gradiently.design/guide/fintech-branding) show how that plays out in two very different categories.

A landscape launch graphic announcing deploys in four seconds, now in beta

A launch image at the LinkedIn link size, 1200×627, where the background carries the brand and the words stay short.

A portrait social post announcing version 3 of a software product

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.

## FAQ

### 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.