Colors - 141_Display_Colors.html

Full list of colors is referenced at ECLoc5761.

If you want to create a dark purple, one might use 89 red, no green, and 127 blue, like here:

One could write the same color as rgb(35%, 0%, 50%), since 89 is 35% of 255 and 127 is 50% of 255.

For the example of #59007F, 59 is the hex equivalent of 89, 00 is the hex equivalent of 0, and 7F is the hex equivalent of 127.

View this below:

When a hex color is composed of three pairs of repeating digits, as in #ff3344, you may abbreviate the color to #f34.

Colors may also be represented in CSS3 RGBA and HSLA.

Next I shall try the examples from ECLoc5834.

A style rule is made up of a selector (which indicates what will be formatted) and a declaration (which describes the formatting that should be executed).

The opacity selection for the background with 0.75 means it is 25% transparent rgba(60,143,0,.75)

A style rule is made up of a selector (which indicates what will be formatted) and a declaration (which describes the formatting that should be executed).

The opacity selection for the background with 0.4 means it is 60% transparent rgba(60,143,0,.4)

A style rule is made up of a selector (which indicates what will be formatted) and a declaration (which describes the formatting that should be executed).

The opacity selection for the background with 0.4, but here pure green was specified.

property: rgba(red, green, blue, alpha transparency);

The closer to 0 the alpha setting, the more transparent the color becomes. If it is 0, it’s completely transparent, as if you hadn’t set a color at all. Similarly, 1 is completely opaque, meaning it’s not transparent at all.

HSL and HSLA are the other new additions in CSS3. The latter is the alternative to RGBA for setting alpha transparency on a color.

HSL stands for hue, saturation, and lightness, where hue is from 0-360 and saturation and lightness are percentages from 0-100.
HSL hue values run clockwise on the circle. So 90 is the rightmost point, 180 is at the bottom, 270 is the leftmost point, and 360 meets 0 at the top.
For example, here are some core colors as you move around the circle:
Red is hsl(0,100%,50%);
Yellow is hsl(60,100%,50%);
Green is hsl(120,100%,50%);
Cyan is hsl(180,100%,50%); Blue is hsl(240,100%,50%); Magenta is hsl(300,100%,50%);

Also shown is the ColorWheel on ECLoc5886, but without link.

Brandon Mathis’s HSL Color Picker (hslpicker.com) is a free online tool that allows you to pick a color and get its HSL, hex, and RGB values. See display below.

I stopped here: ECLoc5967