# Farvepaletter til tech ud over korporativ blå

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

Blå siger troværdig, og det gør alle andre techvirksomheders blå også. Her er otte paletter med rigtige koder, der stadig føles som software, og den struktur, der får enhver af dem til at virke i et produkt.

## The short version

- En brugbar farvepalet til tech har fem dele: en mørk bund, en lys bund, en neutral grå skala, én brandaccent og et sæt statusfarver.
- Blå dominerer techbranding, fordi den opleves som rolig og pålidelig, og netop derfor gør en blå accent sjældent et techbrand genkendeligt alene.
- Accenten er den del af en techpalet, folk husker, så den bør være en farve, din kategori ikke allerede ejer.
- Statusfarver til succes, advarsel og fejl bør forblive konventionelle, selv når brandaccenten er usædvanlig, fordi brugerne handler ud fra dem.
- Hver kombination af tekst og baggrund i en produktpalet bør opfylde WCAG-kontrast, mindst 4,5:1 til brødtekst.

En god **farvepalet til tech** handler mindre om én hovedfarve og mere om et system: en mørk bund, en lys bund, en skala af neutrale grå, én accent, der tilhører dig, og konventionelle farver til succes, advarsel og fejl. Korporativ blå fylder accentpladsen hos så mange softwarevirksomheder, at den er holdt op med at betyde noget bestemt. Skift accenten ud med noget, din kategori ikke ejer, hold resten disciplineret, og brandet opleves stadig som kompetent teknologi.

## Hvorfor techbrands bliver ved med at vælge blå

Blå er sikker. Den opleves som rolig og pålidelig på de fleste markeder, den sidder godt i brugerflader, og den er webbens standardfarve for links. Det er gode grunde, og resultatet er et hav af næsten ens blå nuancer på tværs af bankapps, cloud-dashboards og produktivitetsværktøjer. [Farvepsykologi](https://gradiently.design/da/guide/color-psychology) forklarer associationerne; problemet er simpelthen, at alle handlede på dem på én gang.

Intet af dette betyder, at blå er forkert. Det betyder, at blå ikke kan være din eneste idé. Beholder du den, så kombiner den med en uventet bund, en anden farve eller et karakteristisk materiale, så identiteten kan genkendes, selv når logoet er fjernet.

## Otte farvepaletter til tech med hexkoder

Hver palet nedenfor har en bund, en støttetone og en accent. De er skrevet som gradienter, så du kan se, hvordan farverne opfører sig sammen, og derefter delt op i farveprøver for de to, der arbejder hårdest i en produktbrugerflade.

- Natblæk og syrelime: `linear-gradient(135deg, #0b1020 0%, #1e2a4a 55%, #c6f432 100%)`
- Grafit og signalorange: `linear-gradient(135deg, #111111 0%, #2b2b2b 50%, #ff5b2e 100%)`
- Papir og fyr: `linear-gradient(135deg, #f6f3ee 0%, #e4ddd2 50%, #2f5d50 100%)`
- Midnatsviolet og pink: `linear-gradient(135deg, #0d0b1f 0%, #3b1d6e 50%, #ff6fb5 100%)`
- Dyb petrol og mint: `linear-gradient(135deg, #061a1c 0%, #0f4c4a 55%, #5ef2c8 100%)`
- Kølig hvid og elektrisk blå: `linear-gradient(135deg, #fafaf7 0%, #d9dde3 50%, #3344ff 100%)`
- Espresso og rav: `linear-gradient(135deg, #1a1410 0%, #4a3426 50%, #ffb547 100%)`
- Sort og blød lavendelblå: `linear-gradient(135deg, #0a0a0a 0%, #1f1f24 60%, #9b8cff 100%)`

Otte udgangspunkter. Læg mærke til, hvor meget bunden betyder: den samme accent føles som et udviklerværktøj på sort og som en rolig produktivitetsapp på papir.

- **Natblæk og syrelime** passer til udviklerværktøjer og infrastruktur: teknisk, natlig og umulig at forveksle med en bank.
- **Grafit og signalorange** opleves som hardware, robotter eller noget fysisk. Orange står også godt på mørke produktfotos.
- **Papir og fyr** er det stille valg til software inden for forskning, skrivning og sundhed, hvor ro betyder mere end fart.
- **Midnatsviolet og pink** passer til forbrugerapps og kreative værktøjer, der vil have energi uden standardgradienten fra blå til lilla.
- **Dyb petrol og mint** virker til brands inden for klima, data og fintech, der vil føles friske snarere end korporative.
- **Kølig hvid og elektrisk blå** beholder blå, men gør den klar og enestående med næsten intet andet omkring.
- **Espresso og rav** er varm og usædvanlig i tech, god til software til hotel og restauration, lyd og alt, hvor mennesket kommer først.
- **Sort og blød lavendelblå** er afdæmpet og eksklusiv, tæt på det look, mange AI-produkter er ved at samles om.

- Natblæk: #0b1020
- Skifermarine: #1e2a4a
- Tågegrå: #8a94a8
- Sky: #eef1f6
- Syrelime: #c6f432

Natblæk og syrelime som arbejdssæt: to bunde, én mellemgrå til sekundær tekst og accenten. Lime bruges til én knap og ét højdepunkt pr. skærm, aldrig til brødtekst på hvid.

## De fem dele af en produktpalet

Marketingsider kan klare sig med tre farver. Et produkt kan ikke, fordi brugerflader kræver kanter, deaktiverede tilstande, fremhævninger og advarsler. Planlæg rollerne, før du vælger nuancer, så forbliver paletten sammenhængende, mens produktet vokser.

| Rolle | Hvad den gør | Eksempel |
| --- | --- | --- |
| Mørk bund | Appbaggrund i mørk tilstand, footere, herosektioner | `#0b1020` |
| Lys bund | Appbaggrund i lys tilstand, dokumenter, e-mail | `#fafaf7` |
| Neutral skala | Tekst, kanter, skillelinjer, deaktiverede tilstande, i 8 til 10 trin | `#f2f4f7` til `#111827` |
| Brandaccent | Primære knapper, links, den ene ting, man skal trykke på | `#c6f432` |
| Statusfarver | Succes, advarsel, fejl, information | Grøn, rav, rød, blå |

Roller først, nuancer bagefter. De fleste produkter kræver langt flere grå end brandfarver.

> **Hold statusfarver kedelige** En usædvanlig accent er en brandbeslutning. En usædvanlig fejlfarve er et brugbarhedsproblem. Rød til fejl og grøn til succes skal forblive genkendelige, selv hvis du justerer den præcise nuance, så den passer til din accent.

## Sådan gør du en techpalet til design tokens

Navngiv farver efter rolle, ikke efter udseende. En token kaldet `--accent` overlever et rebrand; en token kaldet `--lime` bliver en løgn den dag, accenten skifter. Definer hver rolle én gang til lys tilstand og én gang til mørk tilstand, og lad komponenterne kun henvise til roller.

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

Rolletokens til begge tilstande. Accenten kan skifte mellem tilstandene: elektrisk blå på hvid, lime på natblæk, så længe begge føles som samme brand.

Mørk tilstand er der, hvor techpaletter bliver bedømt, fordi udviklere og superbrugere ofte lever i den. [Design til mørk tilstand](https://gradiently.design/da/guide/dark-mode-design) dækker detaljerne, som at løfte bunden en smule fra ren sort og gøre statusfarver lysere, så de ikke vibrerer. Til gradienter, der forbliver klare på moderne skærme, er [oklch-gradienter i CSS](https://gradiently.design/da/guide/css-gradient-oklch) et kig værd.

## Tjek kontrasten, før du lancerer

Klare accenter som lime, mint og rav ser vidunderlige ud på mørke bunde og dumper som tekst på hvid. WCAG kræver 4,5:1 til brødtekst og 3:1 til stor tekst og brugerfladeelementer. Test hver kombination, du har tænkt dig at bruge, og skriv ned, hvilke kombinationer der er tilladt. [Farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility) har hele metoden.

### Undgå

- Lime eller mint tekst på en hvid side
- En accent brugt til knapper, links, diagrammer og overskrifter på én gang
- Ren sort bund med ren hvid tekst overalt
- Statusfarver bøjet mod brandet, til rød ligner orange

### Gør

- Klare accenter som fyld med mørk tekst ovenpå
- Én opgave til accenten: den primære handling
- En let løftet mørk bund og en råhvid tekst
- Konventionelle statusfarver, kun justeret i nuance

## Sådan tager du paletten ud over brugerfladen

Lanceringsopslag, konferenceslides og grafik til changelogs er der, hvor en techpalet bliver til et brand. Flade flader i accentfarven bliver hurtigt ensformige, så giv marketingsiden en rigere overflade: bundfarven med lys, der skinner igennem, kornstruktur, en langsom drift af accenten. [Branding til SaaS](https://gradiently.design/da/guide/saas-startup-branding) og [branding til fintech](https://gradiently.design/da/guide/fintech-branding) viser, hvordan det udspiller sig i to meget forskellige kategorier.

En liggende lanceringsgrafik, der annoncerer deploys på fire sekunder, nu i beta

Et lanceringsbillede i LinkedIns linkstørrelse, 1200×627, hvor baggrunden bærer brandet, og ordene forbliver korte.

Et stående opslag på sociale medier, der annoncerer version 3 af et softwareprodukt

Det samme system som stående feedopslag i 1080×1350.

Det er her, Gradiently passer ind. En Mark giver et techbrand en levende baggrund, som kun du kan eksportere med, når du har sikret dig den, renderes i alle størrelser fra et linkbillede til et slide og holder release notes læselige ved at flytte sit roligste område bag ordene. Du kan også bede Designer om et lanceringsopslag, så laver den de andre størrelser for dig.

## FAQ

### Hvilke farver er bedst til en techvirksomhed?

Enhver farve virker, hvis paletten har en klar struktur: to bunde, en neutral skala, én accent og konventionelle statusfarver. Vælg en accent, dine konkurrenter ikke allerede bruger.

### Hvorfor bruger så mange techvirksomheder blå?

Blå opleves som rolig og pålidelig og sidder godt i brugerflader. Fordi så mange virksomheder valgte den af de samme grunde, gør en blå accent alene sjældent et brand genkendeligt.

### Hvor mange farver skal en SaaS-palet have?

Som regel én brandaccent, en neutral grå skala på 8 til 10 trin, to bunde og fire statusfarver. Produkter kræver mange grå og meget få brandfarver.

### Kan en klar accent som lime virke i et techbrand?

Ja, især på mørke bunde. Brug den som fyld med mørk tekst ovenpå i stedet for som tekst på hvid, hvor den dumper på kontrast.