Cores
As cores vão além da estética. Elas influenciam como nossa mensagem é sentida e interpretada. Com o vermelho como tom principal, nossa paleta de cores equilibra a praticidade e a personalidade da nossa marca para criar uma conexão com o público.
Não é qualquer vermelho
Toda marca tem uma cor principal que a identifica. Mas poucas têm uma cor tão intimamente conectada à sua identidade principal. O vermelho desempenhou um papel fundamental na história da Red Hat desde o início e representa nossa paixão por colaborar e ajudar os outros.
O vermelho Red Hat® é um tom puro (sem azul nem verde).
#ee0000
RGB 238, 0, 0
CMYK 0, 98, 85, 0 Pantone 1788 C
O vermelho Red Hat (ou red-50) atrai o olhar. Por isso, use com sabedoria. Toques em red-50, a serem incluídos em tudo o que criamos, identificam nossa marca e destacam o que é importante sem sobrecarregar.
Cores principais
Para criar algo com a cara da Red Hat, use nossas cores principais, aquelas que estão no nosso logotipo e são mais comumente associadas à nossa marca. Tons de vermelho e cinzas neutros oferecem flexibilidade para criar profundidade e sombras.
Cores expressivas
São sempre usadas com nossas cores principais e nunca sozinhas. As nossas cores expressivas servem para adicionar profundidade e energia. Elas foram escolhidas para complementar o vermelho Red Hat, sem competir com ele.
Cores secundárias
Nossa paleta secundária consiste em tons de laranja (orange), amarelo (yellow), verde-azulado (teal) e roxo (purple). Para causar o máximo de impacto, use apenas uma ou duas cores secundárias na mesma composição.
Degradês
Nosso manual de estilo híbrido indica que cores principais e secundárias podem ser combinadas para criar degradês usados em detalhes sutis e fundos. Os gradientes nunca devem ser o foco principal da composição. Eles servem para valorizar, e não para dominar o visual.
Cores auxiliares
Além das nossas cores principais e secundárias, temos duas paletas auxiliares. Essas cores devem ser usadas apenas para os fins aqui definidos, não como cores secundárias.
Paleta para informações
A paleta informacional é reservada para indicar status e interatividade. Ela é utilitária, e não decorativa. Use estas cores em interfaces, web pages, gráficos e diagramas, relatórios e outros recursos visuais informativos.
Paleta de tons de pele
Nosso objetivo é sempre representar as pessoas como são na vida real. Essas cores devem ser usadas apenas como tons de pele para ilustrar pessoas. Escolha uma família de tons de pele para cada pessoa ilustrada. Veja mais informações sobre ilustração de pessoas.
Como usar as cores
Para chegar ao visual da Red Hat, é preciso mais do que apenas usar as cores da nossa paleta. A quantidade e o posicionamento de cada cor usada também são questões significativas. Para usar as cores com consistência, siga estes princípios básicos.
Simplicidade é tudo
Use cores discretas e estilizadas. Opte pela simplicidade e use bastante espaço em branco para destacar a mensagem e permitir que nosso público foque no mais importante.
Use o vermelho estrategicamente
O vermelho Red Hat é uma cor forte. Em vez de encher um espaço inteiro com esse tom, adicione toques dele para destacar elementos importantes da composição.
Busque o equilíbrio
Preencha objetos grandes e fundos com matizes mais claras, sombras mais escuras e degradês sutis. Use os valores de cores mais saturados com moderação: para destacar algo, ajudar na navegação ou adicionar detalhes especiais.
Pense na origem das cores
Diminua o zoom e preste atenção nas cores de todos os elementos da composição. Observe como elas funcionam juntas e para onde a atenção está sendo direcionada.
Coleções de cores
Para facilitar a escolha de cores que funcionam juntas, criamos coleções com diferentes combinações das nossas paletas. Comece com uma dessas coleções em cada projeto.
Para informações específicas sobre o uso de cores em interfaces de usuário, acesse ux.redhat.com (web design) e PatternFly (design de soluções).
Para informações específicas sobre o uso de cores em interfaces de usuário, acesse ux.redhat.com (web design) e PatternFly (design de soluções).
O que evitar
Não recomendado: não use cores diferentes da paleta da Red Hat.
Não recomendado: não use o vermelho Red Hat em todos os elementos. Essa é uma cor forte e é melhor usada para criar toques vibrantes.
Não recomendado: não se esqueça de incluir o vermelho Red Hat. Tudo relacionado à Red Hat deve usar essa cor.
Não recomendado: não use degradês em excesso. Eles servem para dar profundidade e adicionar detalhes sutis. Veja mais informações no manual de estilo híbrido.
Não recomendado: não crie combinações novas de degradê. Use somente os degradês especificados no manual de estilo híbrido.
Não recomendado: não use imagens geradas por ferramentas de IA sem avaliar e ajustar as cores. Pode ser que mesmo imagens criadas com nosso modelo personalizado do Firefly, como as do exemplo, não sigam nossas paletas de cores.
Usar cores para dar o contexto
As cores podem ser usadas para comunicar rapidamente uma mensagem. Use associações consagradas de cores e ideias em interfaces de usuário, slides, infográficos e diagramas para a experiência do cliente ser consistente.
| Cores | Ideia associada | Mais informações |
| Red Hat | O vermelho é a cor da nossa marca e não pode ser usado para representar ideias negativas. | |
| Erro, redução ou falha | Use para comunicar que algo negativo aconteceu, como um erro crítico ou uma queda no valor. | |
| Cuidado | Significa que ocorreu uma ação ou erro não crítico. | |
| Aviso | Significa que uma ação imediata é necessária para evitar erros críticos. | |
| Sucesso, aumento | Use para comunicar que algo positivo aconteceu, como uma ação bem-sucedida ou um aumento no valor. | |
| Geral ou neutro | Essa cor pode ser usada em um botão ou uma informação que não tem gravidade. | |
| Link ou interação | Cor aplicada em objetos ou textos clicáveis que levam a um hiperlink ou uma mudança de estado. | |
| Informação, observação ou dica | Use para comunicar uma informação útil. | |
| Nulo | Cor aplicada a botões ou informações que não estão disponíveis ou não são importantes. |
Esquema de cores
Organizamos nossa paleta de cores em 11 famílias. Elas são numeradas do tom mais claro ao escuro, começando pelo 10. Tons de cores de famílias diferentes com o mesmo número apresentam saturação e valor similares; ou seja, têm peso visual equivalente.
Clique em uma das amostras de cor abaixo para copiar o código Hex para sua área de transferência ou faça o download dos arquivos (é necessário ter credenciais da Red Hat).
As cores da nossa marca
Estas são as cores que usamos para representar e reforçar a identificação da marca Red Hat.
Paleta principal
red-10
#fce3e3
red-20
#fbc5c5
red-30
#f9a8a8
red-40
#f56e6e
red-50
(vermelho Red Hat)
#ee0000
RGB 238 0 0
CMYK 0 98 85 0
Pantone 1788C
red-60
#a60000
red-70
#5f0000
red-80
#3f0000
white
#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
(Preto UX)
#151515
black
#000000
RGB 0 0 0
CMYK 60 40 40 100
Pantone Black C
Paleta secundária
orange-10
#ffe8cc
orange-20
#fccb8f
orange-30
#f8ae54
orange-40
#f5921b
RGB 245 146 27
CMYK 0 50 100 0
Pantone 144C
orange-50
#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
Cores auxiliares
Paleta para informações
Estas cores são funcionais e devem ser usadas apenas para os fins pretendidos, não decorativamente.
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
success-green-80
#183301
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
danger-orange-80
#4c1405
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
interaction-blue-80
#032142
Paleta de tons de pele
As famílias de tons de pele seguem uma lógica diferente das cores tradicionais: subtons frios puxam para o rosa, enquanto os quentes tendem ao amarelo e ao marrom. Veja mais informações sobre ilustração de pessoas.
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
Acessibilidade
Uma empresa que pretende ser aberta e prestativa deve criar experiências equitativas e inclusivas. Todos os recursos de comunicação da Red Hat, como slides de apresentações, páginas da Web, interfaces de soluções, publicações em redes sociais e outros, devem ser acessíveis a todas as pessoas.
A cor desempenha um papel fundamental na acessibilidade, afetando a maneira como pessoas com limitações visuais captam e interpretam as informações. É importante tomar decisões conscientes ao aplicar cores no nosso trabalho.
Contraste
O nível de contraste indica a diferença de brilho entre as cores no primeiro plano e de fundo. A falta de contraste dificulta a leitura ou a identificação de elementos na imagem, principalmente para pessoas com baixa visão. Recursos e elementos visuais informativos que são essenciais para a compreensão do conteúdo devem estar em conformidade com as taxas de contraste exigidas pelo padrão AA das Diretrizes de Acessibilidade para o Conteúdo Web (WCAG).
Nos recursos visuais da Red Hat, um texto pequeno (17 pt ou menor) precisa ter, no mínimo, uma taxa de contraste de 4,5:1. Textos grandes (18 pt ou maior) e imagens informativas, como ícones, devem ter, no mínimo, uma taxa de 3:1. Use uma ferramenta, como o Adobe Color para medir a taxa de contraste de suas cores e consulte as WCAG para saber qual é o padrão exigido para textos e outros elementos gráficos.
Use: aplicar red-50 sobre um fundo black atende aos padrões de contraste.
Use: aplicar white sobre um fundo teal-60 atende aos padrões de contraste.
Use: aplicar black sobre um fundo red-10 atende aos padrões de contraste.
Use: aplicar white sobre um fundo purple-60 atende aos padrões de contraste.
Não use: aplicar red-50 sobre um fundo gray-80 não atende aos padrões de contraste.
Não use: aplicar white sobre um fundo teal-40 não atende aos padrões de contraste.
Não use: aplicar black sobre um fundo red-60 não atende aos padrões de contraste.
Não use: aplicar white sobre um fundo purple-30 não atende aos padrões de contraste.
Daltonismo
Quem tem daltonismo não percebe diferenças nas cores como a maioria das pessoas. Isso pode dificultar a compreensão de informações que estão identificadas apenas pela cor, principalmente em gráficos ou interfaces. Os tipos mais comuns de daltonismo são a dificuldade em distinguir vermelho e verde (deuteranopia ou protanopia) e azul e amarelo (tritanopia).
Quando apenas a cor é usada para transmitir uma mensagem, pode ser que as pessoas com daltonismo não entendam os elementos visuais. Por isso, além de cores, use textos ou ícones nos recursos visuais. E prefira usar cores com níveis de saturação variados para diferenciar as informações. Use uma ferramenta como o Color Oracle para simular como alguém com daltonismo enxergaria o recurso visual que você criou.
Recomendado: além de cores, use rótulos para identificar seções diferentes em diagramas, gráficos e interfaces.
Não recomendado: evite usar somente cores como elemento de identificação e diferenciação. Pessoas com daltonismo terão dificuldade em distingui-las e entender a informação.
Vibração
Tons muito saturados com intensidade semelhante tendem a "vibrar" quando usados juntos, criando um efeito visual de embaçamento nas bordas. Qualquer um pode ter dificuldade de olhar e distinguir essas cores, e pessoas com condições visuais podem achá-las até dolorosas.
Recomendado: combine cores vivas com outras menos saturadas e neutras.
Não recomendado: evite usar cores com intensidade semelhante na mesma área.
Mais informações
Fundamentos de acessibilidade no design digital
Diretrizes de Acessibilidade para Conteúdo Web (WCAG)
