# Fargepaletter for teknologi utover bedriftsblått

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

Blått signaliserer tillit, og det gjør alle andre teknologibedrifters blått også. Her er åtte paletter med fargekoder som fortsatt føles som programvare, og strukturen som får dem til å fungere i et produkt.

## The short version

- En fungerende fargepalett for teknologi har fem deler: mørk bakgrunn, lys bakgrunn, nøytral gråskala, én merkevareaksent og statusfarger.
- Blått dominerer teknologiprofilering fordi det virker rolig og pålitelig. Derfor gjør en blå aksent sjelden en teknologimerkevare gjenkjennelig alene.
- Aksenten er delen av teknologipaletten folk husker, så den bør være en farge kategorien ikke allerede har tatt.
- Statusfarger for suksess, advarsel og feil bør være konvensjonelle selv når merkevareaksenten er uvanlig, fordi brukerne handler ut fra dem.
- Alle tekst- og bakgrunnspar i en produktpalett bør oppfylle WCAG-kontrast, minst 4,5:1 for brødtekst.

En god **fargepalett for teknologi** handler mindre om én hovedfarge og mer om et system: mørk bakgrunn, lys bakgrunn, en skala med nøytrale gråtoner, én aksent som tilhører deg, og konvensjonelle farger for suksess, advarsel og feil. Bedriftsblått fyller aksentrollen hos så mange programvareselskaper at det ikke lenger betyr noe bestemt. Bytt aksenten til noe kategorien ikke har tatt, hold resten disiplinert, og merkevaren fremstår fortsatt som kompetent teknologi.

## Hvorfor teknologimerker stadig velger blått

Blått er trygt. Det virker rolig og pålitelig i de fleste markeder, ligger godt i grensesnitt og er nettets standardfarge for lenker. Dette er gode grunner, og resultatet er et hav av nesten like blåtoner i bankapper, skykontrollpaneler og produktivitetsverktøy. [Fargepsykologi](https://gradiently.design/nb/guide/color-psychology) forklarer assosiasjonene. Problemet er bare at alle handlet på dem samtidig.

Dette betyr ikke at blått er feil. Det betyr at blått ikke kan være eneste idé. Beholder du det, kombiner det med en uventet bakgrunn, en andre farge eller et særpreget materiale, så identiteten er gjenkjennelig selv uten logo.

## Åtte teknologipaletter med hex-koder

Hver palett har en bakgrunn, en støttetone og en aksent. De er skrevet som gradienter, så du ser hvordan fargene virker sammen. Deretter vises fargeprøver for de to som gjør mest arbeid i produktgrensesnitt.

- Nattblekk og syrlig lime: `linear-gradient(135deg, #0b1020 0%, #1e2a4a 55%, #c6f432 100%)`
- Grafitt og signaloransje: `linear-gradient(135deg, #111111 0%, #2b2b2b 50%, #ff5b2e 100%)`
- Papir og furu: `linear-gradient(135deg, #f6f3ee 0%, #e4ddd2 50%, #2f5d50 100%)`
- Midnattsfiolett og rosa: `linear-gradient(135deg, #0d0b1f 0%, #3b1d6e 50%, #ff6fb5 100%)`
- Dyp blågrønn og mint: `linear-gradient(135deg, #061a1c 0%, #0f4c4a 55%, #5ef2c8 100%)`
- Kjølig hvitt og elektrisk blått: `linear-gradient(135deg, #fafaf7 0%, #d9dde3 50%, #3344ff 100%)`
- Espresso og rav: `linear-gradient(135deg, #1a1410 0%, #4a3426 50%, #ffb547 100%)`
- Svart og myk gravmyrt: `linear-gradient(135deg, #0a0a0a 0%, #1f1f24 60%, #9b8cff 100%)`

Åtte utgangspunkter. Legg merke til hvor mye bakgrunnen gjør: samme aksent føles som et utviklerverktøy på svart og en rolig produktivitetsapp på papir.

- **Nattblekk og syrlig lime** passer til utviklerverktøy og infrastruktur: teknisk, nattlig og umulig å forveksle med en bank.
- **Grafitt og signaloransje** oppfattes som maskinvare, robotikk eller noe fysisk. Oransje fungerer også godt på mørke produktbilder.
- **Papir og furu** er det rolige valget for programvare til forskning, skriving og helse, der ro betyr mer enn fart.
- **Midnattsfiolett og rosa** passer til forbrukerapper og kreative verktøy som vil ha energi uten standardgradienten fra blått til lilla.
- **Dyp blågrønn og mint** fungerer for klima-, data- og fintech-merker som vil virke friske fremfor bedriftsaktige.
- **Kjølig hvitt og elektrisk blått** beholder blått, men gjør det livlig og særpreget med nesten ingenting rundt.
- **Espresso og rav** er varmt og uvanlig i teknologi, godt for programvare til serveringsbransjen, lyd og alt som setter mennesker først.
- **Svart og myk gravmyrt** er dempet og eksklusivt, nær uttrykket mange AI-produkter samler seg om.

- Nattblekk: #0b1020
- Skifermarine: #1e2a4a
- Tåkegrå: #8a94a8
- Sky: #eef1f6
- Syrlig lime: #c6f432

Nattblekk og syrlig lime som et brukbart sett: to bakgrunner, én mellomgrå til sekundærtekst og aksenten. Lime brukes til én knapp og ett høydepunkt per skjerm, aldri til brødtekst på hvitt.

## De fem delene av en produktpalett

Markedsføringssider kan klare seg med tre farger. Et produkt kan ikke det, fordi grensesnitt trenger kanter, deaktiverte tilstander, fremheving og varsler. Planlegg rollene før du velger toner, så paletten holder sammen når produktet vokser.

| Rolle | Hva den gjør | Eksempel |
| --- | --- | --- |
| Mørk bakgrunn | Appbakgrunn i mørk modus, bunntekster, toppseksjoner | `#0b1020` |
| Lys bakgrunn | Appbakgrunn i lys modus, dokumenter, e-post | `#fafaf7` |
| Nøytral skala | Tekst, kanter, skillelinjer og deaktiverte tilstander i 8 til 10 trinn | `#f2f4f7` til `#111827` |
| Merkevareaksent | Hovedknapper, lenker, det ene man skal trykke på | `#c6f432` |
| Statusfarger | Suksess, advarsel, feil, informasjon | Grønt, rav, rødt, blått |

Roller først, toner deretter. De fleste produkter trenger langt flere gråtoner enn merkevarefarger.

> **Hold statusfargene kjedelige** En uvanlig aksent er et merkevarevalg. En uvanlig feilfarge er et brukervennlighetsproblem. Rødt for feil og grønt for suksess bør være gjenkjennelig, selv om du justerer den nøyaktige tonen til aksenten.

## Gjør en teknologipalett til designtokener

Navngi farger etter rolle, ikke utseende. Et token kalt `--accent` tåler en ny profil. Et token kalt `--lime` blir en løgn den dagen aksenten endres. Definer hver rolle én gang for lys modus og én gang for mørk, og la komponentene bare vise 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;
  }
}
```

Rolletokener for begge moduser. Aksenten kan skifte mellom dem: elektrisk blått på hvitt og lime på nattblekk, så lenge begge føles som samme merkevare.

Mørk modus er der teknologipaletter vurderes, siden utviklere og avanserte brukere ofte lever der. [Design i mørk modus](https://gradiently.design/nb/guide/dark-mode-design) dekker detaljer som å løfte bakgrunnen litt fra rent svart og lysne statusfargene så de ikke vibrerer. Se [OKLCH-gradienter i CSS](https://gradiently.design/nb/guide/css-gradient-oklch) for gradienter som forblir livlige på moderne skjermer.

## Sjekk kontrasten før lansering

Klare aksenter som lime, mint og rav ser fine ut på mørke bakgrunner og svikter som tekst på hvitt. WCAG krever 4,5:1 for brødtekst og 3:1 for stor tekst og grensesnittelementer. Test alle par du vil bruke, og skriv ned hvilke kombinasjoner som er tillatt. [Fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility) gir hele metoden.

### Unngå

- Lime- eller minttekst på hvit side
- Aksent brukt til knapper, lenker, diagrammer og overskrifter samtidig
- Rent svart bakgrunn med rent hvit tekst overalt
- Statusfarger tilpasset merkevaren til rødt ser oransje ut

### Gjør

- Klare aksenter som fyll med mørk tekst over
- Én oppgave for aksenten: hovedhandlingen
- Litt løftet mørk bakgrunn og brukket hvit tekst
- Konvensjonelle statusfarger bare justert i tone

## Før paletten utover grensesnittet

Lanseringsinnlegg, konferansepresentasjoner og grafikk til endringslogger er der teknologipaletten blir en merkevare. Flate aksentfyll blir fort ensformige. Gi derfor markedsføringen en rikere overflate: bakgrunnsfargen med lys gjennom, korn og langsom drift av aksenten. [SaaS-profilering](https://gradiently.design/nb/guide/saas-startup-branding) og [fintech-profilering](https://gradiently.design/nb/guide/fintech-branding) viser dette i to svært ulike kategorier.

En liggende lanseringsgrafikk som sier publiserer på fire sekunder, nå i beta

Et lanseringsbilde i LinkedIns lenkestørrelse, 1200×627, der bakgrunnen bærer merkevaren og ordene er korte.

Et stående sosialt innlegg som annonserer versjon 3 av et programvareprodukt

Samme system som et stående innlegg i 1080×1350.

Her passer Gradiently inn. En Mark gir teknologimerkevaren en levende bakgrunn bare du kan eksportere med når du sikrer deg den. Den gjengis i alle størrelser fra lenkebilde til presentasjon og holder versjonsnytt lesbart ved å flytte sitt roligste område bak ordene. Du kan også be Designer om et lanseringsinnlegg, så lager den de andre størrelsene for deg.

## FAQ

### Hvilke farger passer best for et teknologiselskap?

Alle farger fungerer hvis paletten har tydelig struktur: to bakgrunner, en nøytral skala, én aksent og konvensjonelle statusfarger. Velg en aksent konkurrentene ikke allerede bruker.

### Hvorfor bruker så mange teknologiselskaper blått?

Blått virker rolig og pålitelig og ligger godt i grensesnitt. Siden mange valgte det av samme grunner, gjør en blå aksent sjelden merkevaren gjenkjennelig alene.

### Hvor mange farger bør en SaaS-palett ha?

Vanligvis én merkevareaksent, en nøytral gråskala på 8 til 10 trinn, to bakgrunner og fire statusfarger. Produkter trenger mange gråtoner og få merkevarefarger.

### Kan en klar aksent som lime fungere for et teknologimerke?

Ja, særlig på mørke bakgrunner. Bruk den som fyll med mørk tekst over, fremfor tekst på hvitt der kontrasten er for svak.