Je sais que tu peux écrire ...

background-color: #ff0000;

... si vous voulez quelque chose de rouge.

Et vous pouvez écrire ...

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

... si vous voulez quelque chose de rouge et de 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 devoir les convertir toutes à l'échelle décimale 0-255 est ennuyeux.

Le module CSS Color Level 4 prendra probablement en charge la notation RGBA hexadécimale à 4 et 8 chiffres!

Il y a trois semaines (18 décembre 2014), le projet de l'éditeur de CSS Color Module Level 4 a été soumis au groupe de travail CSS W3C. Bien que dans un état qui soit fortement susceptible de changer, la version actuelle du document implique que dans un futur assez proche, CSS supportera à la fois la notation RGBA hexadécimale à 4 et 8 chiffres.

Remarque: la citation suivante a des morceaux non pertinents et la source peut avoir été fortement modifiée au moment où vous lisez ceci (comme mentionné ci-dessus, c'est un brouillon de l'éditeur et non un document finalisé).
Si les choses ont beaucoup changé, laissez-moi un commentaire pour que je puisse mettre à jour cette réponse!

§ 4.2. Les notations hexadécimales RVB: #RRGGBB

La syntaxe de a <hex-color>est un <hash-token>jeton dont la valeur se compose de 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 de hachage, "#", suivi d'un certain nombre de chiffres 0-9ou de lettres a-f(la casse des lettres n'a pas d'importance - #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 et ffreprésente une couleur entièrement opaque.

Exemple 3
En d'autres termes, #0000ffccreprésente la même couleur que rgba(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 et frepré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 qu'en supposant que cela ne soit pas complètement supprimé du document de niveau 4, nous serons bientôt en mesure de définir nos couleurs RGBA (ou couleurs HSLA, si vous êtes l'un de ces types) au format hexadécimal dans les navigateurs qui prennent en charge la couleur Syntaxe du module niveau 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 à part: ce n'est actuellement que le début de 2015, donc elles ne seront pas prises en charge dans aucun navigateur pendant un certain temps encore - même si votre produit n'est conçu que pour fonctionner sur les navigateurs les plus à jour, vous aurez probablement ne pas voir cela en action dans un navigateur de production de sitôt.

Afficher la prise en charge actuelle du navigateur pour la notation des couleurs #RRGGBBAA

Cependant, cela dit, la façon dont CSS fonctionne signifie que nous pouvons réellement commencer à les utiliser dès aujourd'hui! Si vous voulez vraiment commencer à les utiliser dès maintenant, tant que vous ajoutez une solution de repli, tous les navigateurs non pris en charge ignoreront simplement les nouvelles propriétés jusqu'à ce qu'elles soient jugées 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 visualisez cette réponse sur un navigateur qui prend en charge les propriétés backgroundet coloren CSS, l' <figure>élément résultant de l'extrait ci-dessus sera très similaire à ceci:

En utilisant la version la plus récente de Chrome sur Windows (v39.0.2171) pour inspecter notre <figure>élément, nous verrons ce qui suit:

La valeur de repli hexadécimal à 6 chiffres est remplacée par les rgba()valeurs, et nos valeurs hexadécimales à 8 chiffres sont ignorées car elles sont actuellement considérées comme invalides par l'analyseur CSS de Chrome. Dès que notre navigateur prend en charge ces valeurs à 8 chiffres, celles-ci remplacent rgba()celles.

MISE À JOUR 2018-07-04: Firefox, Chrome et Safari prennent désormais en charge cette notation, Edge est toujours manquant mais suivra probablement ( https://caniuse.com/#feat=css-rrggbbaa ).

J'ai trouvé la réponse après avoir publié l'amélioration de la question. Désolé!

MS Excel a aidé!

ajoutez simplement le préfixe Hex à la valeur de la couleur hexadécimale pour ajouter un alpha qui a l'opacité équivalente à la valeur%.

(en rbga, le pourcentage d'opacité est exprimé en décimal 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 l' alpha hex:

background: #56ff0077;

Utiliser red,green , bluepour convertir en RGBA:

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

J'ai bien peur que ce ne soit pas possible. le rgbaformat que vous connaissez est le seul.

Si vous pouvez utiliser MOINS, 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 couleurs peuvent être des couleurs hexadécimales (# FFAAD3) ou des couleurs hexadécimales argb (# 88FFAAD3).

En Sass on peut écrire:

background-color: rgba(#ff0000, 0.5);

comme cela a été suggéré dans la représentation hexadécimale d'une couleur avec canal alpha?

Eh bien, vous devrez apprendre différentes notations de couleur.
Kuler vous donne une meilleure chance de trouver la couleur et en plusieurs notations.
Hex n'est pas différent de RGB, FF = 255 et 00 = 0, mais c'est ce que vous savez. Donc, d'une certaine manière, vous devez le visualiser.
J'utilise Hex, RGBA et RGB. Sauf si une conversion de masse est requise, cette opération manuelle vous aidera à vous souvenir de quelques 100 couleurs et de leurs codes.
Pour la conversion de masse, écrivez un script comme celui donné par Alarie. Amusez-vous avec les couleurs.

pourquoi ne pas utiliser background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */

si vous ciblez une couleur pour un texte ou probablement un élément, cela devrait être beaucoup plus facile à faire.