Color Mixer
Misture duas cores em um espaço de cores escolhido e em qualquer proporção, como faz CSS color-mix(). Informe duas cores em qualquer formato CSS, defina a proporção da segunda cor entre 0 e 100 por cento e escolha entre OKLab, OKLCH, Lab, LCH, sRGB, sRGB linear, Display P3, HSL, HWB ou XYZ. O resultado é apresentado em HEX, RGB, HSL e OKLCH, além de uma expressão color-mix() pronta para usar na sua folha de estilos.
Perguntas frequentes
Como funciona a quantidade?
A quantidade representa a proporção da Cor 2 na mistura. 0% retorna a Cor 1, 100% retorna a Cor 2 e 50% fica exatamente entre elas no espaço escolhido. Isso corresponde a color-mix(in space, color1 (100 - p)%, color2 p%).
Qual espaço de cores devo escolher?
OKLab, a opção padrão, é perceptualmente uniforme e evita tons intermediários turvos ou escuros. O sRGB mistura os canais codificados em gama, como nos navegadores mais antigos e em Sass, deixando mais escuras e apagadas as misturas de cores saturadas. Lab é o antigo espaço perceptual CIE e se comporta de forma semelhante ao OKLab, com azuis menos uniformes.
O que fazem os espaços baseados em matiz?
OKLCH, LCH, HSL e HWB interpolam o matiz pelo arco mais curto da roda de cores, o padrão CSS. Assim, o ponto médio mantém a saturação e pode ser mais vibrante do que qualquer uma das cores de entrada. Quando uma das cores é cinza neutro, sem matiz, usa-se o matiz da outra.
Para que servem sRGB linear e XYZ?
Ambos misturam intensidades de luz linearmente, como feixes de luz sobrepostos, fazendo com que o ponto médio pareça mais claro do que em sRGB. São úteis para efeitos baseados em princípios físicos e para reproduzir a aparência de pixels desfocados ou mesclados.
Como a transparência é tratada?
Assim como CSS color-mix(), o misturador interpola com alfa pré-multiplicado, para que uma cor transparente não aproxime a mistura do preto. O próprio alfa é interpolado na mesma proporção e aparece em hexadecimal de 8 dígitos e após a barra nas funções CSS.
Quais formatos de entrada posso usar?
Códigos hexadecimais com ou sem #, nomes de cores CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), espaços color() como display-p3 e cmyk(), em qualquer combinação. Cada cor pode ter até 100 caracteres.
O que acontece quando o resultado fica fora do sRGB?
A mistura em Display P3, OKLCH ou LCH pode produzir cores que o sRGB não consegue exibir. Nesse caso, HEX, RGB e HSL são mapeados para sRGB com o algoritmo CSS Color 4, e o resultado recebe uma observação; o valor OKLCH mantém a cor não mapeada.
Como uso a expressão color-mix()?
Cole-a em qualquer propriedade CSS que aceite uma cor. Ela identifica as entradas pelo código hexadecimal ou por oklch() para entradas de ampla gama, permitindo que o navegador calcule novamente a mesma mistura. color-mix() funciona nas versões atuais de Chrome, Edge, Firefox e Safari.
Qual é a precisão do resultado?
A quantidade é uma porcentagem inteira, e a mistura é calculada com precisão total usando a biblioteca culori. Os canais RGB são arredondados para números inteiros, as porcentagens HSL para duas casas decimais, e a luminosidade e o croma OKLCH para quatro. Por isso, os navegadores podem diferir em uma unidade no último dígito.
Como obtenho várias etapas entre duas cores?
Execute o misturador com quantidades diferentes, como 25%, 50% e 75%. Para criar uma escala completa em direção ao branco, preto ou cinza, os geradores Color Tint, Shade and Tone produzem todas as etapas em uma única tabela.