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

Resumo/Visão geral

Levels
1

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.

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.

Tasks
Topics
Androgynous, pinterest, kiwi, warm-tone, make-up , color-palette, berries, amanda-cruz AND mood board, social, moodboard, queer, color-palette, mood-board, ice, coalition AND color palette, palette, fig, orange, fashion, collage, pinterest, neighborhood AND collage, social post, fruit, lgbtq, collage, swatch, volunteer AND black, craft, inspo, color-palette, mood-board, simple, peach, non-profit AND model, color, color palette, romantic, model, dark, season, shelter
Q

Collection ID

(To pull in manually curated templates if needed)

Orientation


(Horizontal/Vertical)

Vertical

Width


(Full, Std, sixcols)

sixcols

Limit


(number of templates to load each pagination. Min. 5)

6
Animated
All

Sort

Most Viewed

Rare & Original

Newest to Oldest

Oldest to Newest

Newest to Oldest
Locales
BR or EN

Premium


(true, false, all) true or false will limit to premium only or free only.

false

Experimente o Adobe Express hoje mesmo

Explore mais postagens relacionadas