Guia para entender os códigos de cores HTML nos seus designs
Resumo/Visão geral
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.
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Premium
(true, false, all) true or false will limit to premium only or free only.