O que é interpolação de cor
Misturar duas cores num computador é calcular pontos intermediários entre dois conjuntos de números. Se a cor A vale 0 num canal e a cor B vale 255, o ponto a 50% do caminho vale 127,5, arredondado para 128. Esse cálculo se chama interpolação, e o resultado depende de quais números você interpola: os canais vermelho, verde e azul, ou matiz, saturação e luminosidade, ou as coordenadas de um espaço perceptual.
No misturador, você escolhe a cor A, a cor B, de 3 a 20 passos e o espaço de interpolação. A escala inclui as duas pontas, então 5 passos significam A, três tons intermediários e B. Cada amostra mostra o HEX e copia o código com um clique, a cor do ponto médio aparece em destaque e você pode copiar a escala inteira como variáveis CSS ou como JSON, prontas para um arquivo de tokens.
RGB, HSL e OKLCH na prática: vermelho com azul
O jeito mais claro de ver a diferença é misturar vermelho (#FF0000) com azul (#0000FF) e olhar o ponto médio em cada espaço.
| Espaço | Ponto médio | O que acontece |
|---|---|---|
| RGB | #800080 | Média de cada canal: rgb(128, 0, 128). Um roxo escuro, mais escuro na percepção do que as duas pontas. |
| HSL | #FF00FF | O matiz vai de 0° a 240° pelo menor arco, passando por 300°, com saturação e luminosidade constantes. O meio é magenta puro. |
| OKLCH | #BA00C2 | Luminosidade percebida e croma ficam entre os das duas cores, e o matiz segue pelo menor arco. O resultado é um roxo-magenta mais claro e mais vivo que o do RGB. |
O RGB é o comportamento padrão dos navegadores e o mais previsível, mas escurece e acinzenta o meio de cores distantes. O HSL mantém a saturação alta, só que a luminosidade dele não corresponde à que o olho percebe: um amarelo e um azul com o mesmo L de 50% parecem ter claridades muito diferentes, e a escala pode ganhar faixas que “saltam”. O OKLCH foi desenhado para que distâncias iguais nos números pareçam distâncias iguais na tela, por isso gera os degraus mais regulares. A opção OKLCH do misturador interpola claridade, croma e matiz (pelo menor arco do círculo) e equivale a color-mix(in oklch, …) no CSS. Quando o resultado sai da gama sRGB, como nesse roxo intenso, o valor é recortado para o HEX exibível mais próximo.
Mistura aditiva, subtrativa e o que este misturador calcula
Na mistura aditiva, a da luz, somar vermelho e verde dá amarelo: #FF0000 + #00FF00 = #FFFF00. Na subtrativa, a das tintas e da impressão, cada pigmento absorve parte da luz, e misturar tudo leva ao escuro. O misturador não faz nenhuma das duas: ele calcula uma média ponderada entre as cores, como um gradiente parado. Por isso vermelho com verde em RGB dá #808000, um verde-oliva, e não amarelo. Use a ferramenta para planejar cores de tela; ela não prevê o resultado de misturar tintas reais, que depende dos pigmentos.
Onde uma escala de cores faz diferença
- Design systems: tons numerados de 50 a 900 dão variações coerentes para fundos, bordas, texto e estados.
- Gráficos sequenciais: mapas de calor e coropléticos precisam de passos que pareçam igualmente espaçados; OKLCH ajuda a não distorcer a leitura dos dados.
- Estados de interação: um tom um pouco mais escuro para hover e outro para ativo, tirados da mesma escala, deixam os botões consistentes.
- Gradientes: o tom do meio pode virar uma parada extra no gerador de gradiente CSS para evitar o centro acinzentado.
Como montar uma escala de design system a partir de uma cor
Suponha que a cor da marca seja azul royal (#4169E1) e que ela ocupe a posição 500.
- Tons claros (50 a 400): use #FFFFFF como cor A e #4169E1 como cor B, com 6 passos em OKLCH. Descarte o branco puro; os quatro intermediários viram 100 a 400. Para o 50, gere um passo extra mais perto do branco ou repita a mistura com mais passos.
- Tons escuros (600 a 900): use #4169E1 como cor A e uma versão bem escura e ainda azulada, como #000080, como cor B. Misturar com preto puro costuma deixar os tons escuros sem vida.
- Revise e exporte: confira se os passos parecem igualmente espaçados, teste o contraste do texto sobre cada tom e copie tudo como variáveis CSS.
:root { --brand-100: #...; --brand-500: #4169E1; --brand-900: #...; }Para escolher cores que combinem com a principal, e não só variações dela, use o gerador de paletas.
color-mix(): a mesma ideia direto no CSS
A função color-mix() faz no navegador o que o misturador faz aqui, com uma proporção e um espaço de cor:
.destaque { background: color-mix(in oklch, red 50%, blue); }
.botao:hover { background: color-mix(in oklab, var(--brand-500), black 15%); }Ela é útil para derivar estados de hover, bordas e fundos suaves a partir de uma única variável, sem pré-calcular cada tom. Com in oklch, o navegador calcula o mesmo que a opção OKLCH do misturador: vermelho com azul dá o roxo-magenta vivo da tabela. Se preferir uma transição menos saturada, in oklab mistura as mesmas coordenadas perceptuais em linha reta, sem girar o matiz, e dá um roxo mais suave. O misturador continua útil para ver a escala inteira e fixar valores HEX num design system. O guia de cores modernas no CSS detalha color-mix(), OKLCH e o suporte nos navegadores.