Convertisseur en couleur Web transparente.

 
: ° % %
 
: % % %
 
#

Exemple de code couleur CSS.

background-color : #BFAA8F;
background-color : rgb(191,170,143);
background-color : hsl(34,27%,65%);
Convertir une nouvelle couleur

Codes couleur HEX , RGB et HSL.

 
#BFAA8F
 
rgb(191,170,143)
 
hsl(34,27%,65%)

Informations complémentaires

Libellé code Hexa. code RGB code HSL
Luminosité relative 0.41808986892999
Couleur mise en niveau gris #ADADAD rgb(173,173,173) hsl(0,0%,68%)
Couleur complémentaire #8EA3BE rgb(142,163,190) hsl(214,27%,65%)

L'Accessibilité Web et le contraste entre deux couleurs

Pour l'Accessibilité Web vous devez faire en sorte que le contraste entre la couleur d'un texte et la couleur de son arrière-plan soit suffisamment grand pour que le texte soit correctement lu par une personne affectée par une perception des couleurs déficiente.
Les règles sont définîtes dans les recommandations WCAG 2.0.
Tester le contraste entre deux couleurs

Le tableau ci-dessous, vous montre si le contrate d'un texte en blanc ou en noir sur un arrière-plan de couleur #BFAA8F passe les règles 1.4.3 ou 1.4.6 du WCAG 2.0.

Couleur texte Exemple Règles 1.4.3(2) et 1.4.6(4) Règles 1.4.3(1) et 1.4.6(3)
Texte noir
Ratio : 9.4:1
Texte noir WCAG AA (4.5:1): Passe WCAG AAA (7:1) : Passe WCAG AA (3:1) : Passe WCAG AAA (4.5:1) : Passe
Texte blanc
Ratio : 2.2:1
Texte blanc WCAG AA (4.5:1): Echec WCAG AAA (7:1) : Echec WCAG AA (3:1) : Echec WCAG AAA (4.5:1) : Echec

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 : ?
supporte le RGBA : ?
supporte le HSL : ?
supporte le HSLA : ?
supporte le #RGBA : ?

Avis sur l'article

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Votes: 4.8 / 5 - 23 votes
Cliquez sur une étoile pour voter.