CSS hexadécimale RGBA?
Je sais que tu peux écrire ...
background-color: #ff0000;
... si vous voulez quelque chose qui est rouge.
Et vous pouvez écrire ...
background-color: rgba(255, 0, 0, 0.5);
... si vous voulez quelque chose de rouge et translucide.
Existe-t-il une manière concise d’écrire des couleurs partiellement transparentes en hexadécimal? Je veux quelque chose comme:
background-color: #ff000088; <--- the 88 is the alpha
... ou ...
background-color: #ff0000 50%;
Je reçois toutes mes couleurs en hexadécimal et il est ennuyeux de les convertir toutes à l'échelle décimale 0-255.
Le module de couleurs CSS de niveau 4 probablement supportera la notation RGBA hexadécimale à 4 et 8 chiffres!
Il y a trois semaines (le 18 décembre 2014), le brouillon de l'éditeur du module de couleurs CSS de niveau 4 a été soumis au groupe de travail CSS W3C. . Bien que dans un état susceptible de changer, la version actuelle du document implique que, dans le n pe, le CSS dans un proche avenir prendra en charge les notations RGBA hexadécimales à 4 et à 8 chiffres.
Note: la citation suivante a été coupée en morceaux non pertinents et la source peut avoir été fortement modifiée au moment où vous lisez ceci (comme mentionné ci-dessus, il s'agit d'un brouillon de l'éditeur et non d'un document finalisé).
Si les choses ont beaucoup changé, merci de laisser un commentaire pour me permettre de mettre à jour cette réponse!
§ 4.2. Les notations hexadécimales RGB: #RRGGBB
La syntaxe de
<hex-color>est un jeton<hash-token>dont la valeur consiste en 3, 4, 6 ou 8 chiffres hexadécimaux . En d’autres termes, une couleur hexadécimale est écrite sous la forme d’un caractère dièse, "#", suivi d’un certain nombre de chiffres0-9ou de lettresa-f(la casse des lettres importe peu -#00ff00est identique à#00FF00).8 chiffres
Les 6 premiers chiffres sont interprétés de manière identique à la notation à 6 chiffres. La dernière paire de chiffres, interprétée comme un nombre hexadécimal, spécifie le canal alpha de la couleur, où
00représente une couleur entièrement transparente etff, une couleur totalement opaque.Exemple 3
En d'autres termes,#0000ffccreprésente la même couleur quergba(0, 0, 100%, 80%)(un bleu légèrement transparent).4 chiffres
Il s’agit d’une variante plus courte de la notation à 8 chiffres, "développée" de la même manière que la notation à 3 chiffres. Le premier chiffre, interprété comme un nombre hexadécimal, spécifie le canal rouge de la couleur, où
0représente la valeur minimale etfreprésente le maximum. Les trois chiffres suivants représentent respectivement les canaux vert, bleu et alpha.
Qu'est-ce que cela signifie pour l'avenir des couleurs CSS?
Cela signifie que si cela n'est pas complètement supprimé du document de niveau 4, nous pourrons bientôt définir nos couleurs RGBA (ou les couleurs HSLA, si vous êtes l'un de ces gars) en hexadécimal. format dans les navigateurs qui prennent en charge la syntaxe de Color Module Level 4.
Exemple
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. */
}
Quand pourrai-je l'utiliser dans mes produits destinés aux clients?
Toutes les blagues de côté: nous ne sommes actuellement que dans le courant de l'année 2015. Elles ne seront donc pas prises en charge par les navigateurs pendant un certain temps encore - même si votre produit est conçu pour fonctionner uniquement sur les plus récentes date des navigateurs, vous ne verrez probablement pas cela en action dans un navigateur de production.
Afficher le support actuel du navigateur pour la notation couleur #RRGGBBAA
Cependant, cela dit, la manière dont fonctionne CSS signifie que nous pouvons commencer à les utiliser dès aujourd'hui! Si vous voulez vraiment commencer à les utiliser maintenant, tant que vous ajoutez une solution de repli, tout navigateur non compatible ignorera simplement les nouvelles propriétés jusqu'à ce qu'elles soient considérées comme valides:
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>Tant que vous affichez cette réponse sur un navigateur qui prend en charge les propriétés background et color en CSS, l'élément <figure> dans le résultat de l'extrait ci-dessus sera très similaire à ceci:
En utilisant la version la plus récente de Chrome sous Windows (v39.0.2171) pour inspecter notre élément <figure>, nous verrons ce qui suit:
La valeur hexadécimale à 6 chiffres est remplacée par les valeurs rgba() et nos valeurs hexadécimales à 8 chiffres sont ignorées car elles sont actuellement considérées comme non valides par l'analyseur CSS de Chrome. Dès que notre navigateur prend en charge ces valeurs à 8 chiffres, celles-ci remplacent celles rgba().
UPDATE 2018-07-04: Firefox, Chrome et Safari prennent en charge cette notation à présent, Edge manque toujours, mais suivra probablement ( https://caniuse.com/#feat=css-rrggbbaa ).
J'ai trouvé la réponse après avoir posté l'amélioration à la question. Pardon!
MS Excel a aidé!
ajoutez simplement le préfixe Hex à la valeur de couleur hexadécimale pour ajouter un alpha ayant une opacité équivalente à la valeur%.
(en rbga, le pourcentage d'opacité est exprimé sous forme décimale comme mentionné ci-dessus)
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
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+')';
Voir ici http://www.w3.org/TR/css3-color/#rgba-color
Ce n'est pas possible, probablement parce que 0xFFFFFFFF est supérieur à la valeur maximale pour les entiers 32 bits
Chrome 52+ prend en charge alpha hex:
background: #56ff0077;
J'ai bien peur que ce ne soit pas possible. le format rgba que vous connaissez est le seul.
Utilisez red, green, blue pour convertir en RGBA:
background-color: rgba(red($color), green($color), blue($color), 0.2);
Si vous pouvez utiliser LESS, il existe une fonction de fondu.
@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));
Prince charmant:
Seul Internet Explorer autorise la couleur hexadécimale de 4 octets au format ARGB, où A est le canal Alpha. Il peut être utilisé dans les filtres dégradés, par exemple:
filter : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})";
Où dir peut être: 1(horizontal) ou 0(vertical) Et les chaînes de couleur peuvent être des couleurs hexagonales (# FFAAD3) ou argb hexales (# 88FFAAD3).
Eh bien, il vous faudra apprendre différentes notations de couleurs.
Kuler vous donne une meilleure chance de trouver de la couleur et dans plusieurs notations.
Hex n'est pas différent de RVB, FF = 255 et 00 = 0, mais c'est ce que vous savez. D'une certaine manière, vous devez le visualiser.
J'utilise Hex, RGBA et RGB. Cette opération vous aidera à vous souvenir de 100 couleurs impaires et de leurs codes, sauf si une conversion en masse est requise.
Pour la conversion en masse, écrivez un script comme celui donné par Alarie. Amusez-vous avec les couleurs.
J'avais besoin d'utiliser la réponse ci-dessus:
background-color: rgba(red($color), green($color), blue($color), 0.2);
Mais je voulais ajouter un peu parce que l'OP voulait CSS + HEX. La réponse ci-dessous montre comment utiliser les valeurs hexadécimales sans recourir à un traitement préalable ni à un mixage supplémentaire:
background-color: rgba(red(#4d238c), green(#4d238c), blue(#4d238c), 0.2);
Cela s’avère utile lorsque vous souhaitez que la couleur de fond de l’élément sélectionné soit opaque, mais que le texte soit toujours très visible.