There are 4 main ways to specify color with CSS.

NOTE: One important thing to remember is that we always use the American spelling of color with coding. For those of us not used to this spelling, it can take a while to get the hang off.

Hex Colors

These are probably very familiar to marapets users, as they're used to change clothing and font colors. These are 6 digit codes preceded by the # symbol. It's separated into 3, 2 digit pieces, ranging in value from 00 (none of that color) to FF (all off that color), representing the amount of red, green and blue, in that order.

#05A557

#5D0C72

RGB Values

Similar to hex codes, values for red, green and blue are expressed as numbers, but they range from between 0 (none of that color) to 255 (all of that color). % values can also be used instead.

rgb(222, 59, 4)

rgb(56%, 28%, 38%)

RGBA Values

This is similar to rgb values, but it has a forth value to indicate opacity, known as the 'alpha' value. It's a number between 0.0 and 1.0.

rgba(255,0,0, .5)

Color names

There are 147 predifined color names. These aren't used often as they're limited and tricky to remember.

MediumVioletRed

SandyBrown

Foreground and background colors

Foreground color is the actual text color, the default for this is black. It's defined by the 'color' property. Background color is the color around the element, be it body, p, h1 etc.

p {color: #0654A9; background-color: PeachPuff ;}

Gradients

These are tricky, and different browsers require different CSS code, so I recommend using a generator for the CSS code and then just copying and pasting as required.

Useful resources

I'd highly recommend the ColorZilla add-on for Firefox and Chrome. It features, among other things an eyedropper, which lets you get the hex code and rgb value of any color you see online.