[CSS] Colors

When you want to create visually impressive web site, you need to understand how to use colors in CSS. Color values are used everywhere (text colors, background colors …).

1. Color Values

There are many ways to specify colors:

  • #rrggbb : Hexa-decimal notation for red, green, and blue
  • #rgb : Shortand notation of #rrggbb (#a63 equals to #aa6633)
  • rgb(rrr, ggg, bbb) : 0-255 are used
  • rgb(r%, g%, b%) : 0%-100%
  • hsl(h, s%, l%) : hue angle (0-360), satuaration (%), lightness (%)
  • rgba(rrr, ggg, bbb, a) : with alpha (opacity) value ( 0 – 1)
  • rgba(r%, g%, b%, a) :
  • hsla(h, s%, l%, a) :
  • keyword : black, blue, green, red, white …┬átransparent

For example, yellow can be expressed like this:

h1 { color:#ffff00; }
h1 { color:#ff0; }
h1 { color:rgb(255,255,0); }
h1 { color:rgb(100%,100%,0%); }
h1 { color:hsl(60,100%,50%); }
h1 { color:yellow; }

 

2. Background Colors

The “background-color” property is used to set the background color for an element.

h1 { background-color: Green; }

 

3. Text Colors

The “color” property is used to set the foreground color of an element that is usually text.

h1 { color:#ffff00; }

 

4. BorderColors

The “border-color” property is used to set the border color of an element.

  • border-bottom-color
  • border-top-color
  • border-left-color
  • border-right-color
h2
{
  border:1px solid;
  border-bottom-color:Red;
  border-top-color:Red;
  border-left-color:transparent;
  border-right-color:transparent;
}

 

5. Example

h1
{
  width:300px;
  height:100px;
  background-color: Green;
  color: rgb(255,0,0); /* Red */
  border: 1px solid #00f; /* Blue */
}

 

6. Color Picker

HTML5 provides the new input type “color“, which can be rendered as a color picker.

<!DOCTYPE html>
<html>
  <head>
    <title>Color Picker</title>
    <link rel="Stylesheet" href="CSS/color.css" />
    <script src="../../Scripts/jquery.js"></script>
    <script>
    $(document).ready(function () {
      $('#colorpicker').on("change", function() {
        $("body").css("background-color", $('#colorpicker').val());
      });
    });
    </script>
  </head>
  <body>
    <section>
      <header>
        <h1>Colors</h1>
      </header>
      <div>
        Choose the background color : <input id="colorpicker" type="color" />
      </div>
    </section>
  </body>
</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s