Tutorials

Css Colors

 

Colors in CSS are most often specified by:

  • a valid color name - like "red"
  • an RGB value - like "rgb(255, 0, 0)"
  • a HEX value - like "#ff0000"
  • Color Names

     

    Colors set by using color names:

     

    Example

    Color Name
     Red
     Green
     Blue
     Orange
     Yellow
     Cyan
     Black

    Try it Yourself

    Note: Color names are case-insensitive: "Red" is the same as "red" or "RED".

    HTML and CSS supports

    RGB (Red, Green, Blue)

     

    RGB color values can be specified using this formula: rgb(red, green, blue).

    Each parameter (red, green, blue) defines the intensity of the color between 0 and 255.

    For example, rgb(255,0,0) is displayed as red, because red is set to its highest value (255) and the others are set to 0. Experiment by mixing the RGB values below:

    Example

    Color RGB
      rgb(255,0,0)
      rgb(0,255,0)
      rgb(0,0,255)
      rgb(255,165,0)
      rgb(255,255,0)
      rgb(0,255,255)

    Try it Yourself

    Shades of grey are often defined using equal values for all the 3 light sources:


     

    Example

    Color RGB
      rgb(0,0,0)
      rgb(128,128,128)
      rgb(255,255,255)

    Try it Yourself

    Hexadecimal Colors

     

    RGB values can also be specified using hexadecimal color values in the form: #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as decimal 0-255).

    For example, #FF0000 is displayed as red, because red is set to its highest value (FF) and the others are set to the lowest value (00). Note: HEX values are case-insensitive: "#ff0000" is the same as "FF0000".


    Example

    Color HEX
      #FF0000
      #00FF00
      #0000FF
      #FFA500
      #FFFF00
      #00FFFF

    Try it Yourself

    Shades of grey are often defined using equal values for all the 3 light sources:


     

    Example

    Color HEX
      #000000
      #808080
      #FFFFFF

    Try it Yourself