New Website

I've made a new website, as lynx.io is dead. You can find it here: http://macr.ae/—it's similar in format to lynx.io, but has better articles, and they're all written by me.

JavaScript disabled

While it will still mostly work, a lot of this site's functionality relies on JavaScript - please enable it for the best experience.

Colors in CSS

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.

Color names

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:

aliceblue antiquewhite aqua aquamarine azure beige bisque black
blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate
coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod
darkgray darkgreen darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred
darksalmon darkseagreen darkslateblue darkslategray darkturquoise darkviolet deeppink deepskyblue
dimgray dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite
gold goldenrod gray green greenyellow honeydew hotpink indianred
indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue
lightcoral lightcyan lightgoldenrodyellow lightgray lightgreen lightpink lightsalmon lightseagreen
lightskyblue lightslategray lightsteelblue lightyellow lime limegreen linen magenta
maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen
mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy
oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen
paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue
purple red rosybrown royalblue saddlebrown salmon sandybrown seagreen
seashell sienna silver skyblue slateblue slategray snow springgreen
steelblue tan teal thistle tomato turquoise violet wheat
white whitesmoke yellow yellowgreen

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".

RGB colors

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 */

RGBA colors

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.

Hex colors

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 #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:

#ffffff
#fff

Note that #fff is not equal to #0f0f0f.

HSL colors

The 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 */

The hsla function

The 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);

Grayscale colors

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%)

About Callum Macrae:

Callum Macrae is the founder of lynx.io and a JavaScript developer from the United Kingdom. He is currently writing his first book, to be published by O'Reilly Media.

You can view more articles by this author here.

Tags: css colors

Comments

No comments; leave one below.

says:

Add comment

 

You can use markdown in comments (press "m" for a cheatsheet).

Enable JavaScript to post a comment

Markdown Cheat Sheet

# 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

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 Google

This is a fish

  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

Toggle MarkDown / HTML (t), full reference or close this