Colors
Last updated
Was this helpful?
Last updated
Was this helpful?
We're going to cover the three most common ways to specify colors in CSS: named colors, hex codes, and rgb values.
Using named colors is the easiest format for adding color in CSS, but is primarily used for prototypes, since they only represent a small fraction of the available colors.
There are currently 140 color names supported by modern browsers. Red, blue gold, and maroon are just a few examples. You can find the full list below.
Hex color codes are specified by a hashtag followed by three pairs of characters that represent the intensity of the three primary colors (red, green, and blue). Possible values range from 00 (the lowest intensity) to FF (the highest intensity).
White: #FFFFFF (highest intensity for all)
Black: #000000 (lowest intensity for all)
Red: #FF0000
Green: #00FF00
Blue: #0000FF
Transparency can be specified by adding two additional digits. Values range from 00 (completely transparent) to 99 (completely opaque).
Since there are so many possibilities, web developers use color picker tools to find the hex values for colors.
RBG color codes are similar to hex, except represented by decimal values between 0 and 255 for the intensity of the red, green and blue colors.
White: rgb(255, 255, 255) (highest intensity for all)
Black: rgb(0, 0, 0) (lowest intensity for all)
Red: rgb(255, 0, 0)
Green: rgb(0, 255, 0)
Blue: rgb(0, 0, 255)
Transparency : add a fourth value to indicate the transparency. Values range from 0 (completely transparent) to 1 (completely opaque).
color: text color, such as for paragraphs, headings
background-color: background color for any element that supports a background color.
border-color: border color for any element that has a border.
The following page has a very good overview of the different options and formats for specifying colors.