The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Colors

View previous topic View next topic Go down

Colors

Post by Ange Tuteur on 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:
<span style="color:blue">Text</span>

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



Ange Tuteur
Forumaster

Male Posts : 13034
Reputation : 2714
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum