Veja aqui o conceito de cores em HTML, algumas opções para usar e como essa estratégia pode ajudar a sua marca.
Na hora de criar um site, é necessário considerar vários elementos para gerar uma página atrativa e confortável para os usuários. Um dos principais aspectos que devem ser considerados nesses casos são as cores. Por isso, quem vai desenvolver o layout de uma página precisa saber o que são as cores em HTML.
Existem diferentes padrões de cores em HTML. Se você trabalha com o desenvolvimento de sites e quer criar layouts mais amigáveis, veja aqui os principais códigos de cores.
O que são cores em HTML?
As cores em HTML são códigos que representam diferentes tonalidades, além de níveis de luminosidade e de opacidade distintos.
Durante o processo de programação de um site, sempre que é necessário inserir uma cor é preciso adicionar o código HTML. Dessa forma dela para que ela apareça no site da forma como está no projeto.
Existem diferentes padrões de cores em HTML, sendo que alguns dos mais utilizados pelos desenvolvedores são RGB e RGBA. Cada um desses padrões possui diversos códigos que representam uma determinada tonalidade.
Sendo assim, quem quer aprender como colocar cor em HTML, precisa inserir o valor da tonalidade desejada no seu código. Dessa forma, ela aparece para o usuário da forma como você deseja.
Quais são os formatos de cores em HTML?
Confira a seguir quais são os principais padrões de cores em HTML. Saiba como esses códigos são formados e como identificar as tonalidades mais claras e mais escuras, além dos tons mais luminosos e opacos.
Cores hexadecimais
O código de cores hexadecimais é formado por seis letras ou números precedidos pelo caractere #. Os dois primeiros elementos desse código representam a intensidade do vermelho, o terceiro e o quarto mostram a intensidade do verde. Já os dois últimos simbolizam a intensidade do azul.
A cor que aparece no layout do site é uma combinação dessas três cores em intensidades diferentes. Os valores das cores hexadecimais variam de FF (para os tons mais claros) a 00 (tonalidades mais escuras). Por exemplo, o código #FF0000 representa a intensidade máxima da cor vermelha.
Na tabela de cores em HTML há mais de 100 códigos de cores hexadecimais entre as tonalidades mais utilizadas.
Cores RGB
O nome RGB é formado pelas iniciais das cores red (vermelho), green (verde) e blue (azul). Cada uma dessas tonalidades apresenta um valor que varia de 0 a 255. Assim como ocorre com o código de cores hexadecimais, a intensidade dessas tonalidades determina a cor que aparece no site.
O código para o branco em RGB, por exemplo, é (255,255,255), já o código para o preto é (0,0). Na tabela de cores em HTML, há mais de 100 valores de cores RGB entre as tonalidades mais utilizadas.
Cores RGBA
A diferença entre o RGB e o RGBA é o Alpha. Este é um elemento usado para indicar o nível de opacidade de uma tonalidade, podendo variar de 0.0 (transparente), até 1.0 (opaco). Esse sistema é muito utilizado quando é necessário fazer alguma sobreposição.
Cores HSL
HSL é a sigla de Hue, Saturation e Lightness, que traduzido para o português fica tom, saturação e luminosidade. Nesse sistema, o tom é medido em ângulos expresso em graus. Já a saturação e a luminosidade são identificadas por meio de uma porcentagem, sendo 0% para preto e 100% para branco.
Cores HSLA
Assim como ocorre com o RGBA, no HSLA há a adição do elemento Alpha, que também varia de 0.0 (transparente) até 1.0 (opaco).
A seguir, você pode conferir algumas dessas cores em formato copiável para usar em seu projeto:
| Nome da cor (Português) | Código Hexadecimal |
|---|
| Preto | #000000 |
| Branco | #FFFFFF |
| Vermelho | #FF0000 |
| Verde | #008000 |
| Azul | #0000FF |
| Amarelo | #FFFF00 |
| Laranja | #FFA500 |
| Rosa | #FFC0CB |
| Roxo | #800080 |
| Marrom | #A52A2A |
| Cinza | #808080 |
| Ciano | #00FFFF |
| Magenta | #FF00FF |
| Verde Claro | #90EE90 |
| Azul Claro | #ADD8E6 |
| Violeta | #EE82EE |
| Bege | #F5F5DC |
| Azul Marinho | #000080 |
| Verde Lima | #00FF00 |
| Dourado | #FFD700 |
| Prata | #C0C0C0 |
| Caqui | #F0E68C |
| Coral | #FF7F50 |
| Esmeralda | #50C878 |
| Púrpura | #9370DB |
| Azul Céu | #87CEEB |
| Marrom Claro | #D2B48C |
| Rosa Claro | #FFB6C1 |
| Turquesa | #40E0D0 |
| Verde Floresta | #228B22 |
Qual padrão de cores em HTML escolher?
Você pode escolher o padrão de cores em HTML que gostar mais para aplicar no seu site. Contudo, geralmente, as cores RGB e HSL são mais usadas nos casos em que as tonalidades precisam ser alteradas manualmente.
Como escolher as cores ideais para um site?
Na hora de escolher as cores para um site é necessário levar em consideração a imagem que a sua marca quer transmitir. Dessa forma, será possível criar uma página estratégica, para que a marca possa alcançar os objetivos traçados no ambiente digital.
Contudo, também é fundamental considerar a usabilidade do site e o conforto e a experiência do usuário. Isso porque sites mal planejados ou que usam cores sem contraste podem afastar os usuários. Isso, por sua vez, pode prejudicar a reputação da marca na internet.
Portanto, confira a seguir quais são os principais fatores a se considerar na hora de escolher as cores ideais para um site.
Pense na marca
Algumas marcas usam tão bem uma cor que é quase impossível não associá-las àquela tonalidade. Um bom exemplo de uso de cor é o que o Nubank fez com o roxo. Hoje, dificilmente uma pessoa vê essa cor e não a associa rapidamente ao banco digital.
Se você quer ter uma marca forte e que seja sempre lembrada pelas pessoas, será necessário escolher bem uma cor para representá-la. Na hora de definir qual tonalidade usar, considere os produtos que a sua empresa vende. Pense também no estilo do seu negócio e a imagem que a sua marca deseja transmitir para a sociedade.
Após analisar esses aspectos, você define quais cores representam melhor a sua empresa e criar uma identidade visual para a sua marca. Contudo, para fazer isso de uma maneira mais estratégica, é importante conhecer a psicologia das cores.
Aplique a psicologia das cores
Segundo a psicologia das cores, cada cor possui um significado e é capaz de despertar diferentes emoções, sensações e comportamentos. O branco, por exemplo, simboliza a pureza, paz e limpeza.
Já o preto remete à dor e a tristeza, mas também pode simbolizar luxo e poder. Uma marca que usa muito bem o preto para representar a sua luxuosidade e exclusividade é a Chanel.
O vermelho, por sua vez, simboliza a paixão e a excitação, mas dependendo do contexto também pode representar raiva e perigo. Essa tonalidade também pode instigar uma sensação de urgência, por isso, ela já foi utilizada por algumas empresas de fast food.
As tonalidades verdes remetem à natureza. Além disso, essa cor também simboliza a esperança e a fertilidade. Já o azul remete à calma e a tranquilidade, também podendo transmitir equilíbrio.
Portanto, na hora de escolher a cor dominante da sua marca, é interessante considerar a psicologia das cores. Se você vende produtos orgânicos, por exemplo, pode ser uma boa ideia usar o verde, já que ele remete à natureza. Assim, sempre que alguém entrar no seu site ou ver o logo da sua empresa, vai captar a sua mensagem.
Combine com cuidado
Após escolher a cor principal da sua marca, será necessário escolher as cores do seu site. Nesse momento é preciso ter cuidado, pois, se você não fizer uma boa combinação, a experiência do usuário será afetada.
Caso escolha uma cor muito chamativa, como o vermelho, por exemplo, pode ser interessante somente usá-la em alguns pontos do seu site. Opte por usá-la em banners, menus e botões de CTA, por exemplo. Caso contrário, a sua página ficará muito carregada, o que pode afastar as pessoas.
Uma marca que usou uma estratégia parecida foi o próprio Nubank. No site da empresa, a tonalidade roxa é usada apenas em pontos estratégicos, e não como a cor dominante da página.
Na hora de escolher as cores, opte por tonalidades que apresentem um alto contraste ou que se complemente. Ao fazer isso, será possível melhorar a experiência do usuário e deixar o seu site mais atrativo.
Para saber quais cores se complementam e quais tonalidades são contrastantes, você pode utilizar um círculo cromático. Também vale a pena fazer vários testes até encontrar uma combinação que fique bonita, agradável e condizente com a sua marca.
Lembre-se dos contextos culturais
Outro fator que você deve considerar na hora de escolher as cores é o contexto cultural. Afinal, os significados das cores podem variar de acordo com cada cultura. No ocidente, por exemplo, o branco remete à paz, mas em alguns países asiáticos essa tonalidade simboliza a morte.
Conclusão
Saber como escolher as cores para o seu site é fundamental para a boa comunicação com o público-alvo. Além disso, faz com que consiga ser mais lembrada e reconhecida pelas pessoas em geral.
Para criar um site que ajude a atingir esses objetivos, é necessário saber o que são cores em HTML e como usá-las. Portanto, aproveite as informações apresentadas neste artigo para fazer sites mais estratégicos e agradáveis.
Continue no blog da HostGator para conferir mais conteúdos sobre desenvolvimento de sites. Aproveite também para conferir os posts abaixo: