NOTE: Please see this page first if you came here from elsewhere.
HSL means Hue, Saturation and Lightness. Plus the A means the alpha channel that controls Opacity/Transparency.
Now we can control all four attributes of any color we want to use on a web page, via codes in the head and body tags. These codes are supported by most browsers: IE9+, Firefox 3+, Chrome, Safari, and Opera 10+.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
where the alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Please refer to Colors, Part 1 - HSL for the explanation about the meanings of the H, S and L codes seen in the tags below.
HSL colors with opacity:
#p1 {background-color:hsla(120,100%,50%,0.3);} / * green with opacity */
#p2 {background-color:hsla(120,100%,75%,0.3);} / * light green with opacity */
#p3 {background-color:hsla(120,100%,25%,0.3);} / * dark green with opacity */
#p4 {background-color:hsla(120,60%,70%,0.3);} / * pastel green with opacity */
#p5 {background-color:hsla(290,100%,50%,0.3);} / * violet with opacity */
#p6 {background-color:hsla(290,60%,70%,0.3);} / * pastel violet with opacity */
The following is in the head tag for this page:
In the body where you want the color to appear:
CSS Legal Color Values: http://www.w3schools.com/cssref/css_colors_legal.asp
Predefined color names (cross browser): https://www.w3schools.com/cssref/css_colors.asp
Here's an absolutely fantastic color chart. Arranged alphabetically by color names, it shows the hex, rgb according to each channel, and saturation and lightness of each. In this way, if you are using the HSL or any other color management system, you can easily find what you need to put into each CSS style color line in the head. http://www.colorhexa.com/color-names.<.p>
Please read these tutorials in the order given below
Introduction to Colors on Web Pages
Part 1 - HSL Colors ~ Part 2 - HSLA Colors
Part 3 - RGB Colors with Alpha Channel
Part 4 - Hexidecimal Colors
Part 5 - RGBA for Table Cells
Part 6 - Border-Collapse: Separate
Parts 1-4 are about coloring the backgrounds of individual paragraphs. If you don't like the spaces that show between the different colored paragraphs, then try putting each paragraph within a table cell and coloring each cell with a different RGBA color. Simply substitute #td for the #p numbers. See Part 5 above.
|
