Adaptado do nosso livro futuro UI de refatoração

Você já viu esses geradores modernos de paletas de cores? Ao escolher uma cor, ajuste alguns parâmetros com frases musicais como "tríade" ou "quarta major" - e obtenha cinco cores perfeitas para o seu site?



Essa abordagem computacional e científica para escolher o esquema de cores perfeito é extremamente sedutora, mas não muito útil.

Bem, se você não deseja que o site fique assim:

O que você realmente precisa

Você não fará nada com cinco códigos hexadecimais. Construir algo real requer uma paleta muito mais completa.



Uma boa paleta de cores pode ser dividida em três categorias.

Cinza

Texto, plano de fundo, painéis, elementos de formulário - quase tudo isso existe na interface cinza.



E você precisará de mais cores cinza do que pensa. Parece que três ou quatro tons são muito, mas muito em breve você desejará algo um pouco mais escuro que o tom 2, mas um pouco mais claro que o tom 3.

Na prática, é aconselhável escolher entre 8 e 10 tons (mais sobre isso mais tarde). Isso não é o suficiente para procurar a diferença entre os tons n ° 77 e 78, mas uma quantidade suficiente.



O preto verdadeiro, por via de regra, parece antinatural, então comece com um cinza muito escuro e mude gradualmente para o branco.

Cores primárias

A maioria dos sites precisa de uma ou duas cores para ações básicas, elementos de navegação etc. Essas cores definem a aparência geral do site: aquelas que fazem você pensar no Facebook como "azul", embora na verdade seja principalmente cinza.

Assim como na paleta cinza, você precisa selecionar uma paleta (5 a 10) de tons mais claros e escuros.



Os tons mais claros podem ser úteis como pano de fundo colorido para itens como alertas, enquanto os mais escuros são ótimos para texto.

Cores de destaque

Além dos principais, cada site precisa de várias cores de destaque para se comunicar com o usuário.

Portanto, para destacar uma nova função, você pode escolher uma cor atraente, por exemplo, amarelo, rosa ou azul esverdeado:



Também podem ser necessárias cores para enfatizar diferentes estados semânticos, por exemplo, vermelho para confirmar ações destrutivas:



... amarelo para avisos:



... ou verde para enfatizar uma tendência positiva:



E algumas tonalidades dessas cores, embora devam ser usadas com moderação na interface do usuário.

Se você criar um design no qual a cor ajude a distinguir ou classificar elementos semelhantes (por exemplo, linhas em gráficos, eventos de calendário ou tags em um projeto), poderão ser necessárias mais cores de destaque.

Em geral, uma interface do usuário complexa geralmente exige até dez cores diferentes, com 5 a 10 tons cada.

Definir tons antecipadamente

Quando uma sombra um pouco mais clara ou mais escura é necessária, você não precisa usar as funções do pré-processador CSS, como clarear ou escurecer. Então você acaba com 35 azuis ligeiramente diferentes, todos com a mesma aparência.

Em vez disso, defina um conjunto fixo de tons para escolher.



Como fazer essa paleta?

Primeiro escolha uma cor de base

Comece com a cor base na qual os tons claros e escuros se baseiam.

Não existe uma maneira científica real, mas para cores básicas e de destaque, uma boa regra é escolher uma tonalidade que funcione bem com o fundo do botão.



É importante observar que não existem regras reais aqui, como "começar com 50% de brilho" ou algo semelhante. Cada cor se comporta um pouco diferente, então você precisa confiar apenas no seu gosto.

Definir limites

Em seguida, selecione os tons mais escuros e mais claros. Essa também não é uma abordagem científica, mas ajuda a imaginar onde as cores serão usadas e escolhê-las de acordo com este contexto.

A sombra mais escura é geralmente deixada para o texto e a mais clara - para o plano de fundo do elemento. Um alerta simples é um bom exemplo de combinação dessas cores.



Comece com uma cor que corresponda ao tom da cor principal e altere a saturação e o brilho até ficar satisfeito.

Preencha os espaços em branco

Se você optou pelos tons básico, escuro e claro, resta apenas preencher as lacunas entre eles.

Para a maioria dos projetos, você precisa de pelo menos cinco tons por cor e, de preferência, mais perto de dez, para não se sentir envergonhado.

Nove é um grande número porque divide bem, o que facilita um pouco o preenchimento dos espaços em branco. Vamos chamar a sombra mais escura de 900 , a base 500 e a mais clara 100 .

Comece escolhendo tons de 700 e 300 , que estão bem no meio dos dois intervalos: eles serão o compromisso perfeito entre os tons de ambos os lados.



Isso cria mais quatro intervalos na balança ( 800 , 600 , 400 e 200 ), que são preenchidos da mesma maneira.



No final, você obtém um conjunto de cores bastante equilibrado, o suficiente para realizar suas idéias de design.

E os cinzas?

Com tons de cinza, a cor base não é tão importante, mas, caso contrário, o processo é o mesmo. Comece pelas bordas e preencha os espaços em branco até obter a paleta certa.



Escolha a tonalidade mais escura pela cor do texto mais escuro do projeto e a mais clara - aquela que funciona bem como um fundo claro, quase branco.

Isto não é uma ciência.

Não importa como você deseja, você não deve confiar apenas na matemática para escolher a paleta de cores perfeita.

Uma abordagem sistemática como a acima é ótima para começar, mas não tenha medo de alterá-la, se necessário.

Assim que você realmente começar a usar suas cores no projeto, quase inevitavelmente você desejará alterar levemente a saturação de um determinado tom ou tornar alguns tons mais claros ou mais escuros. Confie nos seus olhos, não nos números.

Apenas tente não adicionar muitos novos tons quando for opcional. Se você não limitar a paleta, geralmente poderá ficar sem um sistema de cores.