Cores

Quando criamos algo que é a cara da Red Hat, usamos nossas cores principais, aquelas que estão no nosso logotipo e são mais comumente associadas à nossa marca. Tons de vermelho e cinzas neutros proporcionam flexibilidade para criar profundidade e sombras.

Nossa paleta secundária acrescenta energia e complementa o vermelho Red Hat sem ofuscá-lo. Use uma ou duas cores secundárias além do vermelho Red Hat para causar mais impacto. 

Para adicionar profundidade e mais detalhes, usamos degradês sutis para preencher e realçar fundos. Eles nunca devem ser o foco principal da composição, pois o propósito deles é realçar, e não ofuscar.

Para facilitar a escolha de cores que funcionam juntas, criamos coleções que fazem diferentes combinações com as cores das paletas. Comece com uma dessas coleções em cada projeto.

Não use cores diferentes da paleta da Red Hat.

Não encha tudo com o vermelho Red Hat (red-50). Vermelho é uma cor forte. Use-a para adicionar pontos de cor.

Não use mais de duas cores secundárias na mesma imagem. Quanto menos cores, melhor.

Não se esqueça de usar o vermelho Red Hat (red-50). Tudo relacionado à Red Hat deve incluir o red-50.

Não use cores que não sejam acessíveis. Sempre verifique a taxa de contraste do texto e de outros elementos em relação à cor de fundo.

Evite usar degradês demais. Use-os para adicionar profundidade e detalhes sutis.

Além de nossas cores principais e secundárias, temos duas paletas auxiliares que podem ser usadas quando necessário. Essas cores devem ser usadas apenas para esses propósitos, não como cores secundárias.

A paleta para informações é reservada para indicação de 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.

Nosso objetivo é sempre representar as pessoas como elas são na vida real. Essas cores devem ser usadas apenas como tons de pele para ilustrar pessoas. Para cada pessoa ilustrada, escolha uma família de tons de pele. Confira como ilustrar pessoas.

As cores podem comunicar rapidamente uma mensagem ou um dado. Usamos associações de cores a que as pessoas estão acostumadas em nossas interfaces de usuário, slides, infográficos e diagramas para criar consistência em toda a jornada do cliente.

Estas são as cores que usamos para representar e ampliar o reconhecimento da marca Red Hat.

Essas cores são utilitárias. Elas devem ser usadas apenas para os fins pretendidos, e não decorativamente.

As descrições dos tons de pele são diferentes das associações de cores tradicionais: tons frios se voltam mais para o rosa, enquanto os tons quentes pendem para o amarelo e o marrom. Confira como ilustrar pessoas.

Quem tem daltonismo não percebe diferenças nas cores como a maioria das pessoas. Isso pode dificultar a compreensão de informações identificadas apenas pela cor, especialmente em gráficos ou interfaces. As formas mais comuns dessa condição são o daltonismo vermelho-verde (deuteranopia ou protanopia) e o daltonismo azul-amarelo (tritanopia).

Quando você conta apenas com a cor para transmitir sua mensagem, as pessoas com daltonismo podem não entender suas imagens. Pensando nisso, além das cores, use texto ou ícones nos recursos visuais que criar. Priorize cores com vários níveis de saturação para destacar os itens. Use uma ferramenta como o Color Oracle para simular como uma pessoa com daltonismo enxergaria o recurso visual que você criou.

Use rótulos além de cores para identificar seções distintas de diagramas, gráficos e interfaces.

Não dependa apenas das cores. Uma pessoa com daltonismo pode não conseguir distingui-las, impossibilitando a identificação de informações.

Tons saturados de intensidade semelhante podem criar vibrações quando usados juntos, gerando uma indefinição nas bordas, como um borrão brilhante. Qualquer um pode ter dificuldade de olhar e distinguir essas cores, e pessoas com condições visuais podem achá-las até dolorosas.

Combine cores fortes com cores menos saturadas e neutras.

Não use cores com intensidade semelhante na mesma área.