Colors

by Ange Tuteur March 6th 2015, 9:06 am

Colors

Colors are regularly used in the administration panel, borders, text, backgrounds, everything.. Sometimes it's hard to differentiate color types used in coding (HTML and CSS).

This tutorial exhibits 3 possible ways to define a color.

Color Names

It is possible to define a color in the most simplest way; its name.

Here's a list of the most common color names :

Usage example :

Code:: Text

Result :

Text

Here's a list of color names from w3schools with their hexadecimal equivalents : HTML Color Names

RGB Colors

The RGB color model (Red-Green-Blue or RGB) is based on the principle of additive color synthesis. In additive color synthesis, the primary colors are red, green, and blue : mixing all 3 results in different shades of gray, whereas mixing 2 can result in a different color such as yellow ( red + green or rgb(255,255,0) ).

By indicating the intensity of red, green, or blue (preserved order) you can create different shades of colors.

For example, here's a color picker that shows both RGB and Hexadecimal : RGB Color Code

To use the code, simply specify "rgb" with the three color shades : "(1, 2, 3)." Each shade has a minimum value of 0 and a maximum value of 255.

Usage example :

Code:: Text

Result :

Text

There's also RGBA which adds an Alpha channel that allows you to define transparency for your colors.

For example :
rgba(255, 0, 0, 0.3) gives us a red with 30% transparency. The transparency is defined using a decimal, 1 or 1.0 = 100% transparency, whereas 0.5 = 50% transparency.

You can find more information here : RGBA Colors

Hexadecimal Colors

This is basically a converted version of RGB but used much more, because it's less cumbersome and more precise. It consists of six digits or 3 digits(shorthand) indicating the different color shades. The code is written like so :
#000000 ( two digits for each primary color; red, green, and blue )

The lowest possible value is 00, and the highest possible value is FF ( equal to 255 ). The values are incremented like the following :

Code:: 00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F 10 11 ...and so on, until FF

Shorthand is useful if you want to keep your code small. For example :
#F00 is equal to #FF0000 (red)
#39C is equal to #3399CC (light blue)

Here's a color picker which offers hexadecimal color codes : http://www.colorpicker.com/

Usage example :

Code:: Text

Result :

Text