Misturar cores
Com esta ferramenta você pode misturar cores e ver na hora a cor resultante em HEX, RGB e HSL. Também dá para clarear, escurecer ou suavizar uma cor e criar um degradê de até 15 etapas.
Fonte: CSS Color 5, W3C – CSS Color Module Level 5: color-mix(). Atualizado em: .
Como o cálculo é feito
A ferramenta mistura cores de tela, ou seja, valores de luz – não tinta feita de pigmentos. Por isso vermelho e azul dão roxo (#800080), enquanto azul e amarelo dão um cinza neutro e não verde, como na aquarela.
Como a mistura é feita
Para cada canal de cor é calculado um valor intermediário. O espaço de mistura define como:
- sRGB: a média simples dos valores dos canais; é assim que o CSS mistura por padrão e que a maioria dos programas gráficos calcula.
- Luz linear: mistura quantidades físicas de luz. O resultado é mais claro e corresponde a duas fontes de luz sobrepostas.
- Oklab: um espaço de cor perceptual. Os degradês ficam mais uniformes, sem um meio acinzentado entre cores vivas.
Clarear, escurecer, suavizar
Misturada com branco, a cor clareia (tinta clara); com preto, escurece (sombra) e com cinza fica mais suave (tom). A porcentagem controla a intensidade e as etapas geram uma série inteira, útil para estados de hover ou escalas de cor.
A expressão color-mix() pode ser copiada direto para a folha de estilos. Paletas combinando saem do gerador de paleta de cores, os formatos são convertidos no conversor de cores e o verificador de contraste confere se o texto continua legível.
Perguntas frequentes
O que dá misturar azul e amarelo?
Na tela, um cinza neutro (média sRGB #808080), porque se misturam cores de luz. Com aquarela ou tinta acrílica, azul e amarelo dão verde, pois os pigmentos agem por subtração.
Como misturar duas cores em partes iguais?
Digite as duas cores e deixe a proporção da segunda em 50 %. Para um terço da cor 2, digite 33.
Como clarear ou escurecer uma cor?
Escolha “Clarear uma cor” ou “Escurecer uma cor” e ajuste a porcentagem: com 20 % de branco a cor clareia um pouco; com 80 %, fica quase branca.
Qual espaço de mistura escolher?
sRGB corresponde ao comportamento padrão do CSS e da maioria dos programas. Oklab gera degradês mais uniformes e a luz linear equivale a fontes de luz sobrepostas.
Como usar o resultado no CSS?
Copie o valor de “CSS (color-mix)” e use como cor em qualquer navegador moderno, ou simplesmente pegue o valor HEX.
Fontes e base legal
- CSS Color 5: W3C – CSS Color Module Level 5: color-mix()
- Björn Ottosson – A perceptual color space for image processing (Oklab)
- CSS Color 4: W3C – CSS Color Module Level 4: função de transferência sRGB e luz linear
Última atualização: · Princípios editoriais
Ferramentas relacionadas
- Gerador de paleta de coresGere cores que combinam a partir de uma cor base: complementar, análoga, triádica, quadrado, complementar dividida ou monocromática, com HEX, RGB e HSL.
- Conversor de cores: HEX, RGB, HSL, HSV, CMYKConverta cores: HEX para RGB, RGB para HEX, HSL, HSV, HWB e CMYK. Digite em qualquer formato ou use o seletor de cores e copie o resultado, tudo no navegador.
- Verificador de contraste de cores pelas WCAG 2.2Verifique o contraste entre cor do texto e do fundo: razão de contraste pelas WCAG 2.2, avaliação AA/AAA para texto normal e grande e elementos de interface.
- Pegar cor de imagem (conta-gotas)Descubra o código de cor de uma imagem: abra a foto, clique no ponto e copie HEX, RGB e HSL, além das cores principais. Sem upload, tudo fica no navegador.
- Calculadora de IMC segundo a OMSCalculadora de IMC: índice de massa corporal com altura e peso, classificação da OMS em escala de cores, faixa de peso normal para a sua altura e BMI Prime.
- Calculadora de cafeínaCalculadora de cafeína: some café, chá, refrigerante de cola, energéticos e chocolate e compare com os limites da EFSA – 400 mg por dia, 200 mg na gravidez.
- Calculadora de delay: de BPM para milissegundosCalculadora delay BPM: informe o andamento e veja o tempo de delay em ms para semínima, colcheia, semicolcheia, pontuada e em tercina. Grátis e sem cadastro.
- Calculadora do peso da mochila escolarPeso mochila escolar: qual porcentagem do peso da criança é a mochila cheia e quanto ela pode pesar no máximo com 10 % e com 15 % do peso corporal.
- Calculadora Wilks com pontos DOTS e IPF GLCalculadora Wilks para powerlifting: informe o peso corporal e o total e veja os pontos Wilks, DOTS e IPF GL lado a lado – clássico, equipado ou só supino.