Nossa paleta é composta por branco, preto, cinza e mais dez famílias de cores, cada uma contendo sete cores individuais. As famílias de cores são organizadas em três subpaletas, de acordo com a aplicação: cores principais, cores secundárias e cores auxiliares.

As cores individuais são rotuladas numericamente, da mais clara à mais escura, começando com 10. Cores de famílias diferentes, mas que possuem o mesmo número, apresentam saturação e valor similares. Em outras palavras, elas compartilham um peso visual equivalente.

Nossas cores principais são as cores do logotipo da Red Hat, e são as cores mais associadas à nossa marca: vermelho, preto e branco. Se você não souber por onde começar, escolha nossas cores principais.

A cor primária da nossa marca é o red-50, também chamado de vermelho Red Hat. Com algumas exceções, todo conteúdo visual da Red Hat deve incluir o red-50 para vinculá-lo à nossa marca.

O conteúdo visual e as interfaces da Red Hat também dependem fortemente de preto, branco e cinza como plano de fundo para permitir que outros conteúdos se destaquem. Existem 10 tons de cinza neutro entre o preto e o branco, que oferecem flexibilidade para criar profundidade, sombras e os modos claro e escuro nas interfaces de usuário.

Aproveite o espaço branco

Alinhada à personalidade da nossa marca, a linguagem visual da Red Hat prioriza layouts arejados e minimalistas. Independentemente das cores aplicadas a uma imagem, o espaço negativo deve ser prioridade. Layouts simples e organizados direcionam a atenção da audiência para o que é importante.

Use o vermelho com consciência

Vermelho é uma cor forte. Em vez de preencher grandes áreas com o vermelho Red Hat, use-o para destacar partes importantes do design.

Quando precisar chamar a atenção para um alerta relevante ou uma mensagem de erro, use o laranja danger, não o vermelho Red Hat. Leia mais sobre as cores de status abaixo.

Use tons mais claros e mais escuros como toques de realce

Use tons mais claros e mais escuros de vermelho, preto e branco para criar sombras e luzes ou para preencher grandes espaços, como fundos. Isso faz com que o vermelho Red Hat se destaque.

Use um fundo neutro com bastante espaço negativo.

Use o red-50 para destacar elementos importantes e chamar a atenção do público.

Não preencha um conteúdo visual inteiro com o red-50. Vermelho é uma cor forte. Tente usar um fundo neutro antes de preencher um espaço com o vermelho Red Hat.

Não use apenas os tons mais claros e mais escuros de vermelho como fonte de vermelho na sua imagem. Sempre inclua o vermelho Red Hat.

Não use o red-50 para todos os componentes de um design. Quando tudo é destaque, nada sobressai.

Embora nossas cores principais sejam as mais reconhecidas, há situações em que precisamos variar. Nossa paleta de cores secundárias inclui cinco famílias: laranja, amarelo, verde-azulado, azul e roxo.

Para a Red Hat, recursos visuais eficientes utilizam cores discretas e estilizadas. Isso mantém nossos recursos visuais simples ao mesmo tempo que destaca o vermelho Red Hat. Selecione no máximo duas famílias de cores secundárias por projeto para usar com as nossas cores principais.

Se não souber por onde começar na hora de escolher as cores secundárias, tente usar uma das nossas coleções de cores. As famílias aplicadas nessas coleções se complementam e, quando combinadas, mantêm o espírito da marca Red Hat.

Use no máximo duas famílias de cores secundárias em seus designs. Esta ilustração usa apenas vermelho, laranja e roxo.

Não use mais de duas famílias de cores secundárias. Fica carregado demais.

Sempre inclua o red-50 como destaque em sua imagem para vinculá-la à marca Red Hat, mesmo que o logo da Red Hat esteja incluído.

Não crie recursos visuais para a Red Hat usando apenas cores secundárias.

Combine cores claras e escuras na sua arte para diferenciar. Esses elementos gráficos utilizam red-50, blue-70 e orange-30.

Evite usar muitas cores da mesma saturação no mesmo conteúdo visual. As cores têm intensidade, porém sem hierarquia.

Destaque as partes mais importantes da sua imagem usando cores menos vibrantes no fundo.

Não use as cores mais vibrantes como fundo. Pode ficar sobrecarregado.

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

Paleta de cores para pessoas

Nosso objetivo é representar as pessoas com precisão. Isso inclui o uso de tons de pele realistas nas ilustrações, independentemente da paleta de cores usada no restante da imagem. Confira como ilustrar pessoas.

Para cada pessoa ilustrada, escolha uma família de tons de pele. As famílias de tons de pele são descritas de forma diferente das cores tradicionais. Os tons frios se inclinam para os rosas, enquanto os tons quentes, para os amarelos e marrons.

Utilize as cores da paleta para pessoas apenas para tons de pele em ilustrações.

Não use cores da paleta de cores para pessoas para qualquer outra finalidade.

Escolha tons frios ou tons quentes para cada pessoa ilustrada.

Não misture tons frios e tons quentes na mesma pessoa ilustrada.

Paleta de cores de status

Quando precisamos chamar a atenção para perigos ou sucessos em nossas imagens, utilizamos cores de status. Essas cores são normalmente aplicadas em interfaces, mas também podem ser usadas de outras formas quando necessário. Cores danger devem ser usadas apenas para indicar que ocorreu um erro ou outro problema. Cores success devem ser usadas para indicar que algo foi concluído corretamente.

Observação: cores success podem ser usadas em apenas algumas circunstâncias em que o verde é absolutamente necessário para o design, como em uma comunidade DEI ou em um design sobre sustentabilidade.

Use as cores da paleta de status apenas para indicar informações importantes, como mensagens de erro ou sucesso.

Não use cores da paleta de status para elementos visuais que não estejam relacionados a mensagens de alerta ou sucesso.

Use cores de status como destaque, para chamar a atenção.

Não use uma cor de status como cor principal ou como fundo de uma imagem.

A criação de experiências e ambientes inclusivos está na nossa essência. Focar na inclusão significa garantir que todos os recursos de comunicação da Red Hat – como slides de apresentação, documentos, web pages, interfaces de soluções, publicações em redes sociais, entre outros – sejam acessíveis a todos.

A cor desempenha um papel fundamental na acessibilidade, afetando como pessoas com alterações na percepção visual são capazes de interpretar e digerir as informações. É importante tomar decisões conscientes sobre a aplicação de cores em seu trabalho.

O nível de contraste indica quão diferente é a luminosidade percebida entre a cor do objeto em primeiro plano e a cor de fundo O baixo contraste pode dificultar a leitura ou o reconhecimento de elementos da imagem, principalmente para pessoas com visão reduzida. Recursos visuais informativos ou que transmitam informações essenciais para a compreensão do conteúdo devem atender às taxas de contraste padrão AA das Diretrizes de Acessibilidade para Conteúdo Web (WCAG).

Isso significa que para os 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.

Utilize uma ferramenta como o Adobe Color para medir a taxa de contraste de suas cores e confira nas Diretrizes WCAG o contraste padrão para texto e outros elementos gráficos.

Os daltônicos não percebem diferenças nas cores da mesma forma que a maioria das pessoas. Isso pode dificultar a diferenciação entre imagens que se distinguem apenas pela cor, principalmente em gráficos ou interfaces.

As formas mais comuns de daltonismo são o daltonismo vermelho-verde (deuteranopia ou protanopia) e o daltonismo azul-amarelo (tritanopia).

Se você contar 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 objetos. Experimente simular o daltonismo usando uma ferramenta como o Color Oracle para entender como uma pessoa daltônica enxergaria o recurso visual que você criou.

red-50 atende aos padrões de contraste de cores quando aplicado sobre o black.

white atende aos padrões de contraste de cores quando aplicado sobre o teal-60.

red-50 atende aos padrões de contraste de cores quando aplicado sobre o blue-10.

white atende aos padrões de contraste de cores quando aplicado sobre o purple-60.

red-50 não atende aos padrões de contraste de cores quando aplicado sobre o gray-80.

white não atende aos padrões de contraste de cores quando aplicado sobre o teal-40.

red-50 não atende aos padrões de contraste de cores quando aplicado sobre o blue-70.

white não atende aos padrões de contraste de cores quando aplicado sobre o purple-30.

Todos os recursos e sistemas de design da Red Hat compartilham a mesma paleta, mas em alguns as cores são aplicadas de maneiras diferentes para atender a necessidades específicas.

Cores em apresentações

Uma apresentação pode ser a primeira vez que um cliente ou parceiro interage com a marca Red Hat. As apresentações devem ter o estilo da Red Hat e seguir as práticas recomendadas de acessibilidade. Nosso template de apresentação inclui sugestões de coleções de cores.

Template de apresentação da Red Hat (é necessário ter as credenciais da Red Hat)

Cores em ilustrações

Usamos ilustrações para descrever tecnologias complexas ou ideias elaboradas. Usar uma paleta de cores principais colocando o vermelho em destaque é uma forma de fazer com que as ilustrações tenham o estilo Red Hat, mas incorporar cores secundárias pode ajudar a criar o tom certo para a sua narrativa.

Padrões de ilustração da Red Hat

Cores na experiência de usuário

As propriedades web da Red Hat aplicam nossa paleta de cores por meio de componentes de design e seguem os padrões de acessibilidade da web para experiências de visualização de tela otimizadas.

Acesse ux.redhat.com