Skip to main content
Pergunta reaberta por CypherPotato, Largato
adicionou 212 caracteres ao conteúdo
Fonte Link
CypherPotato
  • 11,8mil
  • 4
  • 36
  • 87

Eu tenho algumas cores em algumas variáveis, como por exemplo:

:root {
    --link-color: #006265;
    --link-color-alt: blue;
}

Eu gostaria de usar essas cores, mas especificando opacidade, sem ter que reescrever elas, como por exemplo:

background-color: color_opacity(var(--link-color), .5);
color:            color_opacity(var(--link-color-alt), .9);

Note que color_opacity não existe, é apenas um pseudo-código de como seria a solução.

O códigoAtualmente existe uma "solução" para cores no formato RGB, que na declaração podemos usar:

:root {
    --link-color: 0, 98, 101; /* sem o rgb() */
}

body { color: rgba(var(--link-color), 50%); }

No exemplo acima, é um pseudo-exemplo dopossível desde que estou tentando obter. Achei soluções de escrever as cores RGB (sem a função), separadas por vírgulasvariável não seja uma cor, mase sim a maioria das minhas cores estão em HEXdefinição RGB dela. TambémNo entanto, essa resolução só funciona com cores no formato RGB e não gostaria de definir uma variável para cada opacidadefunciona com demais formatos.

É importante mencionar que procuro opacidade para as cores e não os elementos que utilizam elas.

Existe alguma forma de fazer isso nativamente e puramente em CSS?

Eu tenho algumas cores em algumas variáveis, como por exemplo:

:root {
    --link-color: #006265;
    --link-color-alt: blue;
}

Eu gostaria de usar essas cores, mas especificando opacidade, sem ter que reescrever elas, como por exemplo:

background-color: color_opacity(var(--link-color), .5);
color:            color_opacity(var(--link-color-alt), .9);

Note que color_opacity não existe.

O código acima é um pseudo-exemplo do que estou tentando obter. Achei soluções de escrever as cores RGB (sem a função), separadas por vírgulas, mas a maioria das minhas cores estão em HEX. Também não gostaria de definir uma variável para cada opacidade.

É importante mencionar que procuro opacidade para as cores e não os elementos que utilizam elas.

Existe alguma forma de fazer isso nativamente e puramente em CSS?

Eu tenho algumas cores em algumas variáveis, como por exemplo:

:root {
    --link-color: #006265;
    --link-color-alt: blue;
}

Eu gostaria de usar essas cores, mas especificando opacidade, sem ter que reescrever elas, como por exemplo:

background-color: color_opacity(var(--link-color), .5);
color:            color_opacity(var(--link-color-alt), .9);

Note que color_opacity não existe, é apenas um pseudo-código de como seria a solução.

Atualmente existe uma "solução" para cores no formato RGB, que na declaração podemos usar:

:root {
    --link-color: 0, 98, 101; /* sem o rgb() */
}

body { color: rgba(var(--link-color), 50%); }

No exemplo acima, é possível desde que a variável não seja uma cor, e sim a definição RGB dela. No entanto, essa resolução só funciona com cores no formato RGB e não funciona com demais formatos.

É importante mencionar que procuro opacidade para as cores e não os elementos que utilizam elas.

Existe alguma forma de fazer isso nativamente e puramente em CSS?

adicionou 54 caracteres ao conteúdo
Fonte Link
CypherPotato
  • 11,8mil
  • 4
  • 36
  • 87

Eu tenho algumas cores em algumas variáveis, como por exemplo:

:root {
    --link-color: #006265;
    --link-color-alt: blue;
}

Eu gostaria de usar essas cores, mas especificando opacidade, sem ter que reescrever elas, como por exemplo:

background-color: opacitycolor_opacity(var(--link-color), .5);
color:            opacitycolor_opacity(var(--link-color-alt), .9);

Note que color_opacity não existe.

O código acima é um pseudo-exemplo do que estou tentando obter. Achei soluções de escrever as cores RGB (sem a função), separadas por vírgulas, mas a maioria das minhas cores estão em HEX. Também não gostaria de definir uma variável para cada opacidade.

É importante mencionar que procuro opacidade para as cores e não os elementos que utilizam elas.

Existe alguma forma de fazer isso nativamente e puramente em CSS?

Eu tenho algumas cores em algumas variáveis, como por exemplo:

:root {
    --link-color: #006265;
    --link-color-alt: blue;
}

Eu gostaria de usar essas cores, mas especificando opacidade, sem ter que reescrever elas, como por exemplo:

background-color: opacity(var(--link-color), .5);
color:            opacity(var(--link-color-alt), .9);

O código acima é um pseudo-exemplo do que estou tentando obter. Achei soluções de escrever as cores RGB (sem a função), separadas por vírgulas, mas a maioria das minhas cores estão em HEX. Também não gostaria de definir uma variável para cada opacidade.

É importante mencionar que procuro opacidade para as cores e não os elementos que utilizam elas.

Existe alguma forma de fazer isso nativamente e puramente em CSS?

Eu tenho algumas cores em algumas variáveis, como por exemplo:

:root {
    --link-color: #006265;
    --link-color-alt: blue;
}

Eu gostaria de usar essas cores, mas especificando opacidade, sem ter que reescrever elas, como por exemplo:

background-color: color_opacity(var(--link-color), .5);
color:            color_opacity(var(--link-color-alt), .9);

Note que color_opacity não existe.

O código acima é um pseudo-exemplo do que estou tentando obter. Achei soluções de escrever as cores RGB (sem a função), separadas por vírgulas, mas a maioria das minhas cores estão em HEX. Também não gostaria de definir uma variável para cada opacidade.

É importante mencionar que procuro opacidade para as cores e não os elementos que utilizam elas.

Existe alguma forma de fazer isso nativamente e puramente em CSS?

Pergunta fechada como "Não é adequada para este site" por Largato
Fonte Link
CypherPotato
  • 11,8mil
  • 4
  • 36
  • 87

Posso definir opacidade para uma cor predefinida?

Eu tenho algumas cores em algumas variáveis, como por exemplo:

:root {
    --link-color: #006265;
    --link-color-alt: blue;
}

Eu gostaria de usar essas cores, mas especificando opacidade, sem ter que reescrever elas, como por exemplo:

background-color: opacity(var(--link-color), .5);
color:            opacity(var(--link-color-alt), .9);

O código acima é um pseudo-exemplo do que estou tentando obter. Achei soluções de escrever as cores RGB (sem a função), separadas por vírgulas, mas a maioria das minhas cores estão em HEX. Também não gostaria de definir uma variável para cada opacidade.

É importante mencionar que procuro opacidade para as cores e não os elementos que utilizam elas.

Existe alguma forma de fazer isso nativamente e puramente em CSS?