HTML - Códigos Hexadecimais

Estrutura dos Códigos de Cor HEX

Os códigos de cor HEX usam um formato hexadecimal de 6 dígitos, que consiste em letras (A-F) e números (0-9). O código é precedido por um símbolo de cerquilha (#) e não diferencia maiúsculas de minúsculas. O código de 6 dígitos é dividido em três pares, cada um representando um componente de cor: vermelho (R), verde (G) e azul (B).

#FF0000

Cada par de dígitos em um código de cor HEX pode variar de 00 a FF, sendo 00 a intensidade mais baixa e FF a intensidade mais alta daquele componente de cor específico. Ao variar os valores dos componentes vermelho, verde e azul, muitas cores podem ser criadas.

Como Funcionam os Códigos de Cor HEX

Os códigos de cor HEX funcionam especificando a intensidade dos componentes vermelho, verde e azul que compõem uma cor. Cada componente é representado por um valor hexadecimal variando de 00 a FF. A relação entre valores hexadecimais e cores RGB é direta.

#000000

#FFFFFF

Usando diferentes combinações de valores hexadecimais para esses componentes, você pode representar mais de 16 milhões de cores possíveis. Isso permite que desenvolvedores web e designers especifiquem cores precisas para vários elementos em uma página web, como texto ou fundos.

Aplicando Cores HEX a Elementos HTML

Os códigos de cor HEX podem ser aplicados a elementos HTML usando o atributo style. O atributo style permite especificar estilos CSS inline para um elemento, incluindo as propriedades color e background-color.

Para definir a cor do texto de um elemento usando um código de cor HEX, use a propriedade color dentro do atributo style:

<p style="color: #FF0000;">Este texto é vermelho.</p>

Da mesma forma, para definir a cor de fundo de um elemento, use a propriedade background-color:

<div style="background-color: #00FF00;">Esta div tem um fundo verde.</div>

Você também pode aplicar códigos de cor HEX a bordas usando a propriedade border:

<p style="border: 2px solid #0000FF;">Este parágrafo tem uma borda azul.</p>

Ao usar o atributo style com essas propriedades, você pode aplicar códigos de cor HEX a vários elementos HTML e controlar sua aparência.

Códigos de Cor HEX em CSS

Além de estilos inline, os códigos de cor HEX podem ser definidos em folhas de estilo CSS. Isso permite separar os estilos de apresentação da estrutura HTML e aplicar cores usando seletores e classes CSS.

Para definir um código de cor HEX em uma folha de estilo CSS, use esta sintaxe:

.texto-vermelho {
  color: #FF0000;
}

.fundo-verde {
  background-color: #00FF00;
}

.borda-azul {
  border: 2px solid #0000FF;
}

Definimos três classes CSS: .texto-vermelho, .fundo-verde e .borda-azul. Cada classe especifica um código de cor HEX diferente para sua respectiva propriedade.

Para aplicar essas classes a elementos HTML, use o atributo class:

<p class="texto-vermelho">Este texto é vermelho.</p>
<div class="fundo-verde">Esta div tem um fundo verde.</div>
<p class="borda-azul">Este parágrafo tem uma borda azul.</p>

Ao definir códigos de cor HEX em folhas de estilo CSS e usar seletores e classes, você pode aplicar cores consistentes em toda a sua página web. Essa abordagem promove a reutilização de código e facilita a atualização de estilos visuais em seu site.

Cores Pastel

• #FFC8DD (Rosa)
• #FFAFCC (Rosa Claro)
• #BDE0FE (Azul Claro)
• #A2D2FF (Azul Céu)
• #CDB4DB (Lavanda)

Tons Terrosos Quentes

• #E76F51 (Siena Queimado)
• #F4A261 (Marrom Arenoso)
• #E9C46A (Cáqui Escuro)
• #2A9D8F (Verde Selva)
• #264653 (Carvão)

Vibrantes e Ousadas

• #FF4136 (Vermelho Brilhante)
• #FF851B (Laranja)
• #FFDC00 (Amarelo)
• #2ECC40 (Verde)

Estas paletas de cores mostram como diferentes cores podem ser combinadas para criar designs visualmente atraentes. Ao selecionar cores para um site, considere fatores como harmonia, contraste e o clima ou sensação geral que você quer transmitir.

Muitos sites e ferramentas ajudam os designers a criar e explorar paletas de cores, como Adobe Color, Coolors e Paletton. Essas ferramentas permitem que você gere esquemas baseados em diferentes princípios, como cores complementares ou análogas.

Usando códigos de cor HEX comuns e paletas bem projetadas, os designers web podem criar sites envolventes que comunicam sua mensagem pretendida de forma clara.

Geradores ou Seletores de Códigos de Cor HEX Online

Esses sites permitem que você selecione visualmente uma cor usando uma roda de cores ou ajustando controles deslizantes para matiz, saturação e luminosidade. Alguns seletores de cores online populares incluem:

• ColorPicker.com: Um seletor de cores simples e intuitivo que exibe os valores HEX, RGB e HSL da cor selecionada.
• Adobe Color: Uma ferramenta que permite criar paletas de cores baseadas em diferentes regras, como cores monocromáticas ou complementares.
• Coolors.co: Um gerador que ajuda a criar e salvar paletas de cores para seus projetos.

Essas ferramentas são úteis quando você precisa encontrar uma cor específica ou criar uma nova paleta.

Extensões e Plugins de Navegador

Algumas extensões populares incluem:

• ColorZilla: Uma extensão para Firefox e Chrome que permite selecionar cores de páginas web.
• Eye Dropper: Uma extensão do Chrome que permite selecionar cores de páginas web e copiar seus valores HEX, RGB ou HSL.
• Color Picker: Um complemento do Firefox que permite selecionar cores de qualquer página web.

Essas extensões facilitam a seleção rápida de cores de sites existentes.

Conversão Entre Diferentes Formatos de Cor

Você também pode precisar converter entre diferentes formatos como HEX, RGB (Vermelho Verde Azul) e HSL (Matiz Saturação Luminosidade).

#FF0000

Um código de 6 dígitos representando uma cor onde cada par de dígitos corresponde à intensidade de vermelho, verde e azul (por exemplo, #FF0000 para vermelho).

rgb(255, 0, 0)

Especifica a intensidade de vermelho, verde e azul como valores individuais entre 0 e 255.

hsl(0, 100%, 50%)

Representa cores usando valores de matiz (0-360 graus), saturação (0-100%) e luminosidade (0-100%).

Muitas ferramentas online como RapidTables fornecem conversores permitindo entrada em um formato com saída em outro. Isso pode ser útil ao trabalhar com sistemas diferentes.