📖 Colors and Background Styles

Web Colors

As you may see from the text color example below, you can specify colors for Web pages in three different ways. The first way is just to specify the color name. There are 17 named colors that will work in all browsers (although you may find that others will work if you try them). A good color chart and explanation can be found at http://en.wikipedia.org/wiki/Web_colors.

Choosing Colors

Choosing colors for your website may not be easy for you to do. There are many issues facing web designers selecting appropriate colors for a site. The colors need to create the right mood for the visitors and the content. The colors need to be complimentary and have sufficient contrast to avoid violating the accessibility standards. There are many choices in selecting a color palette and building a theme.

Designers will spend a good deal of time studying color theory to understand how to use colors effectively. There are many tools online to guide designers in selecting these choices. Here are a few good places to start.

Once you understand colors, you can begin to build a color palette for use in your site pages. The importance of making good color choices are explained in the video below.

Video produced by GCFLearnFree.org
Named Colors

Colors can be applied to text, borders and other elements. Each is specified as either a foregroung or background attribute. To assign a color to text or borders, use the color property with a value of the assigned color. To assign a color to a background use the background-color property with a values of the assigned color.

<style>
	h1 {
		color: red;
	}
</style>
<style>
	div {
		background-color: green;
	}
</style>
Hex Code Colors

The second way is using a hex code. Hex codes are made up of numbers representing the amount of red, green and blue hues mixed to create a specific color. Each hue is represented by a 2 digit hexadecimal code between 00 and FF. A # is placed in front of the code so the browser knows a hex code is coming. #000000 is black and #FFFFFF is white. There are over 16 million colors that can be specified using the hexadecimal representation. Hex codes may be abbreviated to one digit for each hue if both digits are the same. For example, #FFF is the same as #FFFFFF or #C94 is the same as #CC9944.

RGB Colors

The third way to specify color is using the rgb value in percentages or numeric values between 0 and 255. For example, you could create purple by specifying 80% red and 40% blue and 0% green or rgb(80%, 40%, 0%);. The corresponding numeric values are found by multiply the percentage times 255. 80% of 255 is 204 and 40% is 102, so the same purple color can be achieved using rgb(204, 102, 0);

Finally, you can use RGBa color which allows you to specify the color and an alpha value that denotes the degree of transparency. RGBa is coded like RGB, but with a 4th value that denotes transparency. This is very useful for creating overlay effects.

color: rgba(204, 102, 0, .5);

The alpha value is coded as a number between 0 and 1 where 0 is completely transparent and 1 is completely opaque. A value of .5 would be 50% transparent, etc. RGBa may not be supported in some older browsers. To get around this, you can code 2 color values - 1 using rgb and then a second using rgba. If the browser supports rgba it will override the rgb property. If not, then the rgb color value will apply:

<style>
	h2 {
		color: rgb(120, 120, 120);
		color: rgba(0, 0, 0, .5);
	}
</style>
HSL/HSV/HSB Colors

Not as mainstream as the methods above, but these are similar color presentation methods that attempt to represent the RGB colors. Basically they use a method of specifying the amount of Hue(H), Saturation(S) and Lightness or Luminosity, Brightness or Value(L/B/V). A good explanation about these different methods can be found at https://en.wikipedia.org/wiki/HSL_and_HSV. An example of how to use this method to add color to your web page is shown below.

<style>
div {
    background-color: hsl(180, 50%, 50%);
    color: hsl(0, 0%, 100%);
}
</style>
Backgrounds

You can add a background color or background image to elements using style attributes.

background-color: color;
Specifies the color of the background using a keyword, rgb value or hex code.
background-image: url(filename);
Specifies the image that will be displayed in the background of the box.
background-repeat: keyword;
Specifies how the image will be repeated.
  • repeat is the default and will tile the image to cover the entire box.
  • no-repeat will display the image only once.
  • repeat-x will repeat the image horizontally only.
  • repeat-y will repeat the image vertically only.
background-position: horizontal vertical;
Specifies the horizontal and vertical position of the image. Top and left are the default values.
opacity: value:
Specifies the transparency of the element. value is a decimal number between 0 and 1 where 0 is completely transparent and 1 is completely opaque.

All of these attributes may be combined into a single compound attribute.

background: color url(filename) repeat scroll horizontal vertical;
Multiple Backgrounds

CSS3 allows you to specify multiple background images for an element and is supported by most current browsers.

<style>
	background: 
	url(filename) [position] [size] [repeat] [attachment],
	url(filename) [position] [size] [repeat] [attachment],
	. . .
	url(filename) [position] [size] [repeat] [attachment];
</style>

The url attribute is the only one required. Images are stacked in the order listed with the 1st one on top and last one on bottom. Background color should be included as a separate item and it's a good idea to include fallback for browsers that don't support multiple backgrounds.

<style>
	background: url(image1.jpg) 100% no-repeat center center;
	background: 
		url(image1.jpg) repeat-x top left,
		url(image2.jpg) repeat-x bottom left,
		url(image3.jpg) 100% 100% no-repeat center center;
	background-color: black;
</style>
CSS3 Gradients

Gradients are supported in Safari, Chrome and Firefox. They can be used anywhere an image can be declared in a style sheet (background-image, list-style-image, border-image). This requires browser prefix and works slightly differently for each.

Linear gradients
-prefix-linear-gradient(start, startcolor, endcolor);

Where prefix is the web browser prefix.

  • -moz- for Firefox
  • -webkit- for Safari and Chrome
  • -o- for Opera
  • -ms- for Internet Explorer (does not work at this time)

Start is the location to start (top, bottom, left, right). Startcolor and endcolor are the starting and ending colors using names or hex codes.

-webkit-gradient(linear, startX, startY, stopX, stopY, from(color), to(color));
<style>
	#linearBg1 {
		/* fallback */
		background-color: #1a82f7;
		background-image: url(images/linear_bg_1.png);
		background-repeat: repeat-y;
		/* Safari 4-5, Chrome 1-9 */
		background: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727));
		/* Safari 5.1, Chrome 10+ */
		background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
		/* Firefox 3.6+ */
		background: -moz-linear-gradient(left, #2F2727, #1a82f7);
		background: -ms-linear-gradient(left, #2F2727, #1a82f7);
		background: -o-linear-gradient(left, #2F2727, #1a82f7);
	}
</style>
Example Gradient

Add more colors in the list of colors for evenly spaced stops.

background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);

Add a percentage for unevenly spaced stops.

background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
Radial Gradient
-prefix-radial-gradient(shape, startcolor, endcolor);

The shape can be circle or eclipse.

<style>
	#radial-center {
	/* fallback */
	background-color: #2F2727;
	background-image: url(images/radial_bg.png);
	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));
	/* Safari 5.1+, Chrome 10+ */
	background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
	/* Firefox 3.6+ */
	background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
	/* IE 10 */
	background: -ms-radial-gradient(circle, #1a82f7, #2F2727);
	}
</style>
 ColorZilla Gradient Builder

Here is a helpful tool for creating more complex gradients. (This does not work in Opera.)

http://www.colorzilla.com/gradient-editor/