WebDesign: CSS and Colors (W6-P3)

There are four primary ways to represent colors within CSS:
1) keywords, 2) hexadecimal notation, 3) RGB values and 4) HSL values.

For example, the following CSS code would turn the background maroon for the parts of the HTML code using the paragraph selector. In this case the color keyword is used (i.e. maroon).

p {
background: maroon;
}

For example, the following CSS code would turn the background maroon for the parts of the HTML code using the paragraph selector. In this case the hexadecimal number is used (i.e. maroon).

p {
background: #800000;
}

Color is an important part of graphic design and thus is an important part of website design. Watch the video below and make special note of definitions for color theory, primary colors, secondary colors, the color wheel, hue, saturation, value, 4 main color schemes (monochromatic, analogous, complementary and triadic).  The definitions for the above terms are on GCF's page for the instructional video.


Beginning Graphic Design: Color


A color wheel is "an abstract illustrative organization of color hues around a circle that shows relationships between primary colors, secondary colors, tertiary colors etc"(Wikipedia).


Also, if you are interested, here is a link to the Adobe Color/Kuler site mentioned previously. This a good site to get a hands-on feel for color theory, color schemes and color values (RGB and hexadecimal).  Adobe Color works best on a laptop or desktop.




Share this post with others. See the Twitter, Facebook and other buttons below.
Please follow, add, friend or subscribe to help support this blog.
See more about me at my web site WilliamHartPhD.com.