Colors are a vital part of CSS, allowing the user to change the color of text and borders, and the background colors of elements such as text and divs - a fairly major part of design. In this article, I will explain the different syntaxes available - the obvious two are string colours (such as "red" and "black"), and Hex colours (such as
#ef0000), and I will also cover RGB and HSL colours, both of which are possible in CSS.
There are 147 color names defined in the HTML and CSS color specifications which allow you to just type the name of the colour to get the colour. This is a lot easier and a lot more readable.
Here is a table of all the color names in CSS:
They can be used in any CSS property that accepts a colour value:
color: white; background-color: black; border: 2px red solid;
Remember that while it is "grey" in en-GB, CSS uses en-US (hence "color"). You should try to get into the habit of using "gray".
This type of color value is less used than color names and hex colors, but it helps explain hex colors so I'll explain them before. The CSS RGB function allows you to specify the red, blue, and green values of a colour (similar to like in a graphic package such as PhotoShop). For example, the following colours are equal to the color names besides them:
color: rgb(255, 0, 0); /* red */ color: rgb(0, 255, 0); /* lime */ color: rgb(0, 0, 255); /* blue */ color: rgb(0, 128, 0); /* green */ color: rgb(0, 0, 0); /* black */ color: rgb(255, 255, 255); /* white */ color: rgb(128, 128, 128); /* gray */
The RGB function also allows you to specify the values as a percentage of 255. For example, 0% would be 0, 100% would be 255, and 50% would be 128:
color: rgb(100%, 0%, 0%); /* red */ color: rgb(0%, 50%, 0%); /* green */
In addition to the rgb function, an
rgba function was introduced in CSS3. Pretty much all browsers but IE8 and below support it. It allows you, in addition to specifying the rgb values of the color, to specify an alpha transparency:
background-color: rgba(255, 0, 0, 0.7);
That would set the background-color of whatever element is being selected to red, with a opacity of 0.7:
This text is under the div.
This text is over the div.
The other common type of CSS color is the hex value. Hexadecimal is base 16; 0x16 is 22, 0xF is 15, and 0xFF is 255. Hex colors accept three two-digit hexadecimal numbers with no spaces in between, where the first is red out of 255 (0xFF), the second is green out of 255, and the third is blue out of 255.
The following two CSS colors would be the same:
#EFEFEF rgb(239, 239, 239)
They are case insensitive, meaning that you can write either
#EFEFEF (or even, for that matter,
#eFEfeF; although that isn't too readable).
It is possible to shorten some hex colors to three digits. The following two are equivalent:
#fff is not equal to
hsl function was introduced alongside the
rgba function in CSS3, and has the same browser support.
The function takes three values. The first is the hue, a number between 0 and 360 (inclusive) which should be the number of degrees on the colour wheel. 0 and 360 are red, 120 is green, and 240 is blue - everything else is in between those. This can also be a percentage; 0% would be red, 33% would be green, and 66% would be blue.
The second value is the saturation as a percentage. 100% would be the full color, while 0% would be colorless.
Lightness, the third value, is also a percentage. 0% is black, 100% is white, and 50% is the color. Everything else is relative; 75% would be the light color, and 25% would be a darker color.
The following are all valid hsl values:
color: hsl(0, 100%, 50%); /* red */ color: hsl(120, 100%, 50%); /* lime */ color: hsl(120, 50%, 50%); /* green */
hsla function, similar to the
rgba function, allows you to specify the alpha transparency of the colour. The following would produce the same colour as in the previous transparency example:
background-color: hsl(0, 100%, 50%, 0.7);
A hint for the Regex Tuesday Challenge on colors is that a grayscale color has the same red, green, and blue values. The following would be grayscale colors:
#fff #efefef #1f1f1f rgb(0, 0, 0) rgba(14, 14, 14, 0.9) hsl(0, 0, 40%) hsl(0, 40%, 0%)
# This is an <h1> tag ## This an <h2> tag ###### This is an <h6> tag Inline markup: _this text is italic_, **this is bold**, and `code()`. [Link text](link URL "Optional title") [Google](http://google.com/ "Google!") ![Alt text](image URL) ![This is a fish](images/fish.jpg) 1. Ordered list item 1 2. Ordered list item 2 * Unordered list item 1 * Unordered list item 2 * Item 2a * Item 2b And some code: // Code is indented by one tab echo 'Hello world!'; Horizontal rules are done using four or more hyphens: ---- > This is a blockquote
Inline markup: this text is italic, this is bold, and
And some code:
// Code is indented by one tab echo 'Hello world!';
Horizontal rules are done using four or more hyphens:
This is a blockquote