Porque a escolha e o uso de cores são importantes em um projeto?
Uma arte colorida é bonita, mas é interessante pensarmos que não é só isso que justifica o uso de cores em nossos trabalhos, seja ele um site, um logo ou até mesmo uma imagem de divulgação para mídias sociais.
A cor é o elemento da linguagem visual que tem maiores afinidades com as emoções, ou seja, tem grande força e pode ser usada com muito proveito para expressar e intensificar a informação visual.
Quando se lida com a emoção dos espectadores, cria-se uma “imagem emocional”, e então a influência da situação com o expectador ganha importância.
A seleção das cores é algo muito pessoal. Temos nossas cores preferidas, mas quando vamos desenvolver um trabalho para outra pessoa, entidade ou empresa, pode ser que tenhamos que trabalhar com cores que não nos sentimos muito à vontade. Por isso é sempre muito importante qie entendamos que as cores se combinam e experimentam seus elos.
Por exemplo, as cores frias possuem matizes azulados e esverdeados, enquanto as cores quentes têm matizes amarelados e avermelhados.
Existe muitos materiais disponíveis que nos mostram o significado das cores e a influência que elas propiciam e não é nosso interesse nos estendermos muito nesse assunto. O ponto importante aqui é que você deve ver e trabalhar as questões de escolha de cores com seriedade e buscando sempre informações complementares que o auxiliem a chegar ao melhor resultado.
Vai desenvolver um trabalho para o qual foi solicitado. Muito bem. A primeira pergunta a ser feita é:
- A empresa / Entidade / Projeto possui logo?
Existe uma identidade visual?
Existe um manual da marca disponível?
Se sim, ela possuirá cores que te auxiliarão no processo.
Se não, você terá que pensar bem sobre o tema e identificar que cores poderão ser utilizadas.
A criação da logo pode ser um serviço extra que você pode sugerir e agregar ao trabalho que foi contratado (se não é esse o foco do contrato).
Uma outra forma de identificar ou ter ideia de cores a serem utilizadas é verificar se existe alguma publicação em mídias sociais ou algum material impresso. Isso pode servir de base.
Se você ainda não conseguiu identificar nada, pergunte sobre sites e materiais que o cliente goste e analise isso, pois pode ser uma boa base para formar o modelo para o projeto.
Agora que você já tem algumas cores disponíveis, pode avançar no processo, ajustando as cores às diferentes funções que elas exercerão. Em um site, por exemplo, elas estarão presentes em elementos como:
- fundo (banners, páginas, chamadas etc.)
- títulos
- textos
- botões
- ícones
- elementos gráficos
No caso de criação de um site, essas cores poderão ser setadas já como cores padrões no gerenciador do site, mais especificamente nos componentes de template utilizados no site, que dependerá de qual sistema/produto você está utilizando para criar seu site.
É sempre muito importante olhar referências, por exemplo, outros sites, sites semelhantes, sites famosos etc.
As cores podem ser separadas em tonalidades:
- preto e cinza escuro
- branco e cinza claro
- azul escuro e azul claro
- e assim por diante
Aqui mesmo no canal existe um tutorial sobre o círculo cromático, que poderá lhe auxiliar nesse processo de escolha de cores e tons:
Na internet existem diversos sites que lhe auxiliarão na escolha de suas cores. Em muitos deles você pode utilizar uma imagem para que o site monte sua paleta de cores. Veja alguns exemplos:
- https://paletadecores.com/
- https://color.adobe.com/pt/
- https://mycolor.space/ (a partir de uma cor escolhida ele gera paletas)
Veremos aqui 3 esquemas básicos para definirmos nossas cores, que podemos, de uma forma simples, associar ao destino de nossas imagens:
- RBG – visualização em monitores
- CMYK – Impressão (camisetas, panfletos, cartões etc.)
- Hexadecimal – nas configurações de cores em sites e estilos web.
Eles não são exclusivos e podem conviver em um mesmo projeto. Uma mesma cor será definida em:
- RBG para uma galeria de imagens, em um utilitário gráfico, por exemplo
- CYMK para um arquivo que será impresso em papel ou em uma camiseta
- Hexadecimal nas configurações do modelo do site
Se você informar no arquivo que será impresso o "código" RGB, sua imagem poderá sofrer uma leve distorção, quando você dirá: "hum... no monitor é diferente do que no papel.
Entendeu?
Vamos começar procurando entender que existem duas formas de se formar uma cor, uma é através da tinta, e a outra é através da luz. Cada tipo de termo corresponde à um tipo de utilização, vejamos a seguir:
RGB
Estas letras significam em inglês: RED, GREEN e BLUE, ou seja, Vermelho, Verde e Azul, que são as cores primárias que compõe o formato em componentes que emitem luz, por exemplo, se for fazer uma postagem para redes sociais para manter no computador o ideal é utilizar este esquema de cor, utilizar o CMYK por exemplo alteraria os tons com maior diferença entre um dispositivo ou outro, além de limitar o número de variações durante a confecção do projeto.
Cada cor que compõe o RGB tem 255 variações de tons para cada cor, ou seja, para compor uma cor você precisa identificar o quanto vai de cada cor primária em números, por exemplo: Se eu quiser um preto, terei 0 de Red, 0 de green e 0 de blue, sem luz, ficamos no escuro certo? Se eu quiser um branco, eu vou adicionar o máximo de cada cor para ficar bem iluminado! 255 de red, 255 de green e 255 de blue. A mistura destas 3 cores bases formam todas as outras cores que você consegue enxergar no seu tablet, celular, televisão, computador, etc…
A representação é algo como:
rgb(73,107,198) - Vermelho: 73, Azul: 107 e Verde: 198
CMYK
Seguindo o mesmo pensamento do RGB, o CMYK representa suas cores que a compõe: Cyan, Magenta, Yellow e Key, quer dizer, alguns tons Azul claro, Rosa avermelhado, Amarelo e cor chave que é a preta (key), a qual dará os tons entre elas. Diferente do RGB, o CMYK é controlado por porcentagem, ou seja, o quanto de cada cor terá em sua composição, quanto mais baixa, mais clara ela é. Se eu quero chegar à um branco vou utilizar: 0% de Cyan, 0% de Magenta, 0% de Yellow e 0% de preto. Se eu quero um Azul claro, vou utilizar 50% de Cyan, 0% de Magenta, 0% de Yellow e 0% de preto por exemplo…
A cor acima citada seria representada em CMYK assim:
cmyk(63%, 46%, 0%, 22%) - Cyan 63%, Magenta 46%, Ywllow 0% e Key (preto) 22%
Hexadecimal
O Hexadecimal é o sistema de numeração muito utilizado na programação de microprocessadores, em especial nos equipamentos e máquinas de estudo e sistemas de desenvolvimento. Trata-se de um sistema de numeração posicional que representa os números em base 16, sendo assim, utilizando 16 símbolos. Este sistema utiliza os símbolos 0, 1, 2, 3, 4, 5, 6, 7, 8 e 9 do sistema decimal, além das letras A, B, C, D, E e F.
A nomenclatura “hexadecimal” é usada devido aos termos “hexa” que significa “6” e “deci” que representa “10”, portanto indicando a base 16. A grande vantagem de utilizar o sistema hexadecimal torna-se clara à medida que os números vão se tornando maiores. Com o formato hexadecimal é possível aumentar em até 256 combinações distintas para cada cor, bem mais que as 100 combinações diferentes possíveis nos outros padrões.
É interessante entender que o formato hexadecimal se baseia de forma muito similar ao RBG, porém, com uma possibilidade de participação maior para cada cor. Por exemplo, para a cor branca no formato RGB seria RGB(100,100,100), ou seja, o máximo de cada cor. Em hexadecimal, sua representação será #FFFFFF que é a representação de cada for, haja vista de FF é o maior valor que se pode ter (o equivalente a 100%).
Pode parecer besteira. Você pode escolher uma cor, olhar na tela, imprimir e usar num site e não notar a menor diferença, mas para alguns casos isso poderá ser visível. Por outro lado, alguns sistemas gerenciadores de sites utilizam o formato hexadecimal e por isso é importante entendê-lo. As páginas mostradas no site utilizam o sistema de CSS (Cascading Style Sheets) que utiliza essa formatação.
Mesmo que você utilize um sistema de criação de páginas que seja 100% visual, ao inserir um texto na cor vermelha, muitas vezes o que será impresso no arquivo será:
<font color="#FF0000"> Este texto está em vermelho </font>
100% de vermelho, 0% de verde e 0% de azul
Veremos mais nuances e possibilidades quando estivermos tratando desse assunto especificamente.
Sim, podemos converter uma cor escolhida de um formato para outro. Muitos programas gráficos já permitem salvar os arquivos em esquemas de cores distintos.
Existem até conversores online que fazem esse trabalho pra você. Separei alguns aqui:
Bem, acredito que agora podemos ter um potencial maior para analisarmos as cores que utilizaremos, entendendo que elas serão as mesmas, porém a tratativa será um pouquinho diferente, dependendo de onde as utilizaremos.
