A versão curta
- Um esquema de cores monocromático usa um único matiz numa gama de luminosidade e saturação, construída a partir de claros, escuros e tons.
- Um claro é um matiz misturado com branco, um escuro é um matiz misturado com preto e um tom é um matiz misturado com cinzento.
- Uma escala monocromática útil tem cerca de nove ou dez degraus, do quase branco ao quase preto, espaçados por igual na luminosidade percebida.
- Deslocar ligeiramente o matiz nas pontas clara e escura evita que uma paleta monocromática pareça sem vida.
- As paletas monocromáticas dão gradientes calmos e coesos, mas as misturas lentas de um só matiz criam faixas com facilidade e beneficiam de grão fino.
Nesta página
Um esquema de cores monocromático usa um matiz e mais nada, variado em luminosidade e saturação. Pensa em azul-marinho, cobalto, azul-céu e gelo: todos azuis, todos claramente aparentados, e com contraste suficiente entre eles para fundos, texto e realces. Como todas as cores partilham o mesmo matiz, uma paleta monocromática parece sempre unificada. O trabalho está em construir amplitude suficiente dentro desse único matiz.
Este guia trata das três formas de variar um matiz, de como construir uma escala com que se consiga mesmo desenhar e de como o monocromático funciona nos gradientes. Para o contexto mais amplo, vê noções básicas de teoria da cor.
Claros, escuros e tons
Cada cor de uma paleta monocromática nasce de um de três movimentos. Um claro acrescenta branco, tornando a cor mais leve e suave. Um escuro acrescenta preto, tornando-a mais profunda. Um tom acrescenta cinzento, tornando-a mais discreta sem mudar muito a sua luminosidade.
Como construir uma paleta monocromática
Uma mão-cheia de claros ao acaso não é uma paleta. O que queres é uma escala: uma sequência de degraus do quase branco ao quase preto, espaçados por igual para que cada degrau pareça tão diferente do vizinho como o anterior. Nove a onze degraus é um tamanho comum, e é o que a maioria dos sistemas de design usa.
- 1
Escolhe o matiz central
Escolhe a versão da cor de que mais gostas com intensidade máxima. Torna-se o meio da escala.
- 2
Define as pontas
Escolhe um quase branco com um toque do matiz e um quase preto com um toque do matiz. Evita o branco e o preto puros; parecem desligados.
- 3
Preenche os degraus pela luminosidade
Espaça os degraus pela luminosidade que aparentam, não por valores iguais de hex ou HSL. Espaços percetuais como o OKLCH facilitam isto; vê gradientes OKLCH.
- 4
Baixa a saturação nas pontas
Os degraus muito claros e muito escuros ficam melhor ligeiramente esbatidos. Saturação máxima nos extremos parece berrante ou turva.
- 5
Desloca um pouco o matiz
Deixa a ponta clara derivar ligeiramente para o quente ou o frio e a ponta escura para o lado oposto. Dá vida sem quebrar o esquema.
Porque é que uma ligeira deslocação do matiz ajuda
Os objetos reais raramente escurecem só por lhes juntarmos preto: as sombras apanham luz mais fria ou mais quente do que as rodeia. Uma escala que só mistura preto e branco parece plana em comparação. Deslocar o matiz alguns graus ao longo da escala é prática corrente na ilustração e nos sistemas de design.
#2563eb. A segunda deriva para o azul-céu na ponta clara e para o índigo na escura, por isso parece iluminada e não misturada.Uma identidade inteira com um só matiz
Uma marca monocromática pode ser surpreendentemente distinta, porque é disciplinada de uma forma que a maioria das marcas não é. O truque é dar a cada degrau da escala uma função e cumpri-la.
| Degrau da escala | Função |
|---|---|
| 50 a 100 | Fundos de página e de cartões |
| 200 a 300 | Contornos, divisórias, preenchimentos discretos |
| 400 a 600 | Cor da marca, botões, ilustração |
| 700 a 800 | Títulos, ligações, preenchimentos fortes |
| 900 e mais escuros | Texto corrido, fundos em modo escuro |
Junta sempre o texto e o fundo a partir de pontas opostas da escala. Dois degraus do meio ficam lindos como amostras e falham como texto; verifica com as orientações de contraste de cor. Regista a escala, com a função de cada degrau, no teu kit de marca para que todos usem os mesmos valores.
Um campo calmo, de uma só família, sob tipografia editorial.
O mesmo visual levado para um cabeçalho de email.
A única coisa que falta a uma identidade monocromática é um acento evidente. Se os teus designs precisam que um botão ou um preço salte à vista, permite uma cor de fora do matiz e usa-a raramente. Isso leva-te para uma paleta análoga ou para um monocromático com acento, ambos perfeitamente válidos.
Gradientes monocromáticos
Os gradientes de um só matiz estão entre os mais elegantes que se podem fazer: sugerem luz a cair sobre um único material. Nunca ficam turvos, porque não há um segundo matiz com que lutar.
Perguntas frequentes
O que é um esquema de cores monocromático?
Um esquema de cores monocromático usa um único matiz numa gama de claros, escuros e tons, do muito claro ao muito escuro.
Qual é a diferença entre um claro, um escuro e um tom?
Um claro é um matiz misturado com branco, um escuro é misturado com preto e um tom é misturado com cinzento.
O preto e branco é um esquema monocromático?
Em rigor, o preto, o branco e o cinzento são acromáticos, ou seja, não têm matiz. No uso comum, as pessoas chamam-lhes muitas vezes monocromáticos, e seguem os mesmos princípios.
Quantas cores deve ter uma paleta monocromática?
Cerca de nove a onze degraus do quase branco ao quase preto dão amplitude suficiente para fundos, texto, contornos e cor da marca.
Uma marca pode usar apenas uma cor?
Sim, se a paleta tiver uma gama completa de luminosidade e cada degrau tiver uma função clara. Muitas marcas de uma só cor acrescentam um pequeno acento para os apelos à ação.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil
