8 minutos de leitura
O melhor guia para cores hex
Quando você quiser que uma página da web (ou aplicativo da web) exiba uma determinada cor, informe o código hexadecimal.
O que é um código hexadecimal?
É um código de 6 símbolos composto por até três elementos de 2 símbolos. Cada um dos elementos de 2 símbolos expressa um valor de cor de 0 a 255.
- Elemento 1: Valor vermelho
- Elemento 2: Valor verde
- Elemento 3: Valor azul
O código é escrito usando uma fórmula que transforma cada valor em um código alfanumérico exclusivo de 2 dígitos. Por exemplo, o código RGB (224, 105, 16) é E06910 em código hexadecimal.
Por quê? É complicado e tem a ver com o sistema de numeração de base 16. Se ficou curioso, aqui está uma boa explicação. Se está se perguntando o que tudo isso significa para você como designer, há algumas coisas importantes a saber:
- Você pode mostrar mais de 16 milhões de cores exclusivas, o que é considerado mais do que o olho humano consegue perceber.
- Você pode usar selecionadores de cores ou conversores para criar o código para você.
Por que usar o código hexadecimal em vez de números? Porque se você usasse números, cada valor de vermelho, verde ou azul de 0 a 255 poderia ter um, dois ou três dígitos possíveis. No total, o código pode ter apenas três dígitos ou até nove. Isso pode causar confusão para os sistemas que lêem os códigos. Ter cada valor com seis símbolos, não importa o que aconteça, reduz a chance de erros.
Os códigos são valores que informam ao visor quanto de uma cor deve ser exibido. Os valores são um código especial que representa os valores das cores de 0 a 255.
Se vermelho, verde e azul estiverem todos no mínimo 0 (representado como “00” no código), a cor expressada é a cor preta. Se vermelho, verde e azul estiverem todos no máximo 255 (representado como “ff” no código), a cor expressada é a cor branca.
Os valores de cor hexadecimal podem ser combinados para mostrar mais de 16 milhões de cores diferentes. Então, é claro, a maioria estará em algum lugar entre os dois. Você sempre pode usar um conversor para converter os valores numéricos RGB em código hexadecimal para você.
Mas pode ser útil memorizar algumas das cores mais comuns:
Códigos populares
| Cor: | RGB | Código hexadecimal |
| Preto | (0, 0, 0) | #000000 |
| Azul | (0, 0, 255) | #0000FF |
| Cinza | (128, 128, 128) | #808080 |
| Verde | (0, 128, 0) | #008000 |
| Roxo | (128, 0, 128) | #800080 |
| Vermelho | (255, 0, 0) | #FF0000 |
| Branco | (255, 255, 255) | #FFFFFF |
Códigos exclusivos
| Cor: | RGB | Código hexadecimal | Uso |
| AliceBlue | (240, 248, 255) | #F0F8FF | Plano de fundo sutil para uma página de comércio eletrônico ou corporativa |
| Coral | (255, 127, 80) | #FF7F50 | Cor de destaque calma |
| FireBrick | (178, 34, 34) | #B22222 | Cor de destaque agressiva |
| Rosa quente | (255, 105, 180) | #FF69B4 | Cor de destaque lúdica |
| LemonChiffon | (255, 250, 205) | #FFFACD | Plano de fundo romântico para um casamento ou página pessoal |
Como funcionam essas cores?
As cores são baseadas no modelo RGB que está em uso desde os primeiros dias da fotografia.
A teoria por trás do modelo é que você pode criar virtualmente qualquer cor que o olho possa ver atribuindo diferentes combinações de valores de cor vermelha, verde e azul. O modelo de cores RGB é usado por televisores, câmeras digitais e projetores de vídeo, além de praticamente todas as telas de computador e telefone existentes.
Na web e na maioria dos aplicativos digitais, é usada uma escala de valores de cor de 0 a 255. Você (ou um programador) informa à tela quanto de vermelho, azul e verde deve ser exibido. Essa combinação cria a cor que o observador vê.
Você tem muita liberdade para escolher a cor que deseja. O número total possível de combinações é 16.777.216, que é mais do que o olho humano consegue realmente distinguir.
Qual é a diferença entre usar código RGB e hexadecimal?
Os códigos hexadecimais são preferidos pelos programadores porque são previsíveis. Têm sempre seis dígitos, independentemente da cor. Os valores RGB podem ter apenas três dígitos e até nove.
Você não é obrigado a usar códigos hexadecimais em web design. Se você estiver codificando uma página em HTML, também pode usar os valores RGB ou até mesmo nomes de cores.
Veja como o HTML ficaria se você estivesse codificando, digamos, um fundo azul-marinho para uma página da web.
- Código hexadecimal para água-marinha: <div style=”background-color:#7FFFD4″></div>
- Código de cores RGB para água-marinha: <div style=”background-color:rgb(127, 255, 212)”></div>
- Código do nome da cor para água-marinha: <div style=”background-color:aquamarine”></div>
Mesmo que você possa especificar o nome ou o código RGB, não significa que você deva. Para reduzir a chance de um erro em seu projeto, use um seletor ou conversor hexadecimal de cores para gerar o código hexadecimal que você deseja.
Trabalhando com cores hexadecimais
Se você está acostumado a trabalhar com cores no Adobe Illustrator ou outro programa, trabalhar com cores hexadecimais na web requer uma certa adaptação. Aqui estão algumas coisas que você deve saber para que seu projeto corra bem.
Cuidado com as faixas coloridas
Com 16.777.216 cores potenciais, os códigos permitem muitas opções de cores contrastantes. Mas, como cada pixel deve exibir uma cor única, as cores hexadecimais não permitem que você misture tons de cores diferentes muito bem.
Quando os web designers tentam criar gradientes usando cores hexadecimais, os resultados nem sempre são os esperados. Como as sombras não se misturam, a tela acaba sendo faixas de cores distintas.
É mais provável que a formação de faixas coloridas aconteça em dispositivos mais antigos que não são capazes de mostrar milhões de cores. Em CSS, você pode programar gradientes para eliminar o problema de faixas de cores. Em telas modernas, faixas de cores são mais comuns em fotos de gradientes naturais como céus e arco-íris, onde milhões de cores visíveis a olho nu são compactadas para economizar espaço no arquivo.
Economize tempo com recursos de paleta de cores hexadecimais
Quando você está desenvolvendo um visual exclusivo na hora, selecionar cores complementares entre os 16 milhões disponíveis é uma tarefa assustadora. Felizmente, outros designers fizeram parte do trabalho para você, criando bancos de dados de paleta de cores hexadecimais e seletores interativos.
Paletas de cores hexadecimais: Busque e pesquise milhares de combinações de cores hexadecimais criadas pela comunidade em Paletas de cores hexadecimais.
Vá página por página pelas paletas nomeadas. Cada paleta tem um nome para dar uma ideia de seu estilo e identifica todas as seis cores hexadecimais. Clique no nome do designer para ver outras paletas de cores que ele criou.
Color-Hex Color Palettes é um recurso fantástico para inspiração de cores hexadecimais.
Coolors: O recurso de cor hexadecimal Coolors combina inspiração com funcionalidade para ajudar a acelerar o processo de design.
Você pode navegar pelas paletas de cores populares para ver o que chamou a atenção de outros designers. Cada paleta de tendências pode ser salva em uma caixa de favoritos pessoais se você criar uma conta.
Ou use seu gerador de paleta ultrarrápido para criar paletas com base nas cores que deseja usar. Um recurso de economia de tempo desse site é a capacidade de “bloquear” uma cor (ou cores) e, em seguida, gerar cores complementares adicionais.
Coolors também está disponível como um app iOS ou Extensão Adobe.
Combine cores hexadecimais com outros elementos de design
Se você estiver projetando para um site que já existe, ou tiver outros elementos que deseja combinar, precisa saber com quais cores hexadecimais está trabalhando no site. É aqui que um bom seletor de cores é inestimável. Com ImageColorPicker, você pode fazer upload de qualquer imagem e ver quais cores hexadecimais são representadas.
Outro bom recurso é o Conta-gotas ColorPick, uma extensão do navegador Google Chrome que permite ver a cor hexadecimal de qualquer elemento de uma página da web. Se estiver admirando uma cor em um site, use o conta-gotas para ver qual é.
Se você estiver escolhendo as imagens e outros elementos para o site, vai querer uma maneira fácil de identificar ativos que correspondem à sua paleta de cores hexadecimais. Na iStock, você pode adicionar uma cor hexadecimal como um filtro para qualquer pesquisa. Insira o código ou escolha no seletor de cores e digite as palavras-chave de sua pesquisa. O site retornará imagens relacionadas que correspondem à cor que você inseriu.
Está pronto para começar a encontrar as imagens ideais para seu esquema de cores hexadecimais? Acesse aqui para encontrar os ativos que complementarão o seu projeto.
Este artigo foi útil?
Mais recursos para você
- 5 minutos de leitura
- 10 minutos de leitura