CSS colors

CSS colors can be defined in hexadecimal.

Hexadecimal uses three components: red, green, and blue.

You can define colors in shorthand hexadecimal: for example #DC2 corresponds to #DDCC22. Note that some colors cannot be abbreviated. The goal is to shorten your hexadecimal colors whenever possible.

The smaller your CSS file is in size, the faster your website will load on your visitor’s computer.

Example:

background-color : #FF9900;

You can define colors in decimal, using RGB colors. They are encoded as an integer between 0 and 255. This is not widely used, but you can do it without any problems.

You can also use percentages to define your RGB color. Zero means the component is absent, while 100% means it is at its maximum. You are always defining the red, green, and blue colors — a mix of the three primary colors.

Examples:

background-color: rgb(255,153,0);
background-color: rgb(100%,67%,0%);

You can also define CSS colors using English keywords that represent basic colors such as green, yellow, blue, orange, white, black, red, etc.

Example:

color: orange;

You are free to choose whichever method you prefer. The goal is for it to be meaningful to you.

As we just mentioned, keywords are case-insensitive identifiers that represent a given color. For example, the keyword red represents the color red, blue represents blue, brown represents brown, etc. The list of accepted values has evolved significantly across different versions of the specification:

• The CSS Level 1 specification only accepted 16 basic colors, built from the VGA colors available on graphics cards.
• The CSS Level 2 specification added the keyword orange.
• Since the early days of CSS colors, browsers have supported additional colors, notably the X11 colors, as some of the first browsers were X11 applications. SVG 1.0 was the first standard to formally define these keywords, and the CSS Level 3 color specification also formally defined these colors. These colors are sometimes called extended colors, X11 colors, or SVG colors.
• The CSS Level 4 specification added the color rebeccapurple in honor of Eric Meyer.

Here are some drawbacks of using keywords:

• Apart from the 16 basic colors also present in HTML, the other values cannot be used in HTML. HTML will convert these unknown values with a specific algorithm that will produce entirely different colors.
• If an unknown keyword is used, the property will be considered invalid and will therefore be ignored. This is different from HTML behavior which will approximate the value.

The color rebeccapurple is equivalent to the color #639. To better understand why it was added, you can read this Codepen post by Trezy “Honoring a great man”.