Colors Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums

    Colors

    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13246
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°1

    Colors Empty Colors

    Post by Ange Tuteur Fri Mar 06 2015, 10:06


    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.


    Colors 09615110Color 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 :
    Colors 19901210

    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


    Colors 09615110RGB 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.
    Colors Acs10

    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


    Colors 09615110Hexadecimal 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.
    • Back to top