- Templates
- Additional resources
-
Digital design system
External link -
PatternFly
External link -
Work Your Way
External link
Colore
I colori non servono solo per rendere più piacevole ciò che comunichi, ma incidono sul modo in cui il tono e la rilevanza del messaggio vengono percepiti dal pubblico. Con il rosso come base, la nostra palette di colori concilia il pragmatismo con la personalità del nostro marchio, stimolando i destinatari all'interazione.
Non un rosso qualsiasi
Ogni marchio ha un colore identificabile, ma pochi hanno un colore associato in modo così inscindibile alla propria identità. Il rosso ha un ruolo speciale nella storia di Red Hat, fin dalle sue origini perché rappresenta la nostra passione per la collaborazione e per l'aiuto offerto agli altri.
Il rosso Red Hat è un rosso puro, senza l'aggiunta del blu né del verde.
#ee0000
RGB 238, 0, 0
CMYK 0, 98, 85, 0 Pantone 1788 C
Anche noto come red-50, il nostro rosso richiama l'attenzione e va quindi usato con cautela. Alcuni tocchi di rosso Red Hat rendono riconoscibile il nostro marchio, evidenziando gli elementi importanti senza sovrastare il resto.
Colori di base
Quando creiamo qualcosa che deve essere inequivocabilmente riconosciuto come Red Hat, applichiamo i nostri colori di base, quelli che sono nel nostro logo e strettamente associati al nostro marchio. Tonalità e ombreggiature di rosso e di grigio neutro garantiscono la flessibilità che serve per creare profondità e ombre.
Colori secondari
La nostra palette di colori secondari aggiunge energia e completa il rosso Red Hat senza competere con esso. Per ottenere illustrazioni più incisive, non utilizzare più di due colori secondari oltre al rosso Red Hat.
Sfumature
Le sfumature servono per aggiungere profondità e intensità ai contrasti e alle campiture degli sfondi. Nella composizione, tuttavia, non devono mai essere al centro dell'attenzione: devono migliorare il contesto, non risaltare.
Come usiamo il colore
Per mantenere l'aspetto Red Hat di ogni risorsa, non basta applicare i colori della nostra palette. Anche la quantità e la posizione di ogni colore utilizzato sono molti importanti. I seguenti concetti di base ti permettono di utilizzare i colori in modo coerente.
Semplifica
Usa colori limitati e stilizzati. La semplificazione e l'uso di ampi spazi bianchi evidenziano il messaggio e richiamano l'attenzione sulle informazioni importanti.
Evidenza elementi mirati con il rosso
Il rosso Red Hat è un colore energico. Non riempire di rosso tutto lo spazio, ma usa tocchi di rosso per richiamare l'attenzione sugli elementi importanti della composizione.
Crea equilibrio
Riempi oggetti di grandi dimensioni e sfondi con tonalità più lievi, ombre più scure e sfumature non accentuate. Usa con parsimonia i valori di colore più saturi, per evidenziare un elemento, semplificare la navigazione o aggiungere intensità.
Considera la fonte dei colori
Osserva la composizione nel complesso, prestando attenzione ai colori di tutti gli elementi e valutando come funzionano insieme e dove indirizzano l'attenzione.
Raccolte di colori
Per semplificare la scelta dei colori che funzionano meglio insieme, Red Hat ha creato delle raccolte di colori che combinano in vari modi i colori delle palette. Inizia ogni tuo progetto con una di queste raccolte.
Per informazioni più specifiche sui colori da utilizzare per le interfacce utente, visita ux.redhat.com (per la progettazione web) e PatternFly (per la progettazione dei prodotti).
Per informazioni più specifiche sui colori da utilizzare per le interfacce utente, visita ux.redhat.com (per la progettazione web) e PatternFly (per la progettazione dei prodotti).
Cose da evitare
Non utilizzare colori diversi da quelli della nostra palette di colori.
Non riempire tutto lo spazio con il rosso Red Hat (red-50). Il rosso è un colore energico, è meglio usarlo solo per aggiungere tocchi di colore.
Non utilizzare più di due colori secondari in un'unica immagine. Meno colori ci sono, meglio è.
Non dimenticarti di utilizzare il rosso Red Hat (red-50). Ogni risorsa Red Hat deve includere il colore red-50.
Non usare colori che non garantiscono l'accessibilità a tutti. Verifica sempre il rapporto di contrasto tra il testo, gli altri elementi e il colore dello sfondo.
Evita di applicare troppe sfumature. Utilizzale solo per dare più profondità e intensità all'illustrazione.
Colori ausiliari
Oltre ai nostri colori di base e secondari, quando è necessario 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 informazioni
La palette di colori per le informazioni è destinata esclusivamente agli stati e alle interazioni. È una palette funzionale e non decorativa. Puoi usare questi colori nelle interfacce, nelle pagine web, nei grafici e nei diagrammi, nei report e in altre illustrazioni informative.
Palette per le persone
Il nostro obiettivo è rappresentare le persone così come sono nella vita reale. Usa i colori di questa palette solo per le tonalità di pelle delle persone nelle illustrazioni. Per ogni persona rappresentata, scegli una sola famiglia di tonalità di pelle. Scopri di più su come creare illustrazioni con persone.
Usare il colore per fornire il contesto
Il colore consente di comunicare con rapidità un messaggio o un'informazione. Nelle interfacce utente, nelle presentazioni, nelle infografiche e nei grafici usiamo associazioni di colori la cui comprensione è assodata, in modo da offrire al consumatore un percorso uniforme.
| Colore | Associazione | Altre informazioni |
| Red Hat | Il rosso è il colore del marchio Red Hat. Non utilizzarlo per rappresentare aspetti negativi. | |
| Pericolo, diminuzione | Segnala un evento negativo, come un errore grave o la diminuzione di un valore. | |
| Attenzione | Segnala un evento o un errore non grave. | |
| Attenzione | Segnala la necessità di agire per evitare azioni o errori gravi. | |
| Riuscita, incremento | Segnala qualcosa di positivo, come la riuscita di un'azione o l'incremento di un valore. | |
| Collegamento o interazione | Facendo clic sull'oggetto o sul testo l'utente viene indirizzato a un collegamento ipertestuale o alla modifica di uno stato. | |
| Informazione o suggerimento | Segnala la disponibilità di informazioni utili. | |
| Neutro | Segnala un pulsante o un'informazione non disponibile o non importante. |
Campioni di colore
La palette cromatica di Red Hat è costituita da 11 famiglie di colori. 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 e hanno un peso visivo simile.
Fai clic sui campioni di colore seguenti per copiare il codice esadecimale negli appunti, oppure scarica i file dei campioni di colore.
I colori del nostro marchio
Sono i colori che utilizziamo per rappresentare il marchio Red Hat e garantirne il riconoscimento.
Palette di base
red-10
#fce3e3
red-20
#fbc5c5
red-30
#f9a8a8
red-40
#f56e6e
red-50
(rosso Red Hat)
#ee0000
RGB 238 0 0
CMYK 0 98 85 0
Pantone 1788C
red-60
#a60000
red-70
#5f0000
red-80
#3f0000
bianco
#ffffff
RGB 255 255 255
CMYK 0 0 0 0
Pantone White
gray-10
#f2f2f2
gray-20
#e0e0e0
gray-30
#c7c7c7
gray-40
#a3a3a3
gray-50
#707070
gray-60
#4d4d4d
gray-70
#383838
gray-80
#292929
gray-90
#1f1f1f
gray-95
(nero per esperienza utente)
#151515
nero
#000000
RGB 0 0 0
CMYK 60 40 40 100
Pantone Black C
Palette dei colori secondari
orange-10
#ffe8cc
orange-20
#fccb8f
orange-30
#f8ae54
orange-40
#f5921b
RGB 245 146 27
CMYK 0 50 100 0
Pantone 144C
#ca6c0f
orange-60
#9e4a06
orange-70
#732e00
orange-80
#4d1f00
yellow-10
#fff4cc
yellow-20
#ffe072
yellow-30
#ffcc17
RGB 248 204 23
CMYK 0 15 100 0
Pantone 108C
yellow-40
#dca614
yellow-50
#b98412
yellow-60
#96640f
yellow-70
#73480b
yellow-80
#54330b
teal-10
#daf2f2
teal-20
#b9e5e5
teal-30
#9ad8d8
teal-40
#63bdbd
teal-50
#37a3a3
RGB 55 163 163
CMYK 80 10 30 10
Pantone 2234C
teal-60
#147878
teal-70
#004d4d
teal-80
#003333
purple-10
#ece6ff
purple-20
#d0c5f4
purple-30
#b6a6e9
purple-40
#876fd4
purple-50
#5e40be
RGB 94 64 190
CMYK 85 80 0 0
Pantone 2097C
purple-60
#3d2785
purple-70
#21134d
purple-80
#1b0d33
Colori ausiliari
Palette per le informazioni
Questi colori sono funzionali, non decorativi e vanno utilizzati esclusivamente per la finalità prevista.
success-green-10
#e9f7df
success-green-20
#d1f1bb
success-green-30
#afdc8f
success-green-40
#87bb62
success-green-50
#63993d
RGB 99 153 61
CMYK 70 0 100 10
Pantone 7737C
success-green-60
#3d7317
success-green-70
#204d00
danger-orange-10
#ffe3d9
danger-orange-20
#fbbea8
danger-orange-30
#f89b78
danger-orange-40
#f4784a
danger-orange-50
#f0561d
RGB 240 86 29
CMYK 0 83 100 0
Pantone 165C
danger-orange-60
#b1380b
danger-orange-70
#731f00
interaction-blue-10
#e0f0ff
interaction-blue-20
#b9dafc
interaction-blue-30
#92c5f9
interaction-blue-40
#4394e5
interaction-blue-50
#0066cc
RGB 0 102 204
CMYK 85 55 0 5
Pantone 2387C
interaction-blue-60
#004d99
interaction-blue-70
#003366
Palette per le persone
Le famiglie di tonalità di pelle vengono descritte in modo diverso rispetto alle associazioni di colore tradizionali. Le tonalità fredde tendono ai rosa, mentre quelle calde tendono ai gialli e ai marroni. Scopri di più su come creare illustrazioni con persone.
cool-tone-10
#ffe3dc
cool-tone-20
#f7c8bb
cool-tone-30
#e8a997
cool-tone-40
#ce8873
cool-tone-50
#a66552
cool-tone-60
#724335
cool-tone-70
#40251d
warm-tone-10
#ffe9dc
warm-tone-20
#f9d5c0
warm-tone-30
#edbea1
warm-tone-40
#d8a381
warm-tone-50
#b88564
warm-tone-60
#8e6549
warm-tone-70
#664934
Accessibilità
Essere aperti e collaborativi significa riuscire a realizzare esperienze eque e inclusive. Ogni risorsa Red Hat, che si tratti di diapositive di presentazioni, pagine web, interfacce di prodotto, post per social media e altro, deve essere 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.
Contrasto
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.
Per 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.
red-50 soddisfa gli standard di contrasto con il colore nero.
bianco soddisfa gli standard di contrasto con il colore teal-60.
nero soddisfa gli standard di contrasto con il colore red-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.
nero non soddisfa gli standard di contrasto con il colore red-60.
bianco non soddisfa gli standard di contrasto con il colore purple-30.
Daltonismo
Le persone affette da daltonismo percepiscono in modo differente dagli altri le differenze di colore e possono avere maggiori difficoltà a distinguere gli elementi visivi 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 non comprendere le tue illustrazioni. Puoi invece aggiungere al colore testi o icone, e scegliere colori con diversi livelli di saturazione per differenziare gli oggetti. Puoi provare a simulare il daltonismo con lo strumento Color Oracle che mostra come appaiono i diversi colori alle persone con problemi di vista.
Utilizza le etichette in aggiunta ai colori per identificare sezioni specifiche di diagrammi, grafici e interfacce.
Non affidarti solo al colore. Una persona con daltonismo potrebbe avere difficoltà a distinguere i colori, e di conseguenza a comprendere le informazioni fornite.
Vibrazione
Se utilizzate insieme, tonalità sature con intensità simili possono "vibrare" e generare una sfocatura luminosa ai bordi delle immagini. Osservare e distinguere questi colori può risultare difficile per tutti, ma soprattutto per chi ha problemi di vista.
Combina i colori brillanti con colori neutri e meno saturi.
Non utilizzare colori di intensità simile nella stessa area.
Scopri di più
Nozioni di base sull'accessibilità per la progettazione digitale
Linee guida di accessibilità dei contenuti Web (WCAG)
