Misturador de cores
Misture duas cores em qualquer proporção em OKLab, OKLCH ou sRGB. Copie o resultado ou uma expressão color-mix() pronta.
- HEX
- RGB
- OKLCH
CSS com fallback
color: #ae7ea4;
color: color-mix(in oklab, #ff5733, #3b82f6 50%);Passos da primeira à segunda
A mesma mistura em cada espaço
O sRGB fica cinza e escuro no meio. O OKLab mantém o brilho uniforme. O OKLCH e o HSL mantêm a saturação, mas percorrem o círculo de matizes.
Perguntas e respostas
O que é color-mix() no CSS?
color-mix() é uma função CSS que mistura duas cores no espaço de cor que você escolher, por exemplo color-mix(in oklab, #ff5733, #3b82f6 30%). Funciona em todos os navegadores atuais. Para os mais antigos, coloque antes uma cor simples como alternativa, como no trecho acima.
Em qual espaço de cor devo misturar?
OKLab é o padrão mais seguro: o meio mantém o brilho e não fica barrento. OKLCH mantém as cores saturadas, mas segue o caminho mais curto no círculo de matizes, então vermelho e azul passam por roxo e rosa. sRGB é como as ferramentas antigas misturam, e o meio costuma ficar cinza e escuro.
Por que misturar luz é diferente de misturar tinta?
Telas somam luz, então esta ferramenta faz a média dos valores de luz: azul e amarelo dão um cinza ou uma cor pálida, não verde. A tinta subtrai luz, por isso a mesma mistura no papel fica verde. Para prever o resultado com tinta, use um modelo de mistura de pigmentos em vez de um espaço de cor de tela.