# Färgpaletter för teknik bortom företagsblått

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

Blått säger pålitligt, och det gör varje annat techbolags blått också. Här är åtta paletter med riktiga koder som fortfarande känns som mjukvara, och strukturen som får vilken som helst av dem att fungera i en produkt.

## The short version

- En fungerande färgpalett för teknik har fem delar: en mörk botten, en ljus botten, en neutral gråskala, en varumärkesaccent och en uppsättning statusfärger.
- Blått dominerar varumärken inom teknik eftersom det läses som lugnt och pålitligt, vilket är precis varför en blå accent sällan gör ett techvarumärke igenkännbart i sig.
- Accenten är den del av en techpalett som folk minns, så den bör vara en färg som din kategori inte redan äger.
- Statusfärger för lyckat, varning och fel bör förbli konventionella även när varumärkesaccenten är ovanlig, eftersom användare förlitar sig på dem för att agera.
- Varje kombination av text och bakgrund i en produktpalett bör uppfylla WCAG-kontrast, minst 4,5:1 för brödtext.

En bra **färgpalett för teknik** handlar mindre om en hjältefärg och mer om ett system: en mörk botten, en ljus botten, en gråskala av neutrala toner, en accent som tillhör dig och konventionella färger för lyckat, varning och fel. Företagsblått fyller accentplatsen hos så många mjukvaruföretag att det har slutat betyda något särskilt. Byt ut accenten mot något din kategori inte äger, håll resten disciplinerat, så läses varumärket fortfarande som kompetent teknik.

## Därför väljer techvarumärken blått hela tiden

Blått är säkert. Det läses som lugnt och pålitligt på de flesta marknader, det sitter bra i gränssnitt och det är webbens standardfärg för länkar. Det är goda skäl, och resultatet är ett hav av nästan identiska blå nyanser i bankappar, molninstrumentpaneler och produktivitetsverktyg. [Färgpsykologi](https://gradiently.design/sv/guide/color-psychology) förklarar associationerna, och problemet är helt enkelt att alla agerade på dem på en gång.

Inget av detta betyder att blått är fel. Det betyder att blått inte kan vara din enda idé. Behåller du det, para det med en oväntad botten, en andra färg eller ett särpräglat material, så att identiteten går att känna igen även utan logotypen.

## Åtta färgpaletter för teknik med hexkoder

Varje palett nedan har en botten, en stödjande ton och en accent. De är skrivna som gradienter så att du ser hur färgerna beter sig tillsammans, och sedan uppdelade i färgprover för de två som jobbar hårdast i produktens gränssnitt.

- Nattsvart bläck och syragrön lime: `linear-gradient(135deg, #0b1020 0%, #1e2a4a 55%, #c6f432 100%)`
- Grafit och signalorange: `linear-gradient(135deg, #111111 0%, #2b2b2b 50%, #ff5b2e 100%)`
- Papper och tall: `linear-gradient(135deg, #f6f3ee 0%, #e4ddd2 50%, #2f5d50 100%)`
- Midnattsviolett och rosa: `linear-gradient(135deg, #0d0b1f 0%, #3b1d6e 50%, #ff6fb5 100%)`
- Djup teal och mint: `linear-gradient(135deg, #061a1c 0%, #0f4c4a 55%, #5ef2c8 100%)`
- Kallvitt och elektriskt blått: `linear-gradient(135deg, #fafaf7 0%, #d9dde3 50%, #3344ff 100%)`
- Espresso och bärnsten: `linear-gradient(135deg, #1a1410 0%, #4a3426 50%, #ffb547 100%)`
- Svart och mjuk blåviol: `linear-gradient(135deg, #0a0a0a 0%, #1f1f24 60%, #9b8cff 100%)`

Åtta utgångspunkter. Lägg märke till hur mycket jobb bottnen gör: samma accent känns som ett utvecklarverktyg på svart och som en lugn produktivitetsapp på papper.

- **Nattsvart bläck och syragrön lime** passar utvecklarverktyg och infrastruktur: tekniskt, nattligt, omöjligt att förväxla med en bank.
- **Grafit och signalorange** läses som hårdvara, robotik eller allt fysiskt. Orange bär också bra på mörk produktfotografering.
- **Papper och tall** är det stilla alternativet för forskning, skrivande och hälsomjukvara, där lugn betyder mer än fart.
- **Midnattsviolett och rosa** passar konsumentappar och kreativa verktyg som vill ha energi utan standardgradienten från blått till lila.
- **Djup teal och mint** fungerar för klimat-, data- och fintechvarumärken som vill kännas fräscha snarare än företagsmässiga.
- **Kallvitt och elektriskt blått** behåller blått men gör det levande och unikt, med nästan inget annat runt omkring.
- **Espresso och bärnsten** är varmt och ovanligt inom teknik, bra för mjukvara för restaurang och hotell, ljud och allt som sätter människan först.
- **Svart och mjuk blåviol** är återhållet och exklusivt, nära det utseende som många AI-produkter närmar sig.

- Nattsvart bläck: #0b1020
- Skifferblå: #1e2a4a
- Dimgrå: #8a94a8
- Moln: #eef1f6
- Syragrön lime: #c6f432

Nattsvart bläck och syragrön lime som en fungerande uppsättning: två bottnar, en mellangrå för sekundär text och accenten. Limen används för en knapp och en höjdpunkt per skärm, aldrig för brödtext på vitt.

## Produktpalettens fem delar

Marknadsföringssidor klarar sig med tre färger. En produkt gör inte det, eftersom gränssnitt behöver kantlinjer, inaktiverade tillstånd, markeringar och varningar. Planera de här rollerna innan du väljer nyanser, så förblir paletten sammanhängande medan produkten växer.

| Roll | Vad den gör | Exempel |
| --- | --- | --- |
| Mörk botten | Appbakgrund i mörkt läge, sidfötter, herosektioner | `#0b1020` |
| Ljus botten | Appbakgrund i ljust läge, dokument, e-post | `#fafaf7` |
| Neutral skala | Text, kantlinjer, avdelare, inaktiverade tillstånd, i 8 till 10 steg | `#f2f4f7` till `#111827` |
| Varumärkesaccent | Primära knappar, länkar, det enda man ska trycka på | `#c6f432` |
| Statusfärger | Lyckat, varning, fel, information | Grönt, bärnsten, rött, blått |

Roller först, nyanser sedan. De flesta produkter behöver långt fler gråtoner än varumärkesfärger.

> **Håll statusfärgerna tråkiga** En ovanlig accent är ett varumärkesbeslut. En ovanlig felfärg är ett användbarhetsproblem. Rött för fel och grönt för lyckat bör förbli igenkännbara, även om du justerar den exakta nyansen så att den passar din accent.

## Göra en techpalett till designtokens

Namnge färger efter roll, inte efter utseende. En token som heter `--accent` överlever en omprofilering, medan en token som heter `--lime` blir en lögn den dag accenten ändras. Definiera varje roll en gång för ljust läge och en gång för mörkt läge, och låt komponenter bara hänvisa till 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;
  }
}
```

Roll-tokens för båda lägena. Accenten kan växla mellan lägena: elektriskt blått på vitt, lime på nattsvart bläck, så länge båda känns som samma varumärke.

Mörkt läge är där techpaletter bedöms, eftersom utvecklare och avancerade användare ofta lever i det. [Design för mörkt läge](https://gradiently.design/sv/guide/dark-mode-design) tar upp detaljerna, som att lyfta bottnen en aning från rent svart och göra statusfärgerna ljusare så att de inte vibrerar. För gradienter som förblir levande på moderna skärmar är [oklch-gradienter i CSS](https://gradiently.design/sv/guide/css-gradient-oklch) värda en titt.

## Kontrollera kontrasten innan du släpper

Klara accenter som lime, mint och bärnsten ser underbara ut på mörka bottnar och underkänns som text på vitt. WCAG ber om 4,5:1 för brödtext och 3:1 för stor text och gränssnittselement. Testa varje kombination du planerar att använda och skriv ner vilka kombinationer som är tillåtna. [Färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility) har hela metoden.

### Undvik

- Lime- eller minttext på en vit sida
- En accent som används till knappar, länkar, diagram och rubriker på en gång
- En rent svart botten med rent vit text överallt
- Statusfärger som böjts efter varumärket tills rött ser orange ut

### Gör så här

- Klara accenter som fyllning med mörk text ovanpå
- Ett jobb för accenten: den primära åtgärden
- En något lyft mörk botten och en benvit text
- Konventionella statusfärger som bara justerats i nyans

## Ta paletten bortom gränssnittet

Lanseringsinlägg, konferensbilder och grafik till ändringsloggar är där en techpalett blir ett varumärke. Platta fyllningar av accenten blir snabbt upprepande, så ge marknadssidan en rikare yta: bottenfärgen med ljus som kommer igenom, korn, en långsam förskjutning av accenten. [Varumärke för SaaS](https://gradiently.design/sv/guide/saas-startup-branding) och [varumärke för fintech](https://gradiently.design/sv/guide/fintech-branding) visar hur det spelar ut sig i två mycket olika kategorier.

En liggande lanseringsgrafik som tillkännager driftsättning på fyra sekunder, nu i beta

En lanseringsbild i LinkedIns länkstorlek, 1200×627, där bakgrunden bär varumärket och orden hålls korta.

Ett stående inlägg i sociala medier som tillkännager version 3 av en mjukvaruprodukt

Samma system som ett stående flödesinlägg i 1080×1350.

Här passar Gradiently in. En Mark ger ett techvarumärke en levande bakgrund som bara du kan exportera med när du har säkrat den, renderas i varje storlek från en länkbild till en bild i ett bildspel och håller versionsnoteringar läsbara genom att flytta sin lugnaste yta bakom orden. Du kan också be Designer om ett lanseringsinlägg, så gör den de andra storlekarna åt dig.

## FAQ

### Vilka färger är bäst för ett techbolag?

Vilken färg som helst fungerar om paletten har en tydlig struktur: två bottnar, en neutral skala, en accent och konventionella statusfärger. Välj en accent som dina konkurrenter inte redan använder.

### Varför använder så många techbolag blått?

Blått läses som lugnt och pålitligt och sitter bra i gränssnitt. Eftersom så många företag valde det av samma skäl gör en blå accent ensam sällan ett varumärke igenkännbart.

### Hur många färger ska en SaaS-palett ha?

Oftast en varumärkesaccent, en neutral gråskala i 8 till 10 steg, två bottnar och fyra statusfärger. Produkter behöver många gråtoner och mycket få varumärkesfärger.

### Kan en klar accent som lime fungera i ett techvarumärke?

Ja, särskilt på mörka bottnar. Använd den som fyllning med mörk text ovanpå i stället för som text på vitt, där den underkänns i kontrast.