O que é o código hexadecimal? Tudo o que você precisa saber

Trabalhar com cores em HTML é relativamente simples. Com algumas declarações CSS simples, você pode modificar a cor de qualquer texto ou projecto de fundo em sua página da web. Mas porquê você especifica uma cor? A resposta a esta pergunta nos levará a um buraco de coelho que eventualmente nos leva ao concepção de códigos de cores hexadecimais.

Se você já trabalhou com HTML ou CSS antes, provavelmente já ouviu o termo código hexadecimal. Mas o que exatamente é um código hexadecimal? Quais são alguns exemplos de códigos hexadecimais? Qual é a diferença entre um código hexadecimal e um código de cores RGB?

O que é código hexadecimal?

Ao estrear a trabalhar com cores, você pode usar uma interface gráfica para escolher as cores a serem aplicadas aos elementos da sua página. Quando você começa a olhar para o código subjacente em vez de exclusivamente para o seu editor gráfico, você descobre que as cores aparecem porquê sequências de caracteres de ar estranha. Essas sequências são conhecidas porquê códigos hexadecimais; eles se parecem com isso:

#FF0092

Relacionado: Termos essenciais de design gráfico que você precisa saber

Você pode especificar cores em CSS de algumas maneiras diferentes. Você pode usar os nomes de algumas cores predefinidas, porquê vermelho e magenta escuro. Para especificar tons exatos de cor, porém, você precisará usar uma medida mais precisa: um pouco numérico.

CSS oferece duas opções principais: RGB e hexadecimal. Em ambos os formatos, você especifica as quantidades de vermelho, virente e azul que compõem a cor final. RGB usa três números entre 0 e 255. Hex faz exatamente o mesmo, exclusivamente com uma base dissemelhante (16) do decimal (10) que você está afeito.

Hex usa as letras AF, além dos dígitos 0-9, para um totalidade de 16 símbolos. A em hexadecimal é o equivalente a 10 em decimal. F em hexadecimal é 15 em decimal.

Uma vez que funcionam os códigos de cores hexadecimais?

Em sua forma mais básica, um código hexadecimal é uma representação de quanto vermelho, virente e azul existem em uma cor. Um código hexadecimal consiste em seis caracteres. Os dois primeiros referem-se à quantidade de vermelho na mistura, os dois seguintes referem-se à quantidade de virente existente e os dois últimos dígitos refletem a quantidade de azul. Os códigos hexadecimais referem-se a cores específicas, permitindo que designers e desenvolvedores se comuniquem facilmente sobre esquemas de cores.

Com 16 × 16 (256) valores para cada componente de cor, existem portanto 256 × 256 × 256 combinações possíveis. Em hexadecimal, eles variam de #000000 (preto puro) a #FFFFFF (branco puro).

Uma vez que ler códigos de cores hexadecimais

Entender os códigos de cores hexadecimais é fácil. Vamos pegar o exemplo de #FF5733. Primeiro, divida os seis caracteres em três partes contendo dois caracteres cada. Uma vez que você sabe, as duas primeiras partes representam o vermelho, as duas segundas representam o virente e as duas terceiras representam o azul. Portanto, no nosso exemplo:

• A componente vermelha, RR, tem o valor FF.
• O componente virente, GG, é 57.
• O componente azul, BB, é 33.

Agora, para encontrar a intensidade desses segmentos de cores, você precisa calcular o número hexadecimal usando estas três etapas:

1. Multiplique o primeiro caractere hexadecimal de RR por 16. Se o caractere for uma letra, converta-o em seu valor correspondente. Neste caso, o primeiro caractere é F que é 15. Portanto, para nosso exemplo, você está multiplicando 15 × 16 que é igual a 240.
2. Em seguida, adicione o segundo caractere de RR. Novamente, converta uma letra para seu valor correspondente, se for necessário. Em nosso exemplo, o segundo caractere é F, que é igual a 15.
3. Uma vez feito, adicione os totais para obter um único valor. Se você somar 240 e 15 do nosso exemplo, verá que o valor de FF é 255.

Repita a mesma fórmula para os dois segmentos restantes, GG denotado por 57 e BB denotado por 33. Se os cálculos manuais parecerem muito complicados, você sempre pode usar uma instrumento de conversão hex para RGB (porquê BinaryHex Metamorfosear) para ler uma cor. Você deve desenredar que o valor hexadecimal #FF5733 é equivalente a rgb(255, 87, 51).

Por que o código de cores hexadecimal é tão popular?

Embora existam vários modelos de cores diferentes (RGB, CMYK, HSL), os códigos de cores hexadecimais são talvez a representação mais usada. Isso porque eles são simples e fáceis de entender.

Um formato de largura fixa também é muito útil. As cores hexadecimais de comprimento totalidade são sempre sete caracteres, incluindo o início # símbolo.

As cores hexadecimais são muito eficientes, usando exclusivamente esses sete caracteres para simbolizar mais de 16 milhões de cores. E diferenciar entre essas cores é um processo direto.

Hex vs. RGB: Existe alguma diferença?

O sistema RGB de codificação de cores usa três números decimais para indicar as intensidades relativas de vermelho, virente e azul. Ele usa os dígitos 0-9.

Hex também usa três números para simbolizar vermelho, virente e azul, mas usa dígitos extras (AF) para atender a base 16. Não há diferença nas cores resultantes, são simplesmente formatos diferentes para conversar a mesma informação.

Relacionado: Fundamentos de CSS: trabalhando com cores

Para que serve o código hexadecimal?

Uma variedade de aplicativos diferentes usam RGB, de telas de televisão a dispositivos móveis, jogos e sinais. Você verá principalmente códigos de cores hexadecimais em web design e outros programas gráficos.

Você também pode ver os códigos hexadecimais porquê uma maneira universal de identificar cores. Muitos sites os usam para identificar uma cor específica, pois são curtos e, geralmente, inequívocos no contexto.

O código de cores hexadecimal não é ciência de foguetes

Portanto, você tem o substancial dos códigos de cores hexadecimais. Eles não são exatamente ciência dura, mas servem a um propósito definido no design (e no mundo da tecnologia). Se você está procurando uma instrumento que o ajude a entender porquê as cores hexadecimais funcionam, ou uma que o ensine sobre a teoria da mistura RGB, há muitas online. Lembre-se, a chave para aprender um pouco novo é dar um passo de cada vez.

Os códigos de cores hexadecimais não são a coisa mais empolgante do mundo, mas é vital entendê-los se você estiver trabalhando com web design. Ser capaz de trabalhar com códigos de cores hexadecimais tornará seu trabalho de design muito mais fácil.

Leia a seguir

Sobre o responsável