There are some solutions to these issues: However, you will still find plenty of examples of this practice in the wild.Īs a result of these drawbacks, I tend to use color keywords when prototyping, but switch to HSL as I refine the design. Note that you should never use inline attributes for creating appearence changes: always use CSS. Random words can generate colors too:, for example, produces a red. Browsers attempt to translate unknown keywords into hexadecimal, meaning that misspelled words can generate unexpected colors. Mispellings can give unexpected results.You may notice that darkgray is actually lighter than gray, due to a historical anachronism similarly, darkslategrey is more green than gray. black, white and red are easy to remember darkgoldenrod, not so much. Color names can be difficult to recall.Unlike HSL, RGB, or even hexadecimal options, color keywords can’t be made lighter or darker in CSS. The keywords provided are the only named options available in CSS. Keywords have a few potential drawbacks you should be aware of: rebeccapurple was added to the specification in her honour, and is supported in all recent browser versions. Rebecca's death at the age of six was a blow felt throughout the community. It is named after the favorite color of Rebecca Meyer her father, Eric Meyer, is a beloved contributor to CSS standards and knowledge. rebeccapurple is the most recent addition to the CSS keyword range.In the list above I’ve provided the transparent keyword with its eight-digit hex equivalent value for consistency. transparent is valid wherever any color can be used, but is most frequently associated with gradients and borders. Technically, it does not resolve to a hexadecimal color but to an RGB value with 0 alpha: specifically, rgb(0, 0, 0, 0). However, Internet Explorer has issues with the latter keyword, rendering it as green you should always use the “gray” spelling for this reason. Looking at the named color range above, you’ll observe that English and American spellings for “gray” and “grey” are covered, and render the same shade.For readability and clarity, lowercase is preferred. Most aspects of CSS are case-insensitive, meaning that color keywords can be written uppercase (BLACK), lowercase (black) or mixed. Consisting of 149 distinct keywords (shown above, with their hexadecimal equivalents) CSS named colors have a few special features:įirst, color keywords are used in the same way in CSS as every other color system for example, to set the background color of the body element in a linked, scoped or embedded style sheet: One of the two oldest methods of applying color to web pages, named colors remain very useful in web design and development today.