La palette cromatica di Red Hat è costituita da 10 famiglie di colori, ognuna delle quali include 7 colori singoli, oltre al bianco, al nero e ai grigi. Le famiglie di colori sono organizzate in 3 palette secondarie, a seconda di come dovranno essere usate: colori di base, colori secondari e colori ausiliari.

I singoli colori sono contraddistinti dal più chiaro al più scuro con un'etichetta numerica che inizia con il 10. I colori che appartengono a diverse famiglie e condividono lo stesso numero sono simili in termini di saturazione e valore, pertanto hanno un peso visivo simile.

I nostri colori di base sono quelli del logo Red Hat, ovvero i colori più strettamente associati al nostro marchio: il rosso, il nero e il bianco. Se non sai da dove iniziare, parti sempre dai nostri colori di base.

Il colore principale del nostro marchio è red-50, anche noto come rosso Red Hat. Con alcune eccezioni, ogni immagine di Red Hat dovrebbe includere il colore red-50, per ricollegarsi al nostro marchio.

Anche la grafica e le interfacce Red Hat si affidano molto al nero, al bianco e ai grigi come sfondi per consentire di mettere in risalto altri contenuti. Sono disponibili 10 sfumature di grigio neutro tra il bianco e il nero, che offrono flessibilità e permettono di creare profondità, ombre e modalità di colori chiari e scuri nelle interfacce utente.

Sfrutta lo spazio bianco

In linea con la personalità del nostro marchio, anche il linguaggio visivo di Red Hat enfatizza i layout con ampi spazi. Indipendentemente dai colori utilizzati nell'immagine, lo spazio bianco deve essere prioritario. I layout semplici e ordinati convogliano l'attenzione del destinatario sugli elementi principali.

Evidenza elementi mirati con il rosso

Il rosso è un colore energico. Non riempire gli spazi più estesi con il rosso Red Hat ma usa tocchi di rosso per richiamare l'attenzione sugli elementi grafici principali.

Se devi richiamare l'attenzione su un avviso importante o su un messaggio di errore, utilizza l'arancione danger e non il rosso Red Hat. Più avanti trovi altre informazioni sui colori di stato.

Usa sfumature più chiare e più scure per dare contrasto

Utilizza toni più chiari e più scuri di rosso, nero e bianco per creare ombre, contrasti o riempire grandi spazi, come gli sfondi. In questo modo, farai risaltare il rosso Red Hat.

Usa uno sfondo neutro con ampi spazi bianchi.

Usa il colore red-50 per evidenziare gli elementi importanti e richiamare l'attenzione del destinatario.

Non riempire un'intera illustrazione con il colore red-50. Il rosso è un colore energico. Prova a utilizzare uno sfondo neutro prima di riempire lo spazio con il rosso Red Hat.

Non utilizzare un tono di rosso più chiaro o più scuro come unico rosso dell'illustrazione. Includi sempre il rosso Red Hat.

Non utilizzare il red-50 per ogni componente di un design. Se tutti gli elementi sono in evidenza, nessuno di essi risalta.

Benché i colori di base siano i nostri elementi più riconoscibili, in alcune situazioni è necessario aggiungerne altri. La nostra palette dei colori secondari include 5 famiglie di colori: arancione, giallo, verde acqua, blu e viola.

Le illustrazioni Red Hat più riuscite si avvalgono di colori limitati e stilizzati, in questo modo restano semplici e consentono al rosso Red Hat di risaltare. In ogni progetto è possibile selezionare al massimo 2 famiglie di colori secondari da combinare con i nostri colori di base.

Se hai dei dubbi su come scegliere i colori secondari, puoi provare a usare una delle nostre raccolte di colori. Le famiglie utilizzate insieme in queste raccolte si integrano a vicenda; la loro combinazione mantiene l'aspetto del marchio Red Hat.

Utilizza al massimo due famiglie di colori secondari nelle tue illustrazioni. In questa, vengono utilizzati solo il rosso, l'arancione e il viola.

Non utilizzare più di due famiglie di colori secondari, perché l'insieme diventa troppo caotico.

Nell'illustrazione, includi sempre il rosso red-50 come contrasto per creare un collegamento al marchio Red Hat, anche se il logo è già presente nell'immagine.

Non creare risorse Red Hat utilizzando solo colori secondari.

Per evidenziare le differenze, nell'illustrazione utilizza combinazioni di colori chiari e scuri. In questi grafici sono utilizzati i colori red-50, blue-70 e orange-30.

Evita di utilizzare troppi colori della stessa saturazione nella stessa immagine, perché finirebbero per disturbare visivamente e non avere gerarchia.

Consenti alle parti più importanti dell'immagine di risaltare utilizzando colori meno vivaci per lo sfondo.

Non utilizzare i colori più vivaci come sfondo, possono risultare pesanti.

Oltre ai nostri colori di base e secondari, quando è necessario veicolare elementi e aspetti più specifici puoi usare due palette di colori ausiliari. Questi colori possono essere usati solo per le finalità previste e non come colori secondari.

Palette per le persone

Il nostro obiettivo è rappresentare le persone in maniera precisa e veridica, così come sono nella vita reale. Usiamo quindi tonalità di pelle realistiche, a prescindere dalla palette cromatica utilizzata per il resto dell'illustrazione. Scopri di più su come creare illustrazioni con persone.

Per ogni persona rappresentata, scegli una sola famiglia di tonalità di pelle. Le famiglie di tonalità di pelle vengono descritte in modo diverso rispetto ai colori tradizionali. Le tonalità fredde tendono ai rosa, mentre quelle calde tendono ai gialli e ai marroni.

Usa i colori della palette delle persone esclusivamente per le tonalità di pelle delle persone nelle illustrazioni.

Non usare i colori della palette per le persone per altre finalità.

Scegli tonalità calde o fredde per ogni persona rappresentata nell'illustrazione.

Non combinare tonalità calde e fredde per illustrare la stessa persona.

Palette per gli stati

Quando nelle nostre illustrazioni dobbiamo richiamare l'attenzione su un pericolo o su un successo, utilizziamo i colori per gli stati. Presenti in genere nelle interfacce, questi colori possono essere anche utilizzati in altre applicazioni, laddove necessario. Il colore Danger può essere usato solo per indicare che si è verificato un errore o un'altra problematica. Il colore Success può essere usato per indicare il corretto completamento di un'azione o di un evento.

Nota: in circostanze limitate, il colore Success può essere utilizzato se nel design è indispensabile inserire il verde, ad esempio per una community DEI o in un'illustrazione relativa alla sostenibilità.

Utilizza i colori della palette per gli stati esclusivamente per sottolineare informazioni rilevanti, come gli errori o i successi.

Non usare i colori della palette per gli stati per altri elementi dell'illustrazione.

Utilizza i colori di stato come contrasto per attirare l'attenzione.

Non usare un colore per gli stati come colore principale per lo sfondo di un'illustrazione.

In Red Hat siamo convinti che riuscire a realizzare esperienze e ambienti inclusivi sia fondamentale. Dedicarsi all'inclusività significa accertarsi che ogni risorsa Red Hat, che si tratti di diapositive di presentazioni, documenti, pagine web, interfacce di prodotto, post per social media e altro, sia accessibile a chiunque.

I colori hanno un ruolo essenziale nel rendere accessibili le risorse, perché incidono sul modo in cui chi ha problemi di vista percepisce ed elabora le informazioni. È quindi importante prendere decisioni informate su come applicare i colori ai tuoi lavori.

Il contrasto è misurato come il rapporto che indica la differenza di luminosità percepita tra i colori in primo piano e quelli sullo sfondo. Un contrasto basso può rendere difficile leggere o riconoscere gli elementi, soprattutto alle persone con problemi di vista. Le illustrazioni informative o quelle che comunicano informazioni cruciali per la comprensione dei contenuti devono rispettare gli standard delle Linee guida di accessibilità dei contenuti Web (WCAG) al livello AA per quanto riguarda il rapporto di contrasto.

Ciò significa che, per tutte le risorse Red Hat, i testi di piccole dimensioni (17 punti o meno) devono avere un rapporto di contrasto minimo di 4,5:1. I testi più grandi (18 punti o più) e le grafiche informative (come le icone) devono avere un rapporto di contrasto minimo di 3:1.

Puoi usare uno strumento come Adobe Color per misurare il rapporto di contrasto dei tuoi colori. Scopri di più sugli standard WCAG relativi ai rapporti di contrasto di testi e altri elementi grafici.

Le persone affette da daltonismo percepiscono in modo differente dagli altri le differenze di colore, con più difficoltà a distinguere tra elementi grafici caratterizzati esclusivamente dal colore, soprattutto nei grafici e nelle interfacce.

Le forme più diffuse di daltonismo sono le anomalie nella percezione delle tonalità rosso-verde (deuteranopia o protanopia) e nella percezione delle tonalità blu-giallo (tritanopia).

Se utilizzi solo il colore per trasmettere il tuo messaggio, le persone con questi difetti visivi potrebbero avere difficoltà a comprendere le tue illustrazioni. Puoi invece aggiungere al colore testi o icone, e scegliere colori con diversi livelli di saturazione per differenziare gli oggetti. Prova a simulare il daltonismo con lo strumento Color Oracle che mostra come appaiono i diversi colori alle persone con problemi di vista.

red-50 soddisfa gli standard di contrasto con il colore nero.

Bianco soddisfa gli standard di contrasto con il colore teal-60.

red-50 soddisfa gli standard per il contrasto con il colore blue-10.

Bianco soddisfa gli standard di contrasto con il colore purple-60.

red-50 non soddisfa gli standard di contrasto con il colore gray-80.

Bianco non soddisfa gli standard di contrasto con il colore teal-40.

red-50 non soddisfa gli standard di contrasto con il colore blue-70.

Bianco non soddisfa gli standard di contrasto con il colore purple-30.

Tutte le risorse e i sistemi di design di Red Hat condividono la stessa palette cromatica, ma in alcuni casi i colori vengono applicati in modi diversi, per soddisfare alcune esigenze specifiche.

Il colore nelle presentazioni

Una presentazione può spesso costituire la prima interazione di un cliente o di un partner con il marchio Red Hat. Deve quindi sempre avere l'aspetto di Red Hat e seguire le pratiche raccomandate per l'accessibilità. Il nostro modello di presentazione include le raccolte di colori suggerite.

Modello di presentazione Red Hat (sono necessarie le credenziali Red Hat)

Il colore nelle illustrazioni

Usiamo le illustrazioni per descrivere tecnologie o idee complesse. L'uso di una palette di colori di base con il rosso come colore a contrasto assicura che le illustrazioni mantengano l'aspetto di Red Hat, ma l'aggiunta di colori secondari può aiutare a creare il tono giusto per la storia.

Standard per le illustrazioni di Red Hat

Il colore nell'esperienza dell'utente

Per garantire agli utenti esperienze di visualizzazione ottimizzate per lo schermo, nei siti web di Red Hat la palette cromatica viene applicata tramite token di design e seguendo gli standard di accessibilità per il web.

Visita ux.redhat.com