Cores e nuances são importantes para a visualização e a compreensão de componentes de mídias digitais. Sinalizam funcionalidades, convenções, ações dos usuários. Sua escolha está relacionada à natureza das informações, bem como à estrutura comercial e editorial do produto. As cores de uma interface se explicitam em uma palheta, à qual se relacionam os outros elementos do layout.

A palheta de cores de um aplicativo online sistematiza as variações de cores, tons e subtons do layout e suas aplicações em cada elemento funcional, editorial, explicitando as cores principais e secundárias aplicadas em cada um.

Deve constar das especificações de projeto, para consulta depois do lançamento do canal online, de modo que a manutenção e a atualização possam manter a consistência cromática tanto dos elementos previstos no projeto quanto dos elementos criados a partir das necessidades do dia-a-dia. A aplicação adequada da palheta facilita o uso da interface, mantém o senso de unidade editorial e funcional entre páginas e entre unidades de informação, e cria empatia afetiva.

A relação funcional pode ser sinalizada facilmente com o uso de famílias de cores. A semelhança de tons em elementos com funções semelhantes cria associações imediatas sobre seu modo de uso (mais do que a proximidade espacial ou seu agrupamento).

Se a palheta tiver muitas cores, é importante estabelecer as dominantes e as suas relações com as outras, mesmo que a identidade se estabeleça conceitualmente.

As cores da palheta são usadas para

Reforçar a aderência do layout ao conceito comercial, editorial e funcional.

Criar identidade entre os elementos, aqueles com funcionalidades e enfoques relacionados.

Sinalizar relacionamentos entre elementos.

O mapa de Amsterdam neste aplicativo sinaliza por meio das cores as distâncias das áreas urbanas em relação ao centro da cidade.
O mapa neste aplicativo sinaliza por meio das cores as distâncias das áreas urbanas em relação ao centro da cidade.

Criar identidade para áreas da arquitetura da informação, para que os usuários associem uma cor a cada uma e as encontrem facilmente.

Distinguir itens com funcionalidade ou conteúdo diferentes.

No site ilustrado acima, os fundos preto e branco são usados para diferenciar as áreas de informações referentes à programação dos dois teatros. A área do Théâtre de la Ville tem fundo branco e área do teatro Les Abbesses tem fundo preto. Há variações complementares também nas cores das letras, que combinam de maneira alternada o vermelho, o branco e o preto nos títulos e nos créditos das peças (acesso em 18.5.2006)
Fundos preto e branco usados para diferenciar as áreas de informações referentes à programação de dois teatros. A área do Théâtre de la Ville tem fundo branco e a do teatro Les Abbesses tem fundo preto. Há variações complementares também nas cores das letras, que combinam de maneira alternada o vermelho, o branco e o preto nos títulos e créditos das peças (acesso em 18.5.2006)

Conduzir a ação do usuário em elementos de navegação e de ação.

Valorizar o contraste entre as cores de fundo e a cor dos textos. A legibilidade dos textos fica difícil e cansativa quando o contraste entre texto e fundo é insuficiente (as formas das letras ficam indefinidas).

Muitos especialistas afirmam que o fundo branco com letras pretas é uma combinação que garante máximo contraste e legibilidade. No entanto, o oftalmologista Leôncio Queiroz Neto, do Instituto Penido Burnier, de Campinas, depois de pesquisar 620 usuários de computador afirma o contrário: a cor branca em tela é prejudicial à visão, especialmente para usuários idosos.

O uso exagerado de meios-tons e nuances também demanda grande esforço visual, para o discernimento das diferenças. O ideal é que os sites, programas e emails tenham fundos em tons pastéis, mais reflexivas e sobre os quais é mais fácil de enxergar. (O Globo, Info Etc., 19.3.2007)

Influências da seleção cromática

Apesar de facilitar a sinalização dos elementos (links, textos, botões, setas), o uso de cores não é, em si suficiente para explicar suas funcionalidades.

Mesmo quando uma cor é utilizada para prover informação de uso (como o vermelho de um botão, para enfatizar a importância de uma ação), a presença de rótulos que reafirmem o conceito associado ao elemento garante maior precisão do uso.

É importante também considerar que a localização do elemento é reconhecida como um fator que atrai mais os movimentos dos olhos dos usuários do que a cor. E outros fatores importantes, como contexto de uso, tamanho e movimento, também afetam o resultado.

O vermelho e o verde são cores que muitos usuários não distinguem e seu uso em elementos críticos de uso e na identificação de conteúdo pode confundir o usuário. Por isso, as soluções cromáticas que sejam redundantes em relação à composição espacial e ao tamanho dos elementos facilitam sua reiteração por outros fatores de acesso.

Para evitar problemas de usabilidade para estes usuários, a rigor as páginas devem poder ser vistas sem qualquer cor. Alguns designers desenham a interface em preto e branco e só acrescentam a cor no final, para valorizar a hierarquia entre os elementos.

Os elementos de uma palheta de cores baseada em verdes, como os links ilustrados no exemplo, devem ser bastante contrastados, para facilitar a visualização. Neste caso a cor é um elemento conceitual importante na afirmativa de um site sobre plantas, mas o layout não depende da distinção da cor para se manter estruturado
Os elementos de uma palheta de cores baseada em verdes, como os links ilustrados no exemplo, devem ser bastante contrastados, para facilitar a visualização. Neste caso a cor é um elemento conceitual importante na afirmativa de um site sobre plantas, mas o layout não depende da distinção da cor para se manter estruturado

O uso de CSS para configurar as características de links e outros elementos da interface ajuda às pessoas com deficiência visual, pois permite que substituam as configurações do projeto pelas de sua conveniência.

Padrões ou texturas no fundo afetam a legibilidade dos textos e devem ser utilizados com cuidado e critérios bem claros para o usuário. Também o emprego de muitas cores diferentes pode afetar a compreensão do conteúdo pelo usuário, criando um conjunto visualmente saturado.

A consulta a uma roda de cores facilita a seleção de agrupamentos de cores, especialmente das que se posicionam próximas umas das outras. A aplicação de cores localizadas em lados opostos do gráfico – as chamadas “cores complementares” – pode dificultar a leitura ou a discriminação de elementos. (ver exemplo de roda de cores em ColorWise)

O uso de cores deve ser testado com usuários tanto durante o projeto do aplicativo quanto depois de seu lançamento. Em alguns casos, as regras sobre a consistência da aplicação das cores a cada elemento podem ser colocadas em xeque pela observação direta do uso.

Há casos em que a cor do carrinho de compras varia em cada etapa da finalização de uma compras, outros em que as cores dos botões com uma função devem ser completamente diferentes das utilizadas na palheta geral. Os critérios são avaliados a cada caso, de acordo com sua funcionalidade e com a ação que se espera que o usuário realize.

As cores do botão do aplicativo foram testadas e verificou-se que os botões laranja criaram uma aumento no número de reservas de 7.8%. (Wichtestwon, acesso em 20.5.2015)
As cores do botão do aplicativo foram testadas e verificou-se que os botões de cor laranja criaram uma aumento no número de reservas de 7.8% em relação aos botões azuis. (WichTestwon, acesso em 20.5.2015)

O contexto de uso influencia a decisão sobre o uso de cores e de contraste na interface. Num dispositivo móvel, botões que chamam para a realização de ações são especialmente contrastadas visualmente. No exemplo acima, vê-se nas duas opções a valorização do contraste dos botões em relação aos outros elementos para a escolha das opções oferecidas. E, no alto, também em destaque (embora não tão contrastado), o botão para contato telefônico, especialmente importante nesse tipo de canal.

Cores para a web

Quando a web se disseminou, a partir de 1994, os monitores dos computadores tinham recursos limitados e mostravam poucas cores. Os designers e desenvolvedores, para garantir a homogeneidade das cores aplicadas em seus projetos, precisavam recorrer a palhetas comuns a diversas plataformas para assegurar a consistência dos layouts e de seus elementos.

Os navegadores trabalhavam com as palhetas dos sistemas operacionais dos computadores PCs, Macs, Unix. As cores das imagens (vetoriais especialmente) se adaptavam a estas palhetas.

Hoje os computadores dispõem de mais memória, processadores mais rápidos e potentes, e os monitores não apresentam as mesmas restrições. A necessidade de uso das palhetas comuns a todas as plataformas diminuiu.

No entanto, com o aumento do acesso à web por dispositivos móveis, muitos desenvolvedores ainda utilizam a palheta de cores “web-safe” como referência para a escolha de cores básicas.

Embora diferentes entre si, as palhetas compatíveis com a web usam 216 cores comuns, sendo 40 para o sistema operacional. A palheta de 216 cores tem 6 vermelhos, 6 verdes e 6 azuis.

Os valores hexadecimais destas cores sempre incluem os valores 00, 33, 66, CC e FF. Qualquer combinação destes valores cria cores compatíveis com todas as plataformas. 16 destas cores estão listadas nas especificações da HTML 4.01, com nomes que podem ser utilizados ao invés das combinações de valores (black, silver, gray etc. – exemplo da lista completa em http://www.morecrayons.com/).

O sistema de cores hexadecimais usa números de 0 a 9 e letras de a a f em qualquer combinação de seis dígitos, começando pelo símbolo “#”. As diversas combinações representam as cores do sistema de luz, vermelho, verde e azul. Exemplo: #ffcc99 (ff representa a intensidade do vermelho, cc representa a intensidade do verde e 99 representa a intensidade do azul).

O valor FF significa saturação máxima (em #ffcc99, há máxima saturação de vermelho). O valor “0” significa saturação de 0. Todos os valores intermediários representam diferentes valores de saturação e brilho.

Como as telas atuais processam cores a 32 e 64 bits, a palheta web-compatível é menos utilizada, embora ainda garanta a consistência das tonalidades entre sistemas operacionais e browsers em elementos em que a precisão é necessária, como marcas e logotipos.

Atualmente é mais utilizada a palheta do cubo com 16-por-16-por-16 cores, combinando os valores 00, 11, 22, 33, 44, 55, 66, 77, 88, 99, aa, bb, cc, dd ee e ff, gerando uma gama de cores compatíveis com monitores que suportam de milhares a milhões de cores.

(Atualizado em 27.2.2017)

 

Recursos, ferramentas para criação de palhetas e esquemas de cores

Adobe Color Wheel, opções de cores flat com código hexadecimal (acesso em 20.5.2015)

Flat UI Color Picker, opções de cores flat com código hexadecimal (acesso em 20.5.2015)

Flat UI Colors, opções de cores flat com código hexadecimal (acesso em 20.5.2015)

CSS Gradient Generator, gera CSS de degradês configuráveis (acesso em 17.5.2015)

Eric Meyer Color Blender, aplicativo online que gera somas de cores com degradês intermediários (acesso em 17.5.2015)

Color Schemer Online, aplicativo desktop ou online que gera palhetas de cores seguindo escolha dinâmica (acesso em 17.5.2015)

Coolors, gera palhetas de cores seguindo escolha dinâmica (acesso em 8.9.2014)

HexColorTool, ferramenta online que escurece ou clareia cores hexadecimais (acesso em 1.5.2013)

Color wheel

Find the paletes you like (acesso em 18.2.2012)

Ultimate CSS Gradient Generator (acesso em 6.1.2012)

Colorschemedesigner.com (acesso em 7.1.2010)

Color Scheme Generator – programa para a criação de palhetas a partir de roda de cores

Thecolorlovers – comunidade de artistas que compartilham cores, palhetas, padrões, discutem tendências (acesso em 17.5.2015)