Are there any cons to using color names in place of color codes in CSS?

by

Different browsers may not agree on what some color names mean. There are not names for all 16 million 24-bit colors. In fact there are only 17 W3C-standard color names. It’s probably OK to use those.

Personally I use a templating system at build time to pre-process my CSS files, so that I can keep a standard set of site colors and refer to them by name. That way I get the best of both worlds: I know exactly what my RGB color values are, but I can use simpler names in the CSS.

(Of course, it’s still not possible to know exactly how a color will look on a given user’s browser.)

edit — in the 5 years since this answer was written, preprocessors like Less and Sass have become pretty common. Those provide some very sophisticated tools for managing colors (and many other things) in CSS sources.

More Related Contents:

  1. How to change the color of an svg element?
  2. How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [duplicate]
  3. How do I apply opacity to a CSS color variable?
  4. How can I define colors as variables in CSS?
  5. CSS hexadecimal RGBA?
  6. Convert 8-digit hex colors to rgba colors?
  7. Chrome renders colours differently from Safari and Firefox
  8. div background color, to change onhover
  9. How can I change the color of an ‘svg’ element?
  10. Are there any good reasons for using hex over decimal for RGB colour values in CSS?
  11. How can I invert color using CSS?
  12. How does hexadecimal color work?
  13. Is there any clean CSS method to make each letter in a word a different color?
  14. Could someone explain this CSS code?
  15. Is there any way to hover over one element and affect a different element? [duplicate]
  16. Make a DIV fill an entire table cell
  17. Is there a CSS hack to affect Safari only NOT Chrome?
  18. Outlining and partially filling an SVG Shape
  19. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  20. Add a css class to a field in wtform
  21. How can I use CSS3 transform on a span?
  22. What is this CSS selector? [class*=”span”]
  23. Remove “whitespace” between div element
  24. CSS text-decoration underline color [duplicate]
  25. Is there an opposite CSS pseudo-class to :hover?
  26. Why isn’t my justify-content property working?
  27. Remove border radius from Select tag in bootstrap 3
  28. CSS to stop text wrapping under image
  29. CSS: Constrain a table with long cell contents to page width?
  30. internet explorer font face ssl

Leave a Comment