Color Function - HTML CSS CSS

HTML CSS examples for CSS:Color

  1. HOME
  2. HTML CSS
  3. CSS
  4. Color

Introduction

There are a number of functions that allow you to select a color.

CSS Color Functions

Function Description Example
rgb(r, g, b) Specifies a color using the RGB model. color: rgb(112, 128, 144)
rgba(r, g, b, a) Specifies a color using the RGB model,with the addition of an alpha value to specify opacity. A value of 0 is fully transparent; a value of 1 is fully opaque.color: rgba(112, 128, 144, 0.4)
hsl(h, s, l) Specifies a color using the hue,saturation, and lightness (HSL) model. color: hsl(120, 100%, 22%)
hsla(h, s, l, a) The same as for HSL, but with the addition of an alpha value to specify opacity.color: hsla(120, 100%, 22%, 0.4)

The following code shows how to use the rgb() function.

Demo Code

ResultView the demo in separate window 

      <!DOCTYPE HTML>
      <html>
          <head>
              <title>Example</title>
              <style>
                  p {
                      padding: 5px;
                      border: medium double black;
                      background-color: lightgray;
                      font-family: sans-serif;
                  }<!--   ww  w. j a  va2 s.c o  m-->
                  #mySpan {
                      font-size: x-large;
                      border: medium solid white;
                      background-color: green;
                      color: rgba(255, 255, 255, 0.7);
                  }
                  a:hover {
                      color: red;
                  }

              </style>
          </head>
    <body>
        <p id="fruittext">
            test test 
            <span id="mySpan">mySpan</span>.
            <a href="http://en.wikipedia.org">Learn more</a>
        </p>
    </body>
</html>

Related Tutorials