When we put colors onto a web page, we are NOT using pigment colors. We are working instead with the Colors of Light.
HSL means Hue, Saturation and Lightness. Now we can control all three 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.
An HSL color value is specified with: hsl(hue, saturation, lightness).
HUE is a degree on the color wheel (from 0 to 360) -
RED: 0 (or 360)
GREEN: 120
BLUE: 240
(To move from Red to Green, 360 ÷ 3 = 120
To move from Green to Blue, 120 x 2 = 240)
SATURATION is a percentage value;
100% - the full color (hue), no black or white added.
0% - a shade of that hue dulled to black.
LIGHTNESS is also a percentage;
100% is white with no hue added.
0% is black with no hue added.
Note that for the dark green below, there is only 25% lightness (the 3rd number).
This may seem confusing, because the colors of Light do not behave the way pigment colors do. Just use some of these codes and eventually you'll get the "hang" of it.
Examples
#p1 {background-color:hsl(120,100%,50%);} / * green */
#p2 {background-color:hsl(120,100%,75%);} / * light green */
#p3 {background-color:hsl(120,100%,25%);} / * dark green */
#p4 {background-color:hsl(120,60%,70%);} / * pastel green */
#p5 {background-color:hsl(290,100%,50%);} / * violet */
#p6 {background-color:hsl(290,60%,70%);} / * pastel violet *
/
The following is in the head tag for this page:
In the body where you want the color to appear:
To get a specific Lightness (white to hue or black to hue, go to the following W3C webpage. Find the hue you want in the list and then to its right you will see two links. One says "shade," the other says "mix." Predefined color names (cross browser): https://www.w3schools.com/cssref/css_colors.asp
If you play around with the resulting interactive charts, you'll get an idea of what percentages to put into the paragraph tags in the head of your page.
However, 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.
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.
|
