Home
| 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.
|
| 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:
<span style="color:rgb(136, 66, 29)">Text</span>
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:
<span style="color:#2892AC">Text</span>
Result :
| Text |
| This tutorial was written by Kinotto of the French Support Forum, it has been translated and updated by Ange Tuteur. |
