Accueil > Nuancier de couleurs > Compatibilité de formats couleurs

Compatibilité des codes couleurs Web non transparentes avec les navigateurs.

Le format de code couleur Web Hexadécimal pour les propriétés CSS ou les attributs HTML est reconnu par tous les navigateurs. Certaines couleurs Web Hexadécimal sont associée à un nom qui correspnd au format de code couleur Nommé. Je vous conseille de ne pas utiliser le format de code couleur Nommé car certains noms sont plus ou moins récents, c'est le cas de la couleur prédéfinie "rebeccapurple" qui est apparue dans le brouillon des spécifiCcations CSS4 en 2017.

Si le code couleur Web RGB ou HSL n'est pas reconnu par le navigateur alors, votre couleur ne sera pas interprétée. Vous risquez de vous retrouver dans des situations embarassantes si vous mélanger les codes couleurs Web. L'exemple ci-dessous pause problème sous le navigateur Internet Explorer < 9+. Le fond est blanc par défaut car le format couleur HSL n'est pas interprété et le texte sera aussi blanc. color : #fff; background-color : hsl(199,59%,47%);

Le code couleur Web RGB (Red, Green, Blue) introduit en CSS2: Le format couleur RGB est compatible avec le navigateur Chrome 1+
Chrome 1+

Le format couleur RGB est compatible avec le navigateur FireFox 1+
FireFox 1+

Le format couleur RGB est compatible avec le navigateur Safari 1+
Safari 1+

Le format couleur RGB est compatible avec le navigateur Internet Explorer 4+
Internet Explorer 4+

Le format couleur RGB est compatible avec le navigateur Opera 3.5+
Opera 3.5+

Le code couleur Web HSL (Hue, Saturation, Lightness) introduit en CSS3: Le format couleur HSL est compatible avec le navigateur Chrome 1+
Chrome 1+

Le format couleur HSL est compatible avec le navigateur FireFox 1+
FireFox 1+

Le format couleur HSL est compatible avec le navigateur Safari 3.1+
Safari 3.1+

Le format couleur HSL est compatible avec le navigateur Internet Explorer 9+
Internet Explorer 9+

Le format couleur HSL est compatible avec le navigateur Opera 9.5+
Opera 9.5+

Compatibilité des couleurs Web transparentes avec les navigateurs.

Le format de code couleur Nommée avec transparence n'existe pas pour le web.
(*)Dans les futurs spécifications CSS4, le format de code couleur Hexadécimal acceptera en fin de code un alpha background-color : #00ffff77;. A ce jour (10/2016), aucun navigateur ne le reconnait.
Pour information, Internet Explorer utilise le format de code couleur Hexadécimal avec un alpha mais au début pour la propriété Css propriétaire Filter.

filter: progid:DXImageTransform.Microsoft.gradient(
 startColorstr='#69f1e767', endColorstr='#feb645', GradientType=0
);

Si le format de code couleur avec transparence RGBA ou HSLA n'est pas reconnu par le navigateur alors, votre couleur ne sera pas interprétée.
En règle générale, on fait précéder la couleur avec Alpha par une couleur non Alpha. background-color : #3191be; background-color : hsl(199,59%,47%,0.25);

Le code couleur Web avec transparence RGBA (Red, Green, Blue, Alpha) introduit en CSS3: Le format couleur RGBA est compatible avec le navigateur Chrome 1+
Chrome 1+

Le format couleur RGBA est compatible avec le navigateur FireFox 3+
FireFox 3+

Le format couleur RGBA est compatible avec le navigateur Safari 3.1+
Safari 3.1+

Le format couleur RGBA est compatible avec le navigateur Internet Explorer 9+
Internet Explorer 9+

Le format couleur RGBA est compatible avec le navigateur Opera 10+
Opera 10+

Le code couleur Web avec transparence HSLA (Hue, Saturation, Lightness, Alpha) introduit en CSS3: Le format couleur HSLA est compatible avec le navigateur Chrome 1+
Chrome 1+

Le format couleur HSLA est compatible avec le navigateur FireFox 3+
FireFox 3+

Le format couleur HSLA est compatible avec le navigateur Safari 3.1+
Safari 3.1+

Le format couleur HSLA est compatible avec le navigateur Internet Explorer 9+
Internet Explorer 9+

Le format couleur HSLA est compatible avec le navigateur Opera 10+
Opera 10+

Compatibilité des codes couleur Web avec les navigateurs en Javascript

Voici un script Javascript qui va vous permettre de savoir si les différents formats de codes couleurs Web sont reconnus par le navigateur.
supportColor est un Object qui contient les propriétés suivantes :
- rgb qui a une valeur true si le format de couleur Web est reconnu, false si le format de couleur Web n'est pas reconnu.
- rgba qui a une valeur true si le format de couleur Web est reconnu, false si le format de couleur Web n'est pas reconnu.
- hsl qui a une valeur true si le format de couleur Web est reconnu, false si le format de couleur Web n'est pas reconnu.
- hsla qui a une valeur true si le format de couleur Web est reconnu, false si le format de couleur Web n'est pas reconnu.
- hexaa qui a une valeur true si le format de couleur Web est reconnu, false si le format de couleur Web n'est pas reconnu.

var supportColor = (function(){
    var obj = document.createElement('span');
    var s = { rgb:false, rgba:false, hsl:false, hsla:false, hexaa:false };
    try {
        obj.style.backgroundColor = 'hsl(1,1%,1%)';
        s.hsl = obj.style.backgroundColor != '';
    } catch(err){}
    obj.style.backgroundColor = '';
    try {
        obj.style.backgroundColor = 'hsla(1,1%,1%,0.1)';
        s.hsla = obj.style.backgroundColor != '';
    } catch(err){}
    obj.style.backgroundColor = '';
    try {
        obj.style.backgroundColor = 'rgb(1,1,1)';
        s.rgb = obj.style.backgroundColor != '';
    }catch(err){}
    obj.style.backgroundColor = '';
    try {
        obj.style.backgroundColor = 'rgba(1,1,1,0.1)';
        s.rgba = obj.style.backgroundColor != '';
    } catch(err){}
    obj.style.backgroundColor = '';
    try {
        obj.style.backgroundColor = '#ff000010';
        s.hexaa = obj.style.backgroundColor != '';
    } catch(err){ }
    obj.style.backgroundColor = '';
    obj = null;
    return s ;
})();

Votre navigateur

supporte le RGB : oui
supporte le RGBA : oui
supporte le HSL : oui
supporte le HSLA : oui
supporte le #RGBA : oui

Informations complémentaires.

*Code couleur nommé

Couleur dont on a donné un nom pour l'identifier.
NomCouleur = darkgoldenrod
Définition complète

*Code couleur Hexadécimal

Code de couleur qui détaille la quantité des trois couleurs primaires Rouge Vert et Bleu qui constitue la couleur.
#RRGGBB = #8B4513
Définition complète

*Code couleur RGB

Code de couleur qui détaille la quantité des trois couleurs primaires Rouge Vert et Bleu qui constitue la couleur.
RGB(R, G, B) = rgb(255, 248, 220)
Définition complète

*Code couleur HSL

Code de couleur qui détaille la quantité teinte, saturation et luminosité.
HSL(H, S, L) = hsl(0, 25%, 65%)
Définition complète

*Code couleur RGBA

Code de couleur qui détaille la quantité des trois couleurs primaires Rouge Vert et Bleu qui constitue la couleur.
RGB(R, G, B, A) = rgb(255, 248, 220, 0.6)
Définition complète

*Code couleur HSLA

Code de couleur qui détaille la quantité teinte, saturation et luminosité.
HSL(H, S, L, A) = hsl(0, 25%, 65%, 0.6)
Définition complète

*Code couleur Hexadécimal Alpha

Code de couleur qui détaille la quantité des trois couleurs primaires Rouge Vert et Bleu qui constitue la couleur.
#RRGGBBAA = #8B451399
Définition complète

*Format des codes couleur CSS

Informations complémentaires sur les codes couleur utilisés pour les CSS

Définition complète

*color

La propriété color CSS permet de spécifier une couleur de texte.
color

*background-color

La propriété background-color CSS permet de spécifier une couleur d'arrière-plan.
background-color

Compatibilité des codes couleurs Web non transparentes avec les navigateurs.

Le code couleur Web RGB (Red, Green, Blue) introduit en CSS2

Le code couleur Web HSL (Hue, Saturation, Lightness) introduit en CSS3

Compatibilité des couleurs Web transparentes avec les navigateurs.

Le code couleur Web avec transparence RGBA (Red, Green, Blue, Alpha) introduit en CSS3

Le code couleur Web avec transparence HSLA (Hue, Saturation, Lightness, Alpha) introduit en CSS3

Compatibilité des codes couleur Web avec les navigateurs en Javascript

Votre navigateur