Cosa include una palette di colori del marchio?

Una palette assegna una funzione a ogni colore. Il colore principale è quello che le persone ricordano: compare nel logo e nei pulsanti principali. Un colore secondario lo supporta, un colore d’accento mette in risalto gli inviti all’azione, mentre un colore di sfondo e uno per il testo rendono la pagina armoniosa.

Il contrasto è importante tanto quanto l’estetica. Le Linee guida per l’accessibilità dei contenuti Web (WCAG) richiedono un rapporto di almeno 4.5:1 tra il testo normale e il suo sfondo, oppure di 7:1 per il livello AAA, più rigoroso.

Descrizione dello strumento

Descrivi il tuo marchio nel campo «Informazioni sul tuo marchio»: indica cosa fa, a chi si rivolge e quale sensazione dovrebbe trasmettere. Scegli una personalità del marchio (Professionale, Giocosa, Lussuosa, Minimalista, Audace o Naturale) oppure lascia selezionata l’opzione «Adatta alla descrizione»: l’AI la dedurrà dal tuo testo.

Otterrai cinque colori con nome: Principale, Secondario, Accento, Sfondo e Testo. Il formato di output consente di visualizzarne i valori in HEX, RGB, HSL, CMYK e altri formati; ogni colore ha un pulsante di copia. La guida all’uso spiega come usare ciascun colore, mentre le variabili CSS forniscono un blocco da incollare in un foglio di stile. All’AI viene chiesto di mantenere un rapporto di contrasto di almeno 7:1 tra il testo e lo sfondo e di almeno 3:1 per i colori principale e d’accento.

Esempio

Per «Una torrefazione di quartiere a Portland. Accogliente, calorosa e sostenibile», potresti ottenere un marrone tostato come colore principale, uno sfondo color crema e un accento terracotta, con variabili CSS come queste:

:root {
  --brand-primary: #5b3a29;
  --brand-secondary: #a47551;
  --brand-accent: #d9643a;
  --brand-background: #faf6f0;
  --brand-text: #2b211c;
}

Funzionalità

  • Cinque colori con funzioni chiare, un nome e una nota d’uso per ciascuno
  • Sei personalità, oppure una scelta in base alla descrizione
  • Copia i colori nel formato che ti serve oppure l’intero insieme come variabili CSS

Limitazioni

Lo strumento non misura direttamente il contrasto: prima di pubblicare, verifica il rapporto tra il testo e lo sfondo con uno strumento di controllo del contrasto.