Y a-t-il des inconvénients à utiliser des noms de couleur à la place des codes de couleur en CSS?

Différents navigateurs peuvent ne pas convenir de la signification de certains noms de couleur. Il n’y a pas de noms pour les 16 millions de couleurs 24 bits. En fait, il n’y a que 17 noms de couleurs standard W3C. Il est probablement correct de les utiliser.

Personnellement, j’utilise un système de templates au moment de la compilation pour prétraiter mes fichiers CSS, de sorte que je puisse conserver un ensemble standard de couleurs de site et y faire référence par nom. De cette façon, je tire le meilleur des deux mondes: je sais exactement quelles sont mes valeurs de couleurs RVB, mais je peux utiliser des noms plus simples dans le CSS.

(Bien sûr, il n’est toujours pas possible de savoir exactement à quoi ressemblera une couleur dans le navigateur d’un utilisateur donné.)

edit – dans les 5 années qui ont suivi cette réponse, les préprocesseurs tels que Less et Sass sont devenus assez courants. Ceux-ci fournissent des outils très sophistiqués pour gérer les couleurs (et beaucoup d’autres choses) dans les sources CSS.

Je vous recommande de suivre les recommandations du W3C:

Tous (CSS niveau 1, niveau 2 et niveau 3) indiquent que l’utilisation de noms de couleur est parfaitement acceptable, mais que ceux qui sont acceptables varient selon les spécifications.

Spécification CSS1

La spécification CSS1 recommande d’utiliser des noms de couleur comme substitut valide aux codes hexadécimaux et aux codes RVB.

6.3 Unités de couleur

La liste suggérée des noms de couleurs de mots clés est la suivante: aqua, noir, bleu, fuchsia, gris, vert, citron vert, marron, bleu marine, olive, violet, rouge, argent, bleu sarcelle, blanc et jaune. Ces 16 couleurs proviennent de la palette Windows VGA et leurs valeurs RVB ne sont pas définies dans cette spécification.

Spécification CSS2

Vous pouvez utiliser le nom de couleur orange maintenant! Le nombre est de 17 couleurs . Spécification CSS2 pour référence.

Couleurs CSS3 et X11

CSS3 permet d’utiliser les couleurs X11 de SVG 1.0 pour les propriétés CSS (ainsi que les valeurs hsl() ). Cela étend la quantité de noms de couleurs à 147 couleurs . N’importe lequel de ces noms de couleurs peut être utilisé dans tout navigateur prenant en charge la spécification SVG 1.0, à savoir IE9 ou version ultérieure .

Cela signifie également que la liste des couleurs fournies dans la question n’est généralement pas valide .

Utilisation suggérée

Si vous souhaitez prendre en charge les anciens navigateurs, respectez les 16 noms de couleurs d’origine, car les couleurs X11 ne sont pas sockets en charge. Sinon, vous êtes libre d’utiliser l’un des 147 noms de couleurs spécifiés dans la spécification X11.

Tous les navigateurs doivent respecter les spécifications en référence aux codes hexadécimaux équivalents. Le temps nécessaire à l’parsingur pour lire les noms de couleur est virtuellement, sinon exactement, identique à celui d’une valeur hexadécimale, d’une valeur rgb ou d’une valeur hsl ().

Pour moi, il est plus facile d’écrire vos codes HEX en minuscules. Par exemple, # 8b88b6 est évidemment plus lisible que # 8B88B6. En outre, j’ai tendance à utiliser la couleur HEX abrégée au lieu du code complet (# 666 au lieu du # 666666) car il est plus efficace.

Personnellement, je préfère utiliser des codes hexadécimaux pour 2 raisons

1. il est plus facile de copier un code hexadécimal à partir de Photoshop
2. Vous pouvez utiliser des codes hexadécimaux dans une feuille de style, mais vous devrez mélanger deux styles (hexcodes et noms de couleurs) sinon. Ainsi, votre feuille de style peut être plus uniforme / cohérente.

Cela suppose que vous utilisiez des couleurs autres que le simple rouge, noir, blanc, etc. Dans un environnement multi-développeur, je dirais que les codes hexadécimaux sont meilleurs car ils sont plus universellement cohérents (chaque développeur sait exactement quelle est la couleur).

Les réponses précédentes semblent désormais dépassées.

Si vous développez pour les navigateurs prenant en charge CSS3, qui sont tous les principaux navigateurs depuis IE9, vous pouvez utiliser des noms de couleurs dans CSS. En HTML, seules les 16 couleurs Web d’origine sont sockets en charge.

La question était s’il y avait des inconvénients. Je pense qu’il y en a quelques-uns:

• Je trouve que certains noms de couleurs ne sont pas corrects. Exemples:
  • L’azure est généralement considéré comme une couleur beaucoup plus foncée.
  • La pelouse verte n’est rien comme une pelouse que j’ai jamais vue.
  • Violet ressemble plus à ce que j’appelle rose.
• Il est plus difficile de créer une version légèrement plus sombre ou plus claire de la couleur en modifiant ses valeurs hexadécimales. Par exemple, une variante plus sombre de #DCDCDC serait #DADADA, mais si j’avais commencé avec le nom de couleur gainsboro, je n’en aurais aucune idée.
• Les calculs Javascript sont plus difficiles sur un nom.

Sources: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value et http://caniuse.com/#search=css3%20colors

Je préfère une optimisation supplémentaire, #c00 pour le rouge. Si vous #aabbcc d’utiliser une couleur primaire ou une couleur similaire à #aabbcc , vous pouvez utiliser un raccourci, #abc .

J’utilise des noms de couleurs pour le prototypage, le débogage et pour mettre en place des combinaisons de couleurs monochromatiques très simples qui sont ensuite prêtes pour un thème avec des couleurs hexadécimaux hyper-spécifiques. Il rend facile à repérer une propriété thématique. C’est aussi plus lisible par l’homme; moins de fatigue cérébrale lorsque vous essayez de visualiser instantanément ce qui se passe.

 .component { background-color: black; color: white; } 

… puis dans le dossier de thème …

 .some-theme .component { background-color: #5f5f5c; color: #fafafc; } 

Cela dépend vraiment de votre style de codage. Je m’en tiens aux valeurs hexadécimales pour la cohérence – une couleur est toujours formatée en #000 ou #000000 , et je n’ai pas à me soucier de basculer entre les couleurs namd et non nommées.

En fin de compte, c’est une décision que vous et votre équipe devrez prendre vous-même. Tout dépend de vos préférences.

Personnellement, je préfère que toutes les couleurs d’un fichier CSS soient définies de la même manière, si possible.

De cette façon, je n’ai pas à penser différemment lorsque je vois différentes couleurs définies (par exemple red , #cd876f et rgba(255,255,0,0.4) ).

Je préfère également les notations de couleur qui correspondent à ce que je vais voir lors de l’identification de la couleur dans le dessin que je suis en train de mettre en œuvre. La palette de couleurs de Photoshop donne des valeurs RVB et hexadécimales, entre autres, mais ne donne pas de noms de couleurs CSS. (D’autres outils de conception peuvent faire si.)

Je pense que les noms de couleur sont plus descriptifs … Et c’est une bonne raison de l’utiliser lorsque cela est possible.

à mon avis, c’est une question de préférence. si la couleur est aussi simple que le rouge, le noir, le gris, le bleu, le blanc, etc., utilisez le mot au lieu de l’hex.