For an explanation of how RGB colors are written, please see this Color page
RGB colors with opacity:
#p1 {background-color:rgba(255,0,0,0.3);} / * red */
#p2 {background-color:rgba(0,255,0,0.3);} / * green */
#p3 {background-color:rgba(0,0,255,0.4);} / * blue */
#p4 {background-color:rgba(192,192,192,0.2);} / * grey */
#p5 {background-color:rgba(255,255,0,0.5);} / * yellow */
#p6 {background-color:rgba(255,0,255,0.3);} / * cerise */
Note that I have varied the opacities in different hues, from 0.2 in the gray, to 0.5 in the yellow.
The following go in the head tag:
In the body of page wherever you want a colored paragraph:
For further color info, please consult the following W3C Schools pages:
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.
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.
|
