Misturador de cores

Misture duas ou mais cores com pesos ajustáveis. Veja a cor resultante em HEX, RGB e HSL.

Resultado da mistura

Como funciona a mistura de cores

Esta ferramenta usa uma mistura aditiva no espaço de cores RGB. Os componentes RGB de cada cor são calculados como média ponderada por seus pesos. Isso simula a forma como a luz se mistura (como projetores que se sobrepõem), ao contrário da mistura subtrativa (como misturar tinta).

Posso misturar mais de duas cores ?

Sim ! Clique em « + Adicionar uma cor » para adicionar até 8 cores. Use os controles deslizantes de peso para controlar a contribuição de cada cor à mistura.

Como usar

  1. Escolha suas cores : use os seletores para escolher cada cor. Clique em « + Adicionar uma cor » para adicionar mais espaços (até 8).
  2. Ajuste o peso de cada cor : arraste o controle deslizante sob cada cor para controlar sua contribuição na mistura final.
  3. Pré-visualize o resultado : a cor misturada é exibida em tempo real com seus valores hex, RGB e HSL.
  4. Copie a cor misturada : clique para copiar o valor hex ou RGB obtido, para usar no seu design ou no seu código.

Por que usar o misturador de cores ?

Misturar cores é uma operação fundamental em design, criar matizes (misturando com branco), tons escuros (com preto), tons (com cinza) ou cores intermediárias harmoniosas entre duas cores de marca. Designers usam isso para gerar variantes de paleta, encontrar tons intermediários para paradas de gradiente, garantir razões de contraste acessíveis entre cores adjacentes e criar estados de hover/foco visualmente ligados às cores de base.

As três coisas que as pessoas querem dizer com "misturar cores"

Quando uma pessoa sem formação específica diz "misturar duas cores", quase sempre quer dizer uma de três operações completamente diferentes. Escolher o modelo errado é a maior fonte de confusão em ferramentas de cor.

A mistura aditiva é o que acontece quando feixes de luz colorida se sobrepõem. Duas lanternas, uma vermelha e uma verde, apontadas para o mesmo trecho de parede branca, produzem uma mancha amarela. Uma terceira lanterna azul sobreposta produz branco. O modelo é "mais luz = mais claro", e as três primárias são vermelho, verde e azul porque os cones humanos têm picos de sensibilidade aproximadamente nessas bandas. Qualquer tela, telefone, monitor, televisão, projetor, usa mistura aditiva. Cada pixel contém três subpixels (R, G, B), e levar os três ao máximo produz branco. É por isso que o modelo de cor padrão do web é RGB: o meio é emissivo, e a matemática combina com o meio.

A mistura subtrativa é o que acontece quando corantes absorvem comprimentos de onda da luz branca. Uma tinta ciano absorve luz vermelha e reflete verde e azul. Uma tinta amarela absorve azul e reflete vermelho e verde. Sobreponha ciano sobre amarelo e os únicos comprimentos de onda que sobrevivem aos dois filtros são os verdes. O modelo é "mais pigmento = mais escuro", e as três primárias subtrativas são ciano, magenta e amarelo. CMY em teoria mistura em preto na intensidade total, mas na prática os pigmentos são imperfeitos e o resultado é um marrom turvo, então a impressão comercial adicionou uma tinta preta separada (o K do CMYK) para pretos reais. Um misturador de cores que roda em tela não pode realizar mistura subtrativa de verdade porque a tela em si é aditiva; só pode simular a aparência.

A teoria tradicional de cores artísticas nos ensinou que as primárias são vermelho, amarelo e azul. A tradição pictórica, e a Teoria das Cores de Goethe de 1810, e o manual Bauhaus de Itten A Arte da Cor de 1961, codificaram RYB como base das paletas de artista. RYB não é fisicamente preciso. As verdadeiras primárias subtrativas que maximizam a gama são CMY, não RYB. Mas RYB se sustentou por séculos porque as tintas reais não são filtros puramente subtrativos: um tubo de vermelho cádmio e um tubo de azul ultramar se misturam em um roxo reconhecível, e o sistema "funciona" o suficiente no cavalete para ensinar gerações de alunos. Esta ferramenta é um misturador RGB aditivo, que é o que o web realmente faz, então "vermelho mais verde" dá amarelo, não o marrom que um misturador de tintas produziria.

Espaços de cor, sRGB, Display P3, Rec. 2020, Adobe RGB

Um modelo de cor (RGB, CMYK, HSL) diz quais dimensões você tem. Um espaço de cor diz exatamente a quais cores físicas cada triplo numérico corresponde: fixa a cromaticidade das primárias, o ponto branco e a função de transferência. Duas telas que falam "RGB" podem produzir vermelhos visivelmente diferentes para o mesmo código se miram em espaços de cor diferentes.

Espaços de cor perceptuais, e por que misturar em sRGB dá pontos médios turvos

As coordenadas sRGB e HSL nas quais a maioria das ferramentas web armazena e manipula cor não são perceptualmente uniformes. Um passo unitário no canal L de HSL não corresponde a um passo unitário em quão clara a cor parece. É a razão profunda pela qual misturar duas cores tirando a média dos canais dá resultados pouco intuitivos.

O exemplo canônico: pegue vermelho puro #ff0000 e verde puro #00ff00. Tire a média dos canais RGB componente a componente: o vermelho vai de 255 a 127, o verde de 0 a 127, o azul fica em 0. O resultado é #7f7f00, um oliva que parece embaçado, escuro e um pouco lamacento. Não tem nada a ver com o amarelo brilhante #ffff00 que se obteria se você realmente apontasse uma lanterna vermelha e uma verde para o mesmo trecho de parede. Dois problemas que se somam explicam isso.

Primeiro, o sRGB é codificado em gama. O número armazenado como 127 não representa metade da luz que 255 representa. A função de transferência é não-linear: 127 em sRGB corresponde a cerca de 21% da intensidade linear de luz, não a 50%. Então ao tirar média de valores codificados em gama, você está tirando média de algo como raiz quadrada da intensidade, não da intensidade em si, e o resultado sai muito mais escuro do que deveria. O conserto só para esse problema é converter sRGB em RGB linear antes da média e depois converter de volta. Com média em RGB linear, vermelho mais verde dividido por dois vira um verde-amarelo bem mais brilhante e crível.

Segundo, nem mesmo o RGB linear casa com a percepção. Passos iguais em RGB linear continuam sem ser passos iguais em brilho ou cromaticidade percebidos. O ponto médio de vermelho e azul em RGB linear é uma lavanda dessaturada, não o roxo rico que o designer espera. O conserto para esse problema mais profundo é misturar em um espaço perceptualmente uniforme, Lab, Oklab, OKLCH. Converta ambos os extremos para Oklab, interpole linearmente os canais L, a e b, volte para sRGB. O ponto médio de vermelho e verde em Oklab é um amarelo vivo e crível. O ponto médio de vermelho e azul é um magenta saturado. O ponto médio de amarelo e azul é um cinza neutro limpo no lugar do verde pantanoso que se obtém com RGB ingênuo.

Esta ferramenta atualmente tira média em sRGB codificado em gama, o modelo mais simples e o que produz aqueles pontos médios turvos. É correto para esse caso simples mas não casa com o que a luz física ou a percepção humana fazem de fato. Se você está escolhendo paradas de gradiente ou meios-tons de paleta e não quer cair na armadilha do cinza turvo, use a nova função CSS color-mix() descrita abaixo ou uma das bibliotecas de matemática de cor.

CIE Lab, Oklab, OKLCH, a pilha perceptual

O CIE Lab (também escrito CIELAB) foi publicado pela Comissão Internacional de Iluminação em 1976. Tem três eixos: L* para luminosidade de 0 (preto) a 100 (branco), a* para o eixo cromático verde-vermelho e b* para o eixo cromático azul-amarelo. Projetado para que diferenças numéricas iguais correspondam a diferenças percebidas aproximadamente iguais. Por meio século foi o espaço perceptual padrão em gráficos, ciência da visão e gerenciamento de cores. Fraquezas conhecidas: azuis ficam estranhamente arroxeados ao interpolar; o eixo de luminosidade não acompanha perfeitamente a percepção em cores muito saturadas.

O CIE LCH é apenas CIE Lab expresso em coordenadas polares: L para luminosidade, C para chroma (distância ao eixo neutro), H para ângulo de matiz. Mais útil que a*/b* crus para designers porque operações como "deslocar matiz 30 graus" ou "baixar chroma a 0" mapeiam direto em modelos mentais naturais.

O Oklab, de Björn Ottosson, foi publicado em dezembro de 2020 em um ensaio intitulado "A perceptual color space for image processing" em bottosson.github.io. Ottosson é um engenheiro sueco que trabalhava com cor na indústria de games. Oklab corrige a maior parte das deficiências conhecidas do CIE Lab, particularmente o desvio azul-roxo na interpolação e a sobreprevisão de diferenças de chroma em cores saturadas. O W3C adotou o Oklab no CSS Color Module Level 4 em cerca de um ano após o post de blog de Ottosson, uma padronização extraordinariamente rápida para um novo espaço de cor. Hoje todo navegador grande suporta oklab() nativamente.

O OKLCH é Oklab em coordenadas cilíndricas: L para luminosidade de 0 a 1, C para chroma de 0 a cerca de 0,4, H para matiz de 0 a 360 graus. Está se tornando o espaço de cor mais recomendado para paletas de design system precisamente porque operações em seus eixos mapeiam limpamente para a intuição do designer, e porque a interpolação entre duas cores OKLCH produz os gradientes mais suaves e agradáveis de qualquer espaço atualmente disponível em CSS.

A função CSS color-mix(), mistura perceptual sem JS

O CSS Color Module Level 5 introduziu o color-mix(), que pega duas cores, um espaço de cor de interpolação e pesos opcionais, e devolve o resultado misturado calculado inteiramente pelo navegador. A sintaxe é color-mix(in oklch, red 50%, blue 50%). Você pode trocar o espaço (in srgb, in oklab, in lch, in hsl longer hue, etc.) e a matemática roda nesse espaço. O suporte de navegador chegou no início de 2023:

Um misturador de cores sem JavaScript, nativo do CSS, está amplamente disponível há mais de dois anos. Qualquer ferramenta apoiada em color-mix() obtém resultados perceptualmente corretos "de graça", o navegador cuida da pilha de conversão. O próprio CSS Color Module Level 4 atingiu o estatuto de Candidate Recommendation em 2022 e tem amplo suporte nos navegadores modernos.

Bibliotecas JavaScript para matemática de cor

Três bibliotecas dominam quando você não pode ou não quer se apoiar em color-mix():

Uma breve história da teoria das cores

A teoria ocidental das cores começa com Isaac Newton em 1665. Em quarentena fora de Cambridge durante a peste, Newton passou luz solar por um prisma e identificou sete cores distintas (vermelho, laranja, amarelo, verde, azul, índigo, violeta). Depois as dispôs em um círculo fechado, o círculo cromático de Newton, conectando os extremos espectrais (violeta e vermelho) por um magenta não espectral. O círculo foi publicado em seu Opticks em 1704 mas elaborado em 1665-1666.

Johann Wolfgang von Goethe publicou Teoria das Cores (Zur Farbenlehre) em 1810. Onde Newton era físico, Goethe era poeta investigando a psicologia da cor: como as cores se sentiam, contrastavam e combinavam na mente do observador. Seu trabalho era cientificamente errado em muitos pontos mas introduziu ideias sobre cores complementares, imagens posteriores e o caráter afetivo das paletas quentes e frias que ainda são ensinadas hoje.

Johannes Itten, mestre na Bauhaus, publicou A Arte da Cor (Kunst der Farbe) em 1961. Seu círculo cromático RYB de doze raios e seus sete contrastes de cor (matiz, claro-escuro, frio-quente, complementares, simultâneo, saturação, extensão) tornaram-se o quadro de ensino dominante na educação em design na segunda metade do século XX.

Pantone foi criada por Lawrence Herbert, que entrou na Pantone Inc. como funcionário em 1956 e comprou a empresa em 1962. Em 1963 lançou o Pantone Matching System (PMS): uma biblioteca padronizada de tintas de tinta plana identificadas por número, com mostruários impressos que permitiam a um designer em Nova York e a um impressor em Hong Kong especificar e reproduzir exatamente a mesma cor sem ambiguidade. Pantone não é um espaço de cor no sentido técnico CIE, é um catálogo proprietário de misturas físicas de tinta, mas sua influência sobre fluxos de cor profissional é enorme.

Os HSL e HSV foram introduzidos por Alvy Ray Smith em seu artigo de 1978 "Color Gamut Transform Pairs", publicado nos anais do SIGGRAPH enquanto estava no Xerox PARC (Smith depois cofundou a Pixar). Ele procurava coordenadas de cor que mapeassem mais naturalmente para a intuição do artista do que RGB. HSL virou o modelo de cor "amigável ao designer" padrão no web e continua sendo a notação não-RGB mais reconhecida em CSS. É, no entanto, perceptualmente não uniforme, OKLCH é seu sucessor moderno.

Contraste e acessibilidade, WCAG 1.4.3

Quando um designer mistura duas cores para criar uma terceira, um estado de hover, um fundo tingido, uma parada de gradiente, a cor resultante ainda tem que cumprir os requisitos de contraste em relação a qualquer texto ou ícone colocado em cima. O critério de sucesso WCAG 2.x 1.4.3, "Contraste (mínimo)", exige:

A razão de contraste é calculada usando luminância relativa, a conversão para RGB linear descrita acima e uma soma ponderada dos canais linearizados (L = 0,2126·R + 0,7152·G + 0,0722·B). A razão entre duas cores é (L_mais_clara + 0,05) / (L_mais_escura + 0,05). Implicação prática: paradas intermediárias de um gradiente podem passar no check de contraste nos extremos mas falhar drasticamente no meio. Se uma marca mistura um azul-marinho escuro com um amarelo brilhante para produzir um oliva de hover, esse oliva pode cair na zona de falha WCAG tanto contra texto branco quanto contra texto preto.

Mais perguntas

Por que vermelho mais verde não me dá marrom?

Porque esta ferramenta, como toda tela, usa mistura RGB aditiva, e luz vermelha mais luz verde dá amarelo. Marrom é o que se obtém ao misturar tinta vermelha e verde, que é subtrativa: cada pigmento absorve comprimentos de onda distintos e os comprimentos de onda sobreviventes parecem marrons. Para simular precisamente "mistura de tinta" na tela seria preciso um modelo espectral ou consciente de pigmento (Procreate e Adobe Fresco fazem isso em apps de arte); misturadores web genéricos, incluindo este, são misturadores RGB aditivos honestos e te darão amarelo, não marrom.

Meus pontos médios parecem turvos, qual é o conserto?

Duas camadas de conserto. O passo mínimo de correção é mistura em luz linear: converter sRGB para RGB linear antes da média e voltar. Só isso faz vermelho+verde→amarelo parecer bem mais brilhante e crível. O conserto perceptual completo é misturar em OKLCH ou Oklab, converter ambos os extremos para OKLCH, interpolar, voltar. A CSS color-mix(in oklch, red, green) do navegador faz exatamente isso em uma linha e funciona em todo navegador lançado após maio de 2023. Para pipelines em JavaScript, culori.js é a biblioteca de referência.

Qual é o espaço de cor certo para misturar paletas de design system?

OKLCH é a resposta de consenso atual. É perceptualmente uniforme, tem eixos limpos que casam com a intuição do designer (luminosidade / chroma / matiz), produz interpolações de gradiente sem pontos médios turvos e está em todo navegador moderno via oklch() no CSS Color 4 e color-mix(in oklch, ...) no CSS Color 5. Design systems construídos em 2024-2026 estão cada vez mais saindo de paletas HSL para paletas OKLCH exatamente por isso.

Minha cor misturada vai passar nos checks de contraste WCAG?

Esta ferramenta não expõe atualmente a razão de contraste do resultado, mas você pode calcular: a luminância WCAG é L = 0,2126·R + 0,7152·G + 0,0722·B após linearizar os canais sRGB, e a razão de contraste entre duas cores é (L_mais_clara + 0,05) / (L_mais_escura + 0,05). Os alvos são 4,5:1 para texto normal e 3:1 para texto grande ou componentes de UI. O Color Contrast Checker na área de ferramentas relacionadas faz esse cálculo diretamente.

Ferramentas relacionadas

Gerador de matizes

Gere matizes e tons escuros.

Conversor de cores

Converta entre formatos de cor.

Gerador de paleta de cores

Gere paletas de cores.