CSS hexadecimal RGBA?


199

Eu sei que você pode escrever ...

background-color: #ff0000;

... se você quer algo que é vermelho.

E você pode escrever ...

background-color: rgba(255, 0, 0, 0.5);

... se você quiser algo vermelho e translúcido.

Existe alguma maneira concisa de escrever cores parcialmente transparentes em hexadecimal? Eu quero algo como:

background-color: #ff000088; <--- the 88 is the alpha

... ou ...

background-color: #ff0000 50%;

Estou recebendo todas as minhas cores em hexadecimal, e ter que convertê-las todas para a escala decimal de 0 a 255 é irritante.


1
Você pode experimentar diferentes notações, mas eu não consegui. rgb(0xff,\x80,#44)surpreendentemente representação octal parece york um pouco rgb(0100, 0200,0300)é#4080C0
yunzen 23/11

Você pode querer usar ColorPic, que mostra os números decimais para uma cor pegou iconico.com/colorpic
yunzen

2
Como o Slomojo sugeriu, no LESS você pode fazer a cor de fundo: # ff0000 + rgba (0, 0, 0, .8); que converterá o hex para você e ainda aplicará a transparência, mas isso não pode ser feito usando CSS nativo.
Fl3x7 #

1
Para completar, como discutem Slomojo e fl3x7, isso pode ser feito facilmente no Sass : background-color: opacify(#ff0000, 0.5);ou background-color: transparentize(#ff0000, 0.5);Você também pode fornecer variáveis ​​de cores hexadecimais do Sass para essas funções do Sass.
Adam Caviness

Respostas:


112

O CSS Color Module Level 4 provavelmente suportará a notação RGBA hexadecimal de 4 e 8 dígitos!

Há três semanas (18 de dezembro de 2014), o rascunho do editor do CSS Color Module Nível 4 foi enviado ao CSS W3C Working Group. Embora em um estado que é muito suscetível a mudança, a versão atual do documento implica que, no pouco futuro próximo CSS irá apoiar tanto a notação hexadecimal RGBA 4 e 8 dígitos.

Nota: a citação a seguir tem partes irrelevantes cortadas e a fonte pode ter sido fortemente modificada no momento em que você a leu (como mencionado acima, é um rascunho do editor e não um documento finalizado).
Se as coisas mudaram bastante, deixe um comentário para que eu possa atualizar esta resposta!

§ 4.2 As notações hexadecimais RGB: #RRGGBB

A sintaxe de a <hex-color>é um <hash-token>token cujo valor consiste em 3, 4, 6 ou 8 dígitos hexadecimais . Em outras palavras, uma cor hexadecimal é escrita como um caractere de hash, "#", seguido por um número de dígitos 0-9ou letras a-f(o caso das letras não importa - #00ff00é idêntico a #00FF00).

8 dígitos

Os 6 primeiros dígitos são interpretados de forma idêntica à notação de 6 dígitos. O último par de dígitos, interpretado como um número hexadecimal, especifica o canal alfa da cor, onde 00representa uma cor totalmente transparente e ffrepresenta uma cor totalmente opaca.

Exemplo 3
Em outras palavras, #0000ffccrepresenta a mesma cor que rgba(0, 0, 100%, 80%)(um azul levemente transparente).

4 dígitos

Essa é uma variante mais curta da notação de 8 dígitos, "expandida" da mesma maneira que a notação de 3 dígitos. O primeiro dígito, interpretado como um número hexadecimal, especifica o canal vermelho da cor, onde 0representa o valor mínimo e fo máximo. Os próximos três dígitos representam os canais verde, azul e alfa, respectivamente.

O que isso significa para o futuro das cores CSS?

Isso significa que, supondo que isso não seja completamente removido do documento do nível 4, em breve poderemos definir nossas cores RGBA (ou cores HSLA, se você é um desses caras) em formato hexadecimal nos navegadores compatíveis com o Color Sintaxe do módulo nível 4.

Exemplo

elem {
    background: rgb(0, 0, 0);           /* RGB notation (no alpha). */
    background: #000;                   /* 3-digit hexadecimal notation (no alpha). */
    background: #000000;                /* 6-digit hexadecimal notation (no alpha). */
    background: rgba(0, 0, 0, 1.0);     /* RGBA notation. */

    /* The new 4 and 8-digit hexadecimal notation. */
    background: #0000;                  /* 4-digit hexadecimal notation. */
    background: #00000000;              /* 8-digit hexadecimal notation. */
}

Quando poderei usar isso em meus produtos voltados para o cliente?

A erva daninha é a única resposta real ...

Todas as piadas de lado: atualmente, é apenas o início de 2015, portanto elas ainda não serão suportadas em nenhum navegador por um bom tempo - mesmo que seu produto seja projetado apenas para funcionar nos navegadores mais atualizados que você provavelmente isso não acontecerá em um navegador de produção tão cedo.

Exibir o suporte atual do navegador para a notação de cores #RRGGBBAA

No entanto, dito isso, o modo como o CSS funciona significa que podemos realmente começar a usá-los hoje! Se você realmente deseja começar a usá-los agora, contanto que adicione um retorno, qualquer navegador não compatível simplesmente ignorará as novas propriedades até que sejam consideradas válidas:

figure {
  margin: 0;
  padding: 4px;
  
  /* Fall back (...to browsers which don't support alpha transparency). */
  background: #FEFE7F;
  color: #3F3FFE;
  
  /* Current 'modern' browser support. */
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);
  
  /* Fall... foward? */
  background: #ffff007F; /* Or, less accurately, #ff08 */
  color: #0000ffbe;      /* Or #00fc */
}
<figure>Hello, world!</figure>

Contanto que você esteja vendo esta resposta em um navegador que suporte as propriedades backgrounde colorem CSS, o <figure>elemento resultante do snippet acima será muito parecido com este:

Imagem do resultado do snippet de código

Usando a versão mais recente do Chrome no Windows (v39.0.2171) para inspecionar nosso <figure>elemento, veremos o seguinte:

Exemplo do Inspetor de elemento

O retorno hexadecimal de 6 dígitos é substituído pelos rgba()valores, e nossos valores hexadecimais de 8 dígitos são ignorados, pois atualmente são considerados inválidos pelo analisador de CSS do Chrome. Assim que nosso navegador suportar esses valores de 8 dígitos, eles substituirão rgba()os valores.

ATUALIZAÇÃO 2018-07-04: Firefox, Chrome e Safari agora são compatíveis com essa notação, o Edge ainda está ausente, mas provavelmente seguirá ( https://caniuse.com/#feat=css-rrggbbaa ).


1
Lembro de ter visto isso nas listas de discussão há um ano, o mais tardar (a idéia de ter hexadecimal de 4/8 dígitos não é novidade). Fico feliz em ver que ele entrou no Colors 4 por enquanto.
BoltClock

Esperamos que a @BoltClock também fique aqui!
James Donnelly

O Firefox Nightly acaba de implementar isso :)
Florrie

/* Fall... foward? */»Sugiro avançar. Fallback e avançar: ^ p
WoodrowShigeru

Apenas adicionando um link útil. O link contém a lista de valores de opacidade em hexadecimal. gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
Ashish Kumar

33

Encontrei a resposta depois de postar o aprimoramento na pergunta. Desculpe!

MS Excel ajudou!

basta adicionar o prefixo Hex ao valor da cor hexadecimal para adicionar um alfa que tenha a opacidade equivalente como o valor%.

(em rbga, a porcentagem de opacidade é expressa como decimal, como mencionado acima)

Opacity %   255 Step        2 digit HEX prefix
0%          0.00            00
5%          12.75           0C
10%         25.50           19
15%         38.25           26
20%         51.00           33
25%         63.75           3F
30%         76.50           4C
35%         89.25           59
40%         102.00          66
45%         114.75          72
50%         127.50          7F
55%         140.25          8C
60%         153.00          99
65%         165.75          A5
70%         178.50          B2
75%         191.25          BF
80%         204.00          CC
85%         216.75          D8
90%         229.50          E5
95%         242.25          F2
100%        255.00          FF

Não entenda com confiança. Você quer dizer que #FF00000Cé equivalente a rgba(255,0,0,0.05)?
yunzen

é um prefixo, não um sufixo. Ou seja, você adicioná-lo à frente do seu valor de cor hexadecimal de 6 dígitos #000000se torna #7F000000.
T9B

7
@ T9b: CSS3 não suporta esta notação. Fim da história.
PointedEars 27/11

@PointedEars errado em ambas as contagens. O OP não menciona especificamente o CSS3, e essa pergunta que eu pensaria provavelmente mais relacionada a questões específicas do IE que todos sabemos que são difíceis. No entanto, o IE usa os valores de transparência CSS e Hex nele.
T9b

4
@ T9b Bobagem. O OP tem uma pergunta CSS sobre valores RGBA. Não há suporte para RGBA no CSS antes do CSS3. Se o IE / MSHTML suportar sua notação, isso é proprietário , incompatível e inerentemente não confiável. E certamente você não está sugerindo o uso de scripts do lado do cliente para fazer essa notação funcionar, está? Pois isso não seria compatível e também não seria confiável.
PointedEars 28/11

22
RGB='#ffabcd';
A='0.5';
RGBA='('+parseInt(RGB.substring(1,3),16)+','+parseInt(RGB.substring(3,5),16)+','+parseInt(RGB.substring(5,7),16)+','+A+')';

var rgb = '#ffabcd'; var a = '0.5'; var matches = rgb.match(/#([\da-f]{2})([\da-f]{2})([\da-f]{2})/i); var rgba = 'rgba(' + matches.slice(1).map(function(m) { return parseInt(m, 16); }).concat(a) + ')';
PointedEars 27/11

2
Se você vem de um mundo de React:<div style={ { backgroundColor: `rgba(${ parseInt(color.substring(1,3),16) }, ${ parseInt(color.substring(3,5),16) }, ${ parseInt(color.substring(5,7),16) }, 0.5)` } }></div>
Atul Yadav

14

Veja aqui http://www.w3.org/TR/css3-color/#rgba-color

Não é possível, provavelmente porque 0xFFFFFFFF é maior que o valor máximo para números inteiros de 32 bits


28
#ffffff(seis dígitos hexadecimais) é na verdade um valor de cor de 24 bits ; 0xFFFFFFFF é na verdade 2³² − 1 e pode ser representado como um número inteiro de 32 bits não assinado . Acho que a razão pela qual #ffffffff(oito dígitos hexadecimais) não é especificada é que as cores CSS estão enraizadas no espaço de cores sRGB e que uma notação de oito dígitos hexadecimais seria ambígua com um dispositivo de exibição que suporta uma profundidade de cores de 32 bits. Lembre-se de que ainda existe o #fffque significa rgb(100%, 100%, 100%)- branco - ambos com profundidade de cor de 8 bits (256 cores) e 16 bits (65536 ou 64K cores).
PointedEars

5
Na verdade, é exatamente isso que o número inteiro de 32 bits é capaz de armazenar. 2 dígitos hexadecimais podem conter tantos valores quanto 8 dígitos binários. Ou ... 8 dígitos hexadecimais podem conter tantos valores quanto 32 dígitos binários.
Pijusn

Embora não haja motivo principal, a função CSS não deveria ter sido projetada dessa maneira desde o início (assim como o rgba (0,0, 0,5, 1,0) flutua para que os normais correspondam às outras funções de cores). Quanto ao suporte a cores de exibição de 32 bits, isso não existe no RGB de 6 dígitos e é realmente um caso extremo. Não tenho problema em aprender formatos diferentes, mas há casos em que você pode obter uma cor dinâmica em hexadecimal e precisar criar CSS a partir dela em tempo de execução. Isso requer a etapa extra de converter de hex para decimal se você deseja adicionar alfa a ele, o que é desajeitado.
Beejor

13

O Chrome 52 ou superior suporta alfa hexadecimal:

background: #56ff0077;

4
Fiquei empolgado ao ver isso e tentei em devtools no Chrome 55. Não há dados, erros como um valor de propriedade inválido ...¯\_(ツ)_/¯
ericsoco 18/01/17

1
Parece que ele teve vários problemas. Aqui está a página de status do recurso.
Billy

O Chrome removeu o suporte, o Safari e o Firefox têm suporte. Não use isso.
Case

5
Em julho de 2019, 84,5% de todos os navegadores oferecem suporte global a esse recurso. caniuse.com/#search=rrggbbaa
André Kuhlmann

10

Use red, green, bluea se converter ao RGBA:

background-color: rgba(red($color), green($color), blue($color), 0.2);

4
O SASS suporta a cor de fundo: rgba ($ color, .2);
djibe

esses não são métodos CSS válidos - você deve mencionar isso
Piotr Karbownik

7

Receio que isso não seja possível. o rgbaformato que você conhece é o único.


1
@mdmullinax: Mas quem especifica cores hexadecimais na notação HSL?
BoltClock

1
I tudo associado na vida com notação HSLA, é uma versão de sinestesia :)
MikeM

@mdmullinax: Oh, isso é realmente incrível!
BoltClock

6
@mdmullinax: Isso pode agradá-lo se você ainda não o viu: mothereffinghsl.com
BoltClock

@BoltClock I como esse site, Paul Irish é ganhar
MikeM

5

Se você pode usar LESS, existe uma função de desbotamento.

@my-opaque-color: #a438ab;
@my-semitransparent-color: fade(@my-opaque-color, 50%);

background-color:linear-gradient(to right,@my-opaque-color, @my-semitransparent-color); 

// result: 
background-color: linear-gradient(to right, #a438ab, rgba(164, 56, 171, 0.5));

e sass / scss tem uma função equivalente:rgba(base-color, 0.5)
LocustHorde 14/03

2

Príncipe encantado:

Somente o Internet Explorer permite a cor hexadecimal de 4 bytes no formato ARGB, onde A é o canal Alpha. Pode ser usado em filtros de gradiente, por exemplo:

filter  : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})";

Onde dir pode estar: 1 (horizontal) ou 0 (vertical) E as seqüências de cores podem ser hexadecimais (# FFAAD3) ou argb hexadecimais (# 88FFAAD3).



0

Bem, notações de cores diferentes é o que você terá que aprender.
O Kuler oferece uma chance melhor de encontrar cores e em várias notações.
Hex não é diferente de RGB, FF = 255 e 00 = 0, mas é isso que você sabe. Então, de certa forma, você precisa visualizá-lo.
Eu uso Hex, RGBA e RGB. A menos que seja necessária a conversão em massa, fazer isso manualmente ajudará a lembrar algumas 100 cores estranhas e seus códigos.
Para conversão em massa, escreva um script como o fornecido por Alarie. Divirta-se com as cores.


-2

por que não usar background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */

se você segmentar uma cor para um texto ou provavelmente um elemento, isso deve ser muito mais fácil.


9
-1 opacidade afetam todo o conteúdo, e não apenas o background-color
yunzen

então o objeto pode ser duplicado, um deve ser o elemento que o contém, o outro deve ser aquele dentro do contêiner que possui opacidade. porque a partir da pergunta o usuário quer outro método que o rgba convencional.
Charming Prince

1
Ele ainda quer o mesmo resultado, e é melhor eu usar rgba () ou qualquer outra notação do que modificar HTML.
FelipeAls

esta é a resposta que eu estava procurando, deixe as cores hexadecimais em paz e altere a opacidade usando a opacitypropriedade css.
aqui
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.