# Palette di colori per la tecnologia oltre il blu aziendale

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

Il blu dice affidabile, e lo dice anche il blu di ogni altra azienda tech. Ecco otto palette con codici reali che sanno ancora di software, e la struttura che le fa funzionare in un prodotto.

## The short version

- Una palette tech funzionante ha cinque parti: un fondo scuro, un fondo chiaro, una scala di grigi neutri, un accento del brand e un insieme di colori di stato.
- Il blu domina il branding tecnologico perché appare calmo e affidabile, ed è proprio per questo che un accento blu raramente rende riconoscibile da solo un brand tech.
- L’accento è la parte di una palette tech che le persone ricordano, quindi dovrebbe essere un colore che la tua categoria non possiede già.
- I colori di stato per successo, avviso ed errore dovrebbero restare convenzionali anche quando l’accento del brand è insolito, perché gli utenti ci contano per agire.
- Ogni abbinamento di testo e sfondo in una palette di prodotto dovrebbe rispettare il contrasto WCAG, almeno 4,5:1 per il testo normale.

Una buona **palette di colori tech** riguarda meno un colore protagonista e più un sistema: un fondo scuro, un fondo chiaro, una scala di grigi neutri, un accento che ti appartiene e colori convenzionali per successo, avviso ed errore. Il blu aziendale riempie lo slot dell’accento per così tante software house che ha smesso di significare qualcosa di preciso. Sostituisci l’accento con qualcosa che la tua categoria non possiede, mantieni il resto disciplinato, e il brand si leggerà comunque come tecnologia competente.

## Perché i brand tech continuano a scegliere il blu

Il blu è sicuro. Appare calmo e affidabile nella maggior parte dei mercati, sta bene nelle interfacce ed è il colore predefinito dei link sul web. Sono buoni motivi, e il risultato è un mare di blu quasi identici tra app bancarie, dashboard cloud e strumenti di produttività. [La psicologia del colore](https://gradiently.design/it/guide/color-psychology) spiega le associazioni; il problema è semplicemente che tutti ci hanno agito allo stesso tempo.

Niente di tutto questo significa che il blu sia sbagliato. Significa che il blu non può essere la tua unica idea. Se lo tieni, abbinalo a un fondo inaspettato, a un secondo colore o a un materiale distintivo, così l’identità è riconoscibile anche togliendo il logo.

## Otto palette di colori tech con codici hex

Ogni palette qui sotto ha un fondo, un tono di supporto e un accento. Sono scritte come sfumature così puoi vedere come i colori si comportano insieme, poi scomposte in campioni per le due che lavorano di più nell’interfaccia del prodotto.

- Inchiostro notte e lime acido: `linear-gradient(135deg, #0b1020 0%, #1e2a4a 55%, #c6f432 100%)`
- Grafite e arancio segnale: `linear-gradient(135deg, #111111 0%, #2b2b2b 50%, #ff5b2e 100%)`
- Carta e pino: `linear-gradient(135deg, #f6f3ee 0%, #e4ddd2 50%, #2f5d50 100%)`
- Viola mezzanotte e rosa: `linear-gradient(135deg, #0d0b1f 0%, #3b1d6e 50%, #ff6fb5 100%)`
- Teal profondo e menta: `linear-gradient(135deg, #061a1c 0%, #0f4c4a 55%, #5ef2c8 100%)`
- Bianco freddo e blu elettrico: `linear-gradient(135deg, #fafaf7 0%, #d9dde3 50%, #3344ff 100%)`
- Caffè e ambra: `linear-gradient(135deg, #1a1410 0%, #4a3426 50%, #ffb547 100%)`
- Nero e pervinca tenue: `linear-gradient(135deg, #0a0a0a 0%, #1f1f24 60%, #9b8cff 100%)`

Otto punti di partenza. Nota quanto lavoro fa il fondo: lo stesso accento sembra uno strumento per sviluppatori sul nero e un’app di produttività calma sulla carta.

- **Inchiostro notte e lime acido** va bene per strumenti per sviluppatori e infrastrutture: tecnico, notturno, impossibile da confondere con una banca.
- **Grafite e arancio segnale** si legge come hardware, robotica o qualsiasi cosa fisica. L’arancio regge bene anche sulla fotografia di prodotto scura.
- **Carta e pino** è l’opzione discreta per ricerca, scrittura e software per la salute, dove la calma conta più della velocità.
- **Viola mezzanotte e rosa** si adatta ad app per i consumatori e strumenti creativi che vogliono energia senza la solita sfumatura da blu a viola.
- **Teal profondo e menta** funziona per brand di clima, dati e fintech che vogliono sembrare freschi invece che aziendali.
- **Bianco freddo e blu elettrico** mantiene il blu ma lo rende vivido e singolare, con quasi nient’altro attorno.
- **Caffè e ambra** è caldo e insolito nella tecnologia, ottimo per software per l’ospitalità, audio e tutto ciò che mette prima le persone.
- **Nero e pervinca tenue** è sobrio e premium, vicino all’aspetto verso cui stanno convergendo molti prodotti di IA.

- Inchiostro notte: #0b1020
- Blu ardesia: #1e2a4a
- Grigio nebbia: #8a94a8
- Nuvola: #eef1f6
- Lime acido: #c6f432

Inchiostro notte e lime acido come set di lavoro: due fondi, un grigio medio per il testo secondario e l’accento. Il lime si usa per un pulsante e un’evidenziazione per schermata, mai per il testo normale su bianco.

## Le cinque parti di una palette di prodotto

Le pagine di marketing possono cavarsela con tre colori. Un prodotto no, perché le interfacce hanno bisogno di bordi, stati disattivati, evidenziazioni e avvisi. Pianifica questi ruoli prima di scegliere le tonalità, e la palette resta coerente man mano che il prodotto cresce.

| Ruolo | Cosa fa | Esempio |
| --- | --- | --- |
| Fondo scuro | Sfondo dell’app in modalità scura, piè di pagina, sezioni hero | `#0b1020` |
| Fondo chiaro | Sfondo dell’app in modalità chiara, documenti, email | `#fafaf7` |
| Scala neutra | Testo, bordi, divisori, stati disattivati, in 8-10 passi | da `#f2f4f7` a `#111827` |
| Accento del brand | Pulsanti principali, link, l’unica cosa da premere | `#c6f432` |
| Colori di stato | Successo, avviso, errore, informazione | Verde, ambra, rosso, blu |

Prima i ruoli, poi le tonalità. La maggior parte dei prodotti ha bisogno di molti più grigi che colori del brand.

> **Tieni noiosi i colori di stato** Un accento insolito è una decisione di brand. Un colore di errore insolito è un problema di usabilità. Il rosso per gli errori e il verde per il successo devono restare riconoscibili, anche se ne regoli la tonalità esatta per farli convivere con il tuo accento.

## Trasformare una palette tech in design token

Dai ai colori il nome del ruolo, non dell’aspetto. Un token chiamato `--accent` sopravvive a un rebranding; uno chiamato `--lime` diventa una bugia il giorno in cui l’accento cambia. Definisci ogni ruolo una volta per la modalità chiara e una per la modalità scura, e lascia che i componenti facciano riferimento solo ai ruoli.

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

Token di ruolo per entrambe le modalità. L’accento può cambiare tra le modalità: blu elettrico su bianco, lime su inchiostro notte, purché entrambi sembrino lo stesso brand.

La modalità scura è dove le palette tech vengono giudicate, dato che sviluppatori e utenti esperti spesso ci vivono. [Il design della modalità scura](https://gradiently.design/it/guide/dark-mode-design) tratta i dettagli, come alzare un po’ il fondo dal nero puro e schiarire i colori di stato perché non vibrino. Per sfumature che restano vivide sugli schermi moderni, vale la pena dare un’occhiata alle [sfumature OKLCH in CSS](https://gradiently.design/it/guide/css-gradient-oklch).

## Controlla il contrasto prima di pubblicare

Accenti brillanti come lime, menta e ambra sono splendidi sui fondi scuri e falliscono come testo su bianco. Le WCAG chiedono 4,5:1 per il testo normale e 3:1 per il testo grande e gli elementi dell’interfaccia. Prova ogni abbinamento che pensi di usare e annota quali combinazioni sono permesse. [Contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility) ha il metodo completo.

### Da evitare

- Testo lime o menta su una pagina bianca
- Un accento usato per pulsanti, link, grafici e titoli insieme
- Fondo nero puro con testo bianco puro ovunque
- Colori di stato piegati al brand finché il rosso sembra arancio

### Da fare

- Accenti brillanti come riempimenti con testo scuro sopra
- Un solo compito per l’accento: l’azione principale
- Un fondo scuro leggermente alzato e un testo bianco sporco
- Colori di stato convenzionali regolati solo nella tonalità

## Portare la palette oltre l’interfaccia

I post di lancio, le slide delle conferenze e le grafiche dei changelog sono dove una palette tech diventa un brand. I riempimenti piatti dell’accento diventano ripetitivi in fretta, quindi dai al lato marketing una superficie più ricca: il colore del fondo con la luce che ci passa attraverso, la grana, una lenta deriva dell’accento. [Il branding SaaS](https://gradiently.design/it/guide/saas-startup-branding) e [il branding fintech](https://gradiently.design/it/guide/fintech-branding) mostrano come funziona in due categorie molto diverse.

Grafica orizzontale di lancio che annuncia deploy in quattro secondi, ora in beta

Un’immagine di lancio alla misura dell’anteprima di un link LinkedIn, 1200×627, dove lo sfondo porta il brand e le parole restano brevi.

Post social verticale che annuncia la versione 3 di un prodotto software

Lo stesso sistema come post verticale per il feed a 1080×1350.

Qui entra in gioco Gradiently. Un Mark dà a un brand tech uno sfondo vivo con cui solo tu puoi esportare una volta riservato, si rende a ogni misura da un’immagine per un link a una slide, e mantiene leggibili le note di rilascio spostando la sua zona più calma dietro le parole. Puoi anche chiedere al Designer un post di lancio e lui crea per te le altre misure.

## FAQ

### Quali sono i colori migliori per un’azienda tech?

Va bene qualsiasi colore se la palette ha una struttura chiara: due fondi, una scala neutra, un accento e colori di stato convenzionali. Scegli un accento che i tuoi concorrenti non usano già.

### Perché così tante aziende tech usano il blu?

Il blu appare calmo e affidabile e sta bene nelle interfacce. Dato che tante aziende lo hanno scelto per gli stessi motivi, un accento blu da solo raramente rende riconoscibile un brand.

### Quanti colori deve avere una palette SaaS?

Di solito un accento del brand, una scala di grigi neutri da 8 a 10 passi, due fondi e quattro colori di stato. I prodotti hanno bisogno di molti grigi e di pochissimi colori del brand.

### Un accento brillante come il lime può funzionare in un brand tech?

Sì, soprattutto sui fondi scuri. Usalo come riempimento con testo scuro sopra, non come testo su bianco, dove non supera il contrasto.