Teoria da cor para designers web

O cor é uma das ferramentas mais poderosas no arsenal de um designer web. Transmite significado antes de que se leia uma única palavra, estabelece a identidade de marca, guia a atenção do usuário e impacta diretamente nas taxas de conversão. No entanto, muitos designers escolhem cores baseando-se em preferências pessoais o seguindo tendências, em vez de compreender os princípios fundamentais que fazem que as combinações de cor sejam eficazes. Esta guia cobre os fundamentos da teoria da cor que todo designer web necessita, desde os modelos técnicos para definir cores em código até os princípios psicológicos que influenciam na percepção do usuário e o design de interação.

Modelos de cor: RGB, HSL, HEX e CMYK

Os modelos de cor são métodos sistemáticos para representar e descrever cores. Cada modelo tem vantagens adequadas para tarefas específicas. Compreender estes modelos te ajuda a trabalhar com o cor de maneira mais eficiente e a comunicar tuas escolhas de cor com precisão.

RGB (vermelho, verde, azul)

RGB é o modelo de cor aditivo utilizado por as telas. Combina luz vermelha, verde e azul em diferentes intensidades para produzir todos os cores do espectro visível. Cada canal varia de 0 (sem luz) a 255 (intensidade máxima). Quando os três canais estão em 0, o resultado é preto; quando os três estão em 255, o resultado é branco. Este modelo reflete como as telas físicas produzem cor através de a emissão de luz.

Em CSS, os cores RGB se escrevem como rgb(255, 87, 51). A variante rgba() adiciona um canal alfa para transparência, com valores de 0 (completamente transparente) a 1 (completamente opaco): rgba(255, 87, 51, 0.8).

HSL (tom, saturação, luminosidade)

HSL é possivelmente o modelo de cor mais intuitivo para os designers, já que reflete como os humanos pensam sobre o cor. Em vez de misturar canais de luz primária, HSL descreve o cor de uma maneira que coincide com nosso modelo mental:

• Tom: O cor em sí, expresado como graus na roda de cor, de 0 a 360. Vermelho é 0, verde é 120, azul é 240, e todos os cores vuelven ao vermelho em 360 graus.
• Saturação: A intensidade o pureza da cor, do 0% (completamente cinza) ao 100% (completamente vibrante). Com 0% de saturação se produz um tom cinza independientemente do tom.
• Luminosidade: Que tão claro ou escuro é o cor, do 0% (preto) ao 100% (branco). Com 50% de luminosidade se obtém o tom puro a plena saturação.

HSL faz que criar variantes de cor seja muito simples. Queres uma versão mais clara do azul de tua marca? Aumenta a luminosidade. Necessitas um tom mais suave? Reduce a saturação. Isto é muito mais intuitivo que ajustar canais RGB individuais. Em CSS: hsl(210, 100%, 50%).

HEX (hexadecimal)

HEX é o formato de cor mais comum no desenvolvimento web. Utiliza notação hexadecimal para representar valores RGB, onde cada canal se representa com dois dígitos hexadecimais, de 00 a FF. O formato é #RRGGBB, pelo que #FF5733 significa vermelho=255, verde=87, azul=51. HEX e RGB são matemáticamente idênticos: são simplesmente diferentes formas de escrever o mesmo valor.

O CSS moderno também admite notação HEX de 4 e 8 dígitos que inclui o canal alfa. #FF573380 é o mesmo cor com aproximadamente um 50% de opacidade. As notações abreviadas como #F53 se expandem a #FF5500.

CMYK (ciano, magenta, amarelo, preto)

CMYK é o modelo de cor subtrativo utilizado em impressão. A diferença das telas que emitem luz, os materiais impressos usam tintas que absorvem a luz. Os valores CMYK representam percentagens de cada tinta, do 0% ao 100%. Embora os designers web rara vez usam CMYK diretamente, é importante compreendê-lo ao preparar designs que necessitam impressão, como cartões de visita o embalagens. Os cores que se veem vibrantes em tela podem parecer apagados em impressão porque a gama RGB é mais ampla que a gama CMYK.

Comparação de modelos de cor

Princípios de harmonia da cor

A harmonia da cor se refere a combinações de cores que são visualmente agradáveis e equilibradas. Estas combinações se baseiam em relações geométricas na roda de cor. Compreender estes princípios te proporciona um ponto de partida confiável para criar paletas de cores, em vez de adivinhar.

Cores complementares

Os cores complementares se situam diretamente opostos na roda de cor (separados por 180 graus). Vermelho e verde, azul e laranja, amarelo e púrpura são pares complementares. Estas combinações produzem o máximo contraste e energia visual. São adequados para botões de chamada a a acção e elementos que necessitam destacar, mas podem resultar chocantes se se usam em proporções iguais. O abordagem mais eficaz é usar um cor como dominante e seu complementar como acento.

Cores análogos

Os cores análogos se situam adjacentes na roda de cor (normalmente separados por 30 a 60 graus). Azul, azul esverdeado e verde formam um esquema análogo. Estas combinações se sentem harmoniosas e unificadas porque os cores compartilham matizes similares. As paletas análogas são excelentes para criar designs tranquilos e coesos, mas carecem do contraste necessário para uma hierarquia visual forte. Adiciona cores neutros para texto e fundo para proporcionar o contraste necessário.

Cores triádicos

Os cores triádicos estão distribuídos uniformemente na roda de cor, separados por 120 graus. Um esquema triádico usando vermelho, amarelo e azul crea uma paleta vibrante e equilibrada com forte contraste visual mantendo a harmonia. Os esquemas triádicos são versáteis e funcionam bem para designs que necessitam sentirse enérgicos e coloridos sem ser caóticos. Ao igual que com os esquemas complementares, deixa que um cor domine e usa os outros dois como acentos.

Cores complementares divididos

O esquema complementar dividido começa com um cor base e usa os dois cores adjacentes a seu complementar em lugar do complementar mesmo. Isto proporciona o contraste do esquema complementar mas com menos tensão, tornando-o mais fácil de usar. Por exemplo, se o cor base é azul, em vez de usar laranja (o complementar), usa vermelho alaranjado e amarelo alaranjado. Este é um dois tipos de harmonia mais indulgentes e versáteis em web design.

Cores tetrádicos (duplo complementar)

O esquema tetrádico usa dois pares de cores complementares, formando um retângulo na roda de cor. Isto proporciona a mayor variedade de cor mas é o mais difícil de equilibrar. A clave é deixar que um cor domine, um segundo como secundário e reservar os dois restantes como acentos. Demasiados cores igualmente prominentes criam caos visual.

Acessibilidade e contraste (WCAG)

A acessibilidade da cor no é opcional: é um requisito legal em muitas jurisdicciones e uma obligação ética do design inclusivo. As Pautas de Acessibilidade para o Conteúdo Web (WCAG) definem requisitos de contraste específicos que garantizan que o texto seja legível para pessoas com diversos tipos de deficiencia na visão da cor.

Compreendendo o contraste

O contraste é a diferença de luminancia entre dois cores, expresada como uma proporção que vai de 1:1 (sem contraste, mesmo cor) a 21:1 (contraste máximo, texto branco sobre preto). A proporção se calcula usando a luminancia relativa de cada cor, que tem em cuenta o feito de que o olho humano percibe o verde como mais brilhante que o vermelho o o azul a a mesma intensidade.

Requisitos de WCAG 2.1

O texto grande se define como 18pt (24px) com peso normal o 14pt (18.66px) com peso negrita. Todo o texto menor que estes umbrales deve cumprir os requisitos de contraste para texto normal. Os componentes UI incluem campos de formulario, botões e indicadores de foco.

Erros comuns de acessibilidade

• Usar solo o cor para transmitir informação: Nunca confíes únicamente no cor para indicar estado o significado. Proporciona siempre indicadores auxiliares como tags de texto, iconos o patrones. Um borde vermelho por sí solo no é suficiente para indicar um error a usuarios que no podem distinguir o vermelho.
• Baixo contraste do texto de marcador de posição: O texto de marcador de posição nos campos de formulario frequentemente tem muito baixo contraste. Embora WCAG no exige que o texto de marcador de posição cumpla com as relações de contraste (já que no é conteúdo real), garantizar seu legibilidade é uma boa prática.
• Ignorar os indicadores de foco: Os indicadores de foco devem ter pelo menos 3:1 de contraste com os cores adjacentes. Os anillos de foco predeterminados do navegador frequentemente no cumprem este requisito em fundos de cor.
• Testar solo com visão normal: Usa simuladores de daltonismo para verificar que tua design seja utilizavel para usuarios com protanopia, deuteranopia e tritanopia (os três tipos mais comuns de deficiencia na visão da cor).

Seleção de paletas de cores

Uma paleta de cores bem estructurada proporciona consistencia e hierarquia visual em todo o site web. A maioria das paletas profissionais seguem uma estrutura simple:

A regra 60-30-10

Este princípio de design clásico sugiere usar o cor principal para o 60% do espaço visual (normalmente o fundo), o cor secundário para o 30% (cartões, secciones, navegação) e o cor de acento para o 10% (botões, links, destacados). Isto crea uma hierarquia visual natural onde o cor de acento atrae a atenção precisamente porque se usa com moderação.

Construção de paletas de cores práticas

• Cor principal: O cor de marca dominante. Se usa para elementos UI clave como cabeçalhos, botões principais e links. Escolhe um cor que refleje a personalidade de tua marca.
• Cor secundário: Um cor auxiliar que complementa o cor principal. Se usa para elementos secundários como fundos de barra lateral, botões secundários e títulos de cartões.
• Cor de acento: Um cor de alto contraste utilizado para elementos de chamada a a acção e resaltados importantes. Deve destacar claramente tanto em fundos de cor principal como secundário.
• Neutro escuro: Se usa para texto, títulos e fundos escuros. Normalmente é um cor casi preto com um leve matiz da cor principal para manter a consistencia.
• Neutro claro: Se usa para fundos de página, fundos de cartões e superficies claras. Normalmente é um cor casi branco com um leve matiz da cor principal.

Criação de variantes de cor

Os sistemas de design modernos suelen definir 10 escalas de cor (50 a 950) para cada cor, desde muito claro até muito escuro. Isto proporciona a flexibilidade necessária para diferentes contextos mantendo a consistencia. A forma mais simple de criar estas variantes é começar com o tom base em HSL e ajustar sistemáticamente a luminosidade, reduciendo ligeramente a saturação nos extremos mais claros e mais escuros.

Psicologia da cor no web design

Os cores evocan respuestas emocionales e associações que influenciam em como os usuarios perciben tua marca e interactúan com tua site web. Embora as associações culturales variam, existem alguns patrones ampliamente reconocidos no web design occidental:

Associações de cor comuns

Aplicação da psicologia da cor

A psicologia da cor deve informar tuas decisiones de design, no dominarlas. Começa com cores alineados com os valores de tua marca e as expectativas de a industria, logo experimenta as reacciones de usuarios reais. Por exemplo, as experimentas A/B de botões de chamada a a acção com diferentes esquemas de cor podem revelar que cores generan mais conversões para tua audiencia específica. A investigação muestra consistentemente que o cor do botão pode influenciar nas taxas de conversão em um 20% o mais, mas o cor 'óptimo' depende do contexto circundante e de lo que crea o mayor contraste visual.

Ferramentas de seleção de cor

As ferramentas adequadas fazem que a seleção de cor seja mais rápida e sistemática. Estes são os recursos mais útiles para designers web:

• Selector de cor de ToolHub: Nosso selector de cor gratuito basado em navegador te permite escolher cores e verlos instantáneamente em formatos HEX, RGB e HSL. Todo o processamento se realiza localmente para obter resultados imediatos.
• Convertidor de cor de ToolHub: Converte instantáneamente entre HEX, RGB, HSL e outros formatos. Uma ferramenta esencial para convertir especificações de design em valores CSS.
• Comprobador de contraste de ToolHub: Verifica o cumplimiento de WCAG para qualquer par de cores. Obtén relações de contraste precisas e o estado de aprobado/fallido para todos os niveles WCAG.
• Coolors: Um popular gerador de paletas que te permite bloquear os cores que te gostam e aleatorizar o resto até encontrar uma combinação harmoniosa.
• Adobe Cor: Proporciona uma ferramenta interactiva de roda de cor para criar esquemas de cor harmoniosos basados em combinações complementares, análogas, triádicas e outras.
• Realtime Colors: Previsualiza como se verá tua paleta de cores em designs de sites web reais antes de comprometerte com o design.

Funções de cor em CSS

O CSS moderno proporciona potentes funções de cor que fazem que trabalhar com cores seja mais dinámico e mantenivel. Compreender estas funções ajuda a escrever hojas de estilo mais limpias e flexíveis.

Sintaxe moderna de cor em CSS

CSS Cor Level 4 introdujo uma sintaxe unificada para todas as funções de cor. Agora podes escrever rgb(255 87 51) (separado por espaços, sem comas) e rgb(255 87 51 / 0.8) (alfa separado por barra). Esta sintaxe é compatível com todos os navegadores modernos e é mais legível que o antiguo formato separado por comas.

Sintaxe de cor relativa

CSS Cor Level 5 introdujo a sintaxe de cor relativa, que te permite derivar novos cores a partir de cores existentes modificando canais individuais:

:root {
  --brand: hsl(210 100% 50%);
}

.button {
  background: var(--brand);
}

.button:hover {
  background: hsl(from var(--brand) h s 40%);
}

.button:disabled {
  background: hsl(from var(--brand) h 20% l);
}

Esta sintaxe te permite criar variantes de cor sistemáticas a partir de um solo cor base, fazendo tua sistema de design mais mantenivel. Muda o cor base e todas as variantes se actualizan automaticamente.

Função Cor-Mix

A função cor-mix() mistura dois cores em uma proporção especificada:

.card {
  background: color-mix(in srgb, var(--brand) 80%, white);
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}

Isto é increíblemente útil para criar superposiciones semitransparentes, estados hover e variantes sutiles sem necessidade de definir propriedades personalizadas CSS separadas para cada escala de cor.

Cores de ampla gama: lab(), lch(), oklch()

A função oklch() proporciona acesso a a gama P3, que contém cores que no se podem representar em sRGB. Isto significa verdes, cianes e magentas mais vibrantes em telas compatíveis. A uniformidade perceptual de OKLCH também significa que cambios iguais em luminosidade produzem cambios visuales iguais, tornando-o ideal para criar escalas de cor sistemáticas.