Círculo cromático
A Roda de cores mostra uma fatia do espaço de cores OKLCh em uma única luminosidade: o matiz corre pela borda, o croma se estende do centro para fora, e a borda externa irregular é o limite real do que uma tela sRGB consegue exibir. Escolha um ponto e ela retorna os esquemas complementar, análogo, tríade, tétrade e complementar dividido, cada um rotacionado em OKLCh para que toda cor do esquema mantenha a luminosidade de onde partiu.
Este croma está fora de sRGB para esse matiz e essa luminosidade. As amostras mostram a cor mais próxima que sua tela consegue exibir: #0098a1.
Esquema
O matiz oposto dividido 30° para cada lado. Muito contraste com menos vibração visual.
3 cores
3.5 / 6.0
3.8 / 5.5
3.8 / 5.6
Taxas de contraste em branco e preto. Para texto corrido são necessários 4,5:1.
A cor escolhida
- HEX
- #0098a1
- RGB
- rgb(0 152 161)
- HSL
- hsl(183 100% 31.6%)
- Nome
- —
Prévia do esquema
Um parágrafo sobre a última cor do esquema para verificar a legibilidade antes de usá-la.
Como funciona o Círculo cromático?
Toda roda de cores que você já usou é uma fatia de um espaço de cores, e qual espaço seja esse decide se a roda tem algo a dizer. A conhecida é uma fatia do HSL a 50% de luminosidade. Olhe para ela: o amarelo no topo é ofuscante e o azul na base é quase preto, e o HSL chama os dois de 50% de luminosidade. Um esquema tirado dessa roda é um conjunto de cores que não têm nada em comum além de um ângulo.
Esta roda é uma fatia do OKLCh, cujo eixo de luminosidade acompanha o que o olho de fato relata. Com o controle deslizante em uma dada posição, cada pixel pintado tem a mesma luminosidade percebida — então percorrer a borda muda o matiz e só o matiz, e duas cores opostas formam de verdade um par equilibrado, em vez de uma gritar por cima da outra.
O que é a borda irregular
A área pintada não é um disco, e isso é a coisa mais informativa da página. O croma se estende do cinza do centro para fora, e um pixel só é pintado quando a cor que ele descreve existe no sRGB. O resultado é a forma real da gama naquela luminosidade: amarelos e verdes alcançam bem longe, azuis e violetas param cedo, e a figura inteira encolhe até um ponto conforme você arrasta o controle de luminosidade para qualquer um dos extremos — porque uma cor muito escura ou muito clara não consegue ser muito colorida.
Uma roda que preenchesse o disco estaria mentindo sobre isso. Ela pintaria a mesma cor recortada por toda a região fora da gama, e você escolheria um valor que a sua tela não consegue exibir sem nunca ser avisado.
Como os esquemas são calculados
Cada esquema é um conjunto de rotações de matiz — 180° para o complementar, ±30° para o análogo, passos de 120° para a tríade, 150° e 210° para o complementar dividido — aplicadas em OKLCh com luminosidade e croma mantidos. Se um matiz rotacionado cai fora da gama, o croma dele é reduzido por busca binária até caber, o que mantém matiz e luminosidade exatos e abre mão apenas da saturação que de qualquer forma não estava disponível.
Honesto sobre o que um esquema vale
Uma harmonia é uma relação aritmética, não um design. A tríade entrega três matizes a 120° um do outro; ela não conta que dois deles precisam ser esmaecidos a um décimo do croma antes que o terceiro possa ser o destaque. Interfaces são construídas em sua maioria a partir de um matiz e de uma rampa neutra, com um segundo matiz para uma ação destrutiva — a opção monocromática está mais perto do que sistemas de design reais publicam do que qualquer outra desta lista. Use a roda para achar as relações e depois jogue fora a maior parte da saturação.
Um ponto na roda
hue 202° chroma 0.150 lightness 0.62
Um esquema pronto para colar
split complementary #00a2b4 base #c48a2a +150° #d4739a +210°
Quais opções e casos-limite o Círculo cromático suporta?
| Parâmetro | Tipo | Padrão | Comportamento e casos-limite |
|---|---|---|---|
| Matiz | 0–360° | 202 | O ângulo ao redor da borda. No OKLCh, alterá-lo mantém a luminosidade percebida — que é o motivo principal para usar este espaço. |
| Croma | 0–0.37 | 0.15 | Distância do centro cinza. Não é uma porcentagem: é uma medida absoluta, e o máximo disponível depende tanto da tonalidade quanto da luminosidade. |
| Luminosidade | 0–1 | 0.62 | Qual fatia do espaço é desenhada. A área pintada diminui em direção a um ponto em ambas as extremidades, pois cores escuras e claras não podem conter muita croma. |
| Complementar | +180° | 2 cores | Separação máxima de tonalidade. O suficiente para que geralmente funcione como um destaque contra uma cor dominante, não como um par de iguais. |
| Análoga | ±30° | 3 cores | Vizinhos. O esquema mais discreto e o mais seguro para toda uma interface, porque nada compete. |
| Triádica | passos de 120° | 3 cores | Espaçamento uniforme. Equilibrado na teoria; na prática, duas das três cores precisam ter sua croma bastante reduzida. |
| Complementar dividida | +150°, +210° | 3 cores | A cor oposta, dividida em ambos os lados. Mantém a maior parte do contraste e elimina a vibração que você obtém com um complemento exato. |
| Monocromática | apenas luminosidade | 5 cores | Uma tonalidade em cinco luminosidades. Sem glamour, e o que praticamente todos os sistemas de design enviados são realmente construídos. |
Perguntas frequentes
Para que serve uma roda de cores?
Encontrar cores que tenham uma relação definida com uma que você já tem. Gire o matiz 180° e você tem a separação máxima disponível; gire 30° para cada lado e você tem vizinhos que não vão brigar. É uma forma de gerar candidatas rapidamente, não de escolher entre elas — isso ainda exige um julgamento sobre qual cor carrega mais peso e de quanta saturação as outras devem abrir mão.
O que são cores complementares?
Dois matizes diretamente opostos na roda — a 180° um do outro. Eles dão o contraste de matiz mais forte possível, e é por isso que a dupla funciona como destaque contra uma cor dominante e raramente funciona entre duas cores de área igual. Com saturação total, um par exatamente complementar também pode parecer cintilar ao longo da borda em que se encontram; dividir o complemento 30° para cada lado mantém a maior parte do contraste e elimina esse efeito.
Por que esta roda é diferente da que você está acostumado a ver?
Por dois motivos. Ela é desenhada em OKLCh em vez de HSL, então toda cor da fatia tem a mesma luminosidade percebida, e não apenas o mesmo número — os amarelos não são mais brilhantes que os azuis aqui. E não é um disco completo: um pixel só é pintado onde a cor existe no sRGB, então a borda externa é o limite real da gama. Preencher o disco significaria pintar cores recortadas que a sua tela não consegue exibir.
Por que a roda encolhe quando movo o controle de luminosidade?
Porque a faixa de croma que uma tela consegue exibir depende da luminosidade. A 50% há bastante espaço; a 95% quase tudo é um tom pálido e a coisa mais colorida disponível mal tem saturação; a 5% o mesmo vale para o extremo escuro. A figura encolhendo é um retrato fiel disso, e é por isso que uma rampa de tons que mantém o croma constante em todos os onze degraus produz claros fluorescentes e escuros brilhantes.
Qual esquema escolher para um site?
Provavelmente o monocromático, mais uma rampa de cinzas neutros e mais um matiz para ações destrutivas. As interfaces carregam muito menos cor do que um gerador de esquemas sugere: a cor dominante costuma ser um fundo que você quase não nota, e o destaque são algumas centenas de pixels de botão. O análogo é o próximo mais seguro. Tríade e tétrade geram bons screenshots e exigem muita contenção para ir ao ar.
A roda envia minhas cores para algum lugar?
Não. A roda é pintada pixel por pixel nesta aba com um canvas, e cada rotação é aritmética feita aqui. A página não faz nenhuma requisição de rede depois de carregar, e a Content-Security-Policy do site define connect-src 'self', então o navegador recusaria uma requisição se algo tentasse.