Adicionar opacidade a uma cor existente

Digamos que a cor da sua marca seja o laranja #f06d06. Agora você precisa dessa cor, mas com alguma opacidade.

Uma opção é o código hexadecimal de 8 dígitos. Acho difícil saber quais dois caracteres adicionais são necessários, mas é possível.

Código hexadecimal	Notas
#f06d06	Original Laranja
#f06d0640	Laranja @ 25% de opacidade
#f06d0680	Laranja @ 50% de opacidade
#f06d06BF	Laranja @ 75% de opacidade

Eu mesmo sou mais atraído pela sintaxe relativa de cores. O problema é que você usa o nome da função de modelos de cores com a frompalavra-chave, o que desestrutura a cor para você mexer nesse modelo de cores.

.add-opacity {
  /* original color */
  background: #f06d06;

  background: rgb(from #f06d06 r g b / 50%);
  background: hsl(from #f06d06 h s l / 50%);
  background: oklch(from #f06d06 l c h / 50%);
} Linguagem do código:  CSS  ( css )

Acima, estou pegando a cor hexadecimal da marca e aplicando 50% de transparência. O resultado é o mesmo em todos os modelos de cores. Isso soa bem para mim. Além disso, abre a porta para usar calc()as partes individuais da cor para mexer com elas, se quiser.

Infelizmente, a sintaxe de cor relativa só funciona no Safari enquanto escrevo.

Então, quais são as suas opções que funcionam um pouco mais agora?

Bem, uma coisa a considerar é… não usar códigos hexadecimais 😬. Essa mesma laranja tem cerca de hsl(26deg 95% 48%). Isso é mais fácil de aplicar o alfa. Você faz: hsl(26deg 95% 48% / 50%).

Em termos práticos, algo como:

html {
  --brandColorHSL: <span style="background-color: rgba(99, 89, 79, 0.2); font-family: inherit; font-size: inherit; white-space: pre-wrap; color: var(--ink);">26deg 95% 48%</span>;
  --brandColor: hsl(var(--brandColorHSL));
}

.use-with-opacity {
  background: hsl(var(--brandColorHSL) / 50%);
}Linguagem do código:  CSS  ( css )

Mas se você for mudar, eu diria que vale a pena entrar nas cores HDR! Você pode até usá-los com bastante segurança com @supports:

html {
  --brandColorParts: 26deg 95% 48%;
  --brandColor: hsl(var(--brandColorParts));
}
@supports (color: oklch(75% 0.2 55.5 / 1)) {
  html {
    --brandColorParts: 75% 0.2 55.5;
    --brandColor: oklch(var(--brandColorParts));
  }
}Linguagem do código:  CSS  ( css )

Isso está chegando a algum lugar, se você me perguntar! Você pode querer fazer variantes de opacidade antecipadamente para não precisar polvilhar seu código com @supportsvariações. Mas ei – você está ficando à frente da curva! Você não quer ser pego com um site de cor SDR de aparência monótona, certo? Hash tag nesta economia.

Mas ainda não terminamos aqui. Existe outra maneira de pegar qualquer cor e aplicar alguma opacidade a ela. Una escreveu sobre isso recentemente em Usando color-mix() para criar variantes de opacidade. Conceitualmente, é bem simples: você pega uma cor que já tem, mistura com transparent, e pronto. Assim como:

.use-with-opacity {
  background: color-mix(in srgb, #f06d06, transparent 50%);
}Linguagem do código:  CSS  ( css )

Isso funciona muito bem e o suporte é muito melhor (mas sem o Firefox).

Isso me fez pensar … por quê srgb? Os modelos de cores mais recentes não são tão capazes ou melhores nisso? Bem, fica estranho. Você pensaria que tudo isso acaba sendo o mesmo?

background: color-mix(in srgb, #f06d06, transparent 50%);
background: color-mix(in oklch, #f06d06, transparent 50%);
background: color-mix(in hsl, #f06d06, transparent 50%);Linguagem do código:  CSS  ( css )

Eu faria, como transparente não tem cor, só aplicaria o alpha e pronto.

Isso seria errado.

A coisa é, transparent tem uma cor: é preto. Portanto, dependendo da forma literal e da estrutura de um modelo de cores, misturar uma cor com o preto tem grandes implicações.

Veja como no exemplo OKLCH acima, fica um pouco vermelho-rosado? Não tenho certeza se entendi exatamente, mas estou supondo que no modelo de cores OKLCH, puxar o laranja para onde blackestá posicionado no modelo o puxa através do Monte. Vermelho apenas o suficiente para captar esse tom.

Para mim, isso é uma merda? Eu gostaria que transparentnão tivesse matiz, de alguma forma, ✨magicamente✨. Parece-me que o melhor resultado para misturar com transparência é fazê-lo no srgbespaço de cores.

Se você se lembra que 00é a versão do código hexadecimal de 8 dígitos de 0% de transparência, você pode “consertar” isso no OKLCH (e imagino outros espaços) fazendo como…

background: color-mix(in oklch, #f06d06, #f06d0600 50%);Linguagem do código:  CSS  ( css )

Então você não está misturando com preto transparente, você está misturando com uma versão transparente da mesma cor. Parece um trabalho extra para nada quando você pode apenas misturar srgb.

Esse mesmo problema existe há anos ao lidar com gradientes. Fazer um gradiente de cor para transparente costumava ser arriscado por causa da escuridão de transparent. O truque era usar a mesma cor, tipo…

.bad {
  background: linear-gradient(red, transparent);
}
.good {
  background: linear-gradient(rgb(255 0 0), rgb(255 0 0 / 0));
}Linguagem do código:  CSS  ( css )

O Safari no iOS 10 definitivamente teve o problema do preto:

Não sei quando isso aconteceu, mas isso deixou de ser um problema com gradientes. Ambos os gradientes acima renderizam o mesmo agora e da maneira que você esperaria em todos os navegadores. Talvez haja alguma mágica nos bastidores para “consertar” isso? Se houver magia envolvida, talvez um pouco dessa magia possa espalhar-se até color-mix().