Guia para entender os códigos de cores HTML nos seus designs

Ao projetar digitalmente, a cor é um aspecto levado em consideração tanto pelos designers quanto pelas ferramentas que utilizam. Os códigos de cores HTML, que indicam ao sistema qual cor deve ser exibida, são fundamentais para a representação de cores digitais. Em outras palavras, eles conectam o que é visual ao que aparece na sua tela. Embora os monitores eletrônicos não reproduzam a precisão do olho humano, compreendê-los proporciona um melhor acesso à variedade de cores disponíveis, permitindo escolhas de design mais impactantes.

Quais são os principais tipos de códigos de cores HTML?

Os códigos de cores HTML incluem, mas não se limitam a: hexadecimal (hex), RGB, HSL, LAB, HSB, HWB e CMYK. O tipo de código de cor geralmente corresponde ao uso pretendido. Vamos focar principalmente nos códigos hexadecimais e no modelo RGB, por serem os mais utilizados.

Códigos de cores RGB

O modelo de cores RGB usa as cores primárias de luz — vermelho, verde e azul — para produzir uma ampla gama de cores. O RGB é um modelo aditivo, o que significa que os três tipos de luz são combinados para alcançar um determinado resultado. Além de sua aplicação em codificação HTML, o modelo RGB antecede os sistemas eletrônicos, com origens na teoria das cores e na fotografia. Como um código de cor HTML, o RGB é formatado como 'rgb(x, x, x)', utilizando valores que variam de 0 a 255. Assim, o ponto mais baixo da escala — rgb(0,0,0) — resulta em preto, e o ponto mais alto — rgb(255,255,255) — em branco.

O que é um código hexadecimal?

Um código hexadecimal, ou hex code, é a expressão concisa de seis caracteres para cores geradas por computador com base no modelo de cores RGB. Os seis caracteres utilizam três seções de código alfanumérico de dois caracteres, correspondendo à luz vermelha, verde e azul. Não há diferença informativa entre um código hexadecimal e um código de cores RGB; eles são apenas formas diferentes de representação. A conversão entre hex e RGB é possível, mas exige uma fórmula que não é relevante para o uso cotidiano. Cada código hexadecimal começa com o símbolo # seguido por valores que incluem números de 0-9 e letras de A-F. Os valores variam da intensidade mais baixa #000000 (preto) até a mais alta #FFFFFF (branco), permitindo mais de 16 milhões de combinações possíveis.

Exemplos de cores em códigos hexadecimais

Aqui estão alguns exemplos de cores em códigos hexadecimais e seus valores correspondentes em RGB no Adobe Color:

Para criar um código hexadecimal básico para vermelho, usamos a intensidade máxima de luz vermelha na seção vermelha do código, ou #FF0000.

Para criar um código hexadecimal básico para verde, usamos a intensidade máxima de luz verde na seção verde do código, ou #00FF00.

Para criar um código hexadecimal básico para azul, usamos a intensidade máxima de luz azul na seção azul do código, ou #0000FF.

Você percebe nesses exemplos que os valores RGB refletem apenas a cor da luz aplicada.

A geração de um código hexadecimal básico para roxo é um pouco diferente, pois requer intensidades iguais de luz vermelha e azul, representadas pelo código hexadecimal #800080. Os valores RGB são idênticos nos campos vermelho e azul e se situam no ponto médio da intensidade máxima.

Existem outros códigos de cores HTML?

Sim, estes incluem HSL, LAB, HSB, HWB e CMYK.

• O HSL significa tonalidade, saturação e luminosidade.
• O HSV significa tonalidade, saturação e valor.
• O LAB significa luminosidade, canal a, canal b (a refere-se aos valores entre vermelho e verde, e b refere-se aos valores entre azul e amarelo).
• O HWB significa tonalidade, branco e preto.
• O CMYK significa ciano, magenta, amarelo e preto, baseado nas quatro cores base usadas na impressão.

Esses modelos de cores são menos usados e não têm a mesma relevância para a maioria dos usuários.

Como usar códigos de cores HTML? Ferramentas e recursos do Adobe Color que você pode usar:

Gerenciando códigos de cores no Adobe Express

O Adobe Express oferece paletas de cores geradas automaticamente, que podem ser personalizadas, aplicadas facilmente aos designs e combinadas entre os diferentes elementos. Os códigos hexadecimais podem ser extraídos ou inseridos diretamente no seletor de cores personalizado representado pelo ícone de conta-gotas.

Isso permite criar paletas personalizadas utilizando referências de imagens ou colando códigos hexadecimais conhecidos. O aplicativo também sugere automaticamente temas de cores para texto e outros elementos com base nas imagens e cores usadas no design. Embora o Adobe Express não exija nenhum conhecimento de HTML, o uso de ferramentas como o Adobe Color pode oferecer mais precisão na seleção de cores.

Localizador de códigos de cores

Se você deseja ampliar seu conhecimento sobre códigos de cores, o Adobe Color é um recurso útil para copiar e colar códigos hexadecimais do círculo cromático no Adobe Express, além de gerar paletas a partir de uma seleção inicial de cores. O Adobe Color utiliza os modelos de cores hexadecimais, RGB, HSB e LAB para categorizar cores. Caso os modelos HSB ou LAB sejam relevantes para suas necessidades, a ferramenta realiza a conversão facilmente a partir de códigos hexadecimais e RGB.

Seleção de paletas de cores

Com o Adobe Color, é possível gerar esquemas de cores como: análogos (compostos por cores próximas no círculo cromático), complementares (cores opostas) e outros modelos.

Recursos adicionais do Adobe Color

Além de utilizar o círculo cromático, também é possível carregar imagens para extrair temas de cores e gradientes.

Na aba Ferramentas de Acessibilidade do Adobe Color, você pode testar a proporção de contraste entre as cores para garantir a legibilidade, levando em conta o tamanho e o negrito da fonte, além de componentes gráficos, como formas.

A ferramenta também gera proporções de contraste sugeridas próximas às cores escolhidas para facilitar a leitura. Esta seção possui ainda um recurso para testar se as cores selecionadas são seguras para pessoas com daltonismo.

Esses são os fundamentos dos códigos de cores HTML e sua aplicação no Express e no Adobe Color. Agora que você entende melhor, use o seletor de cores e comece a criar.

Experimente os modelos do Express que fazem referência a códigos hexadecimais nos designs.