Color for the Web: Using CSS for Color Presentation

Text

#box {color: #57BAA8;}

Backgrounds

#box {background-color: #57BAA8;}

Borders

#box {border: solid 1px #57BAA8;}

Text Shadow

#box {text-shadow: 2px 2px 2px #57BAA8;}

Box Shadow

#box {-moz-box-shadow: 2px 2px 4px #57BAA8;
-webkit-box-shadow: 2px 2px 4px #57BAA8;
box-shadow: 2px 2px 4px #57BAA8;}

Color Transparency

#box {background-color: rgba(87, 186, 168, .7)}

#box {color: rgba(87, 186, 168, .7)}

#box {border: solid 10px rgba(87, 186, 168, .7)}

CSS3 Generator

Color-Finding Resources

  1. Photoshop color picker
  2. Dreamweaver color picker (a poor choice because it it hard to use)
  3. Colorzilla – a Firefox browser plugin which allows you to “eyedrop” any color in your browser window; it will retunr both the RGB and hexadecimal color formulas
  4. ColorPicker.com – online color picker similar to Photoshop’s
  5. HTML Color Names
  6. COLOURLovers – find an harmonious color palette, pattern, or single color

Graphics for the Web

GIF vs. JPG vs. PNG

Characteristics GIF JPEG PNG-8 PNG-24
Acronym for… Graphics Interchange Format Joint Photographic Experts Group Portable Network Graphics
Basic Image Format Bitmap
Color Support 8 bits per pixel(not 8 bits perchannel), so only256 possible colors for a given file Allows 16.8 million colors per file 256 colors per file 16.8 million colors per file
Compression Lossless (no artifacting) Lossy (artifacting) Lossless (no artifacting)
Ideal for… Simple graphics Photographs and complex graphics Simple graphics Photographs and complex graphics
Not ideal for… Photographs Simple graphics Photographs N/A
Transparency Support Yes, but not alpha transparency No Yes, but not alpha transparency Allows alpha transparency in PNG-32 (which is what you get in Photoshop for “PNG-24″ if you select Transparent)
Animation Support Yes No No No
Browser Support All All All modern browsers (including IE 7 and above)
File Extension .gif .jpg or .jpeg .png
Sample Ideal Images

Any

Sample of Artifacting

Logo saved as a JPG:
OH logo
OH logo

Same logo saved as a GIF:

logo
OH logo

Finally, saved as a PNG-24:

logo

Save for Web

The two big factors in web imagery are quality and file size. Image quality affects user experience. File size affects download time. Ideally, you will use only great-looking, small-file-size images for the majority of your web work. The process of balancing these two factors to create a web-ready image is called optimization.

Using Photoshop, you have a fairly easy way to save images for the web. If you take a moment, and use your knowledge of GIFs, JPGs, and PNGs, your result can be a highly-quality image at a reasonable file size.

To access Photoshop’s web image capability, go to File > Save for Web.

  • In the Save for Web window, you can:
  • Zoom in or out to see various details in your image.
  • Compare up to 3 versions of the optimized image against the original.
  • Resize the image.
  • Control the quality and/or color palette of the optimized image.
  • View the resulting file size.
  • Set the Matte color to match a destination background color for images with transparency.
  • Experiment with various file types and qualities.

Matting

When working with transparency, it’s important to consider the background color upon which the image will sit. On edges which are not perfectly straight up or down, Photoshop smooths out the jagged look of whole-pixel colors by usingdithering. Dithering is a way of blending one color into another by using a small band of pixels between the two which provide a gentle transition.
dithering

 

Photoshop defaults to a Matte color of white. However, if you leave the Matte color as white but your background will be another color, the results look pretty bad. Make sure to find out what the background color will be, then dial it in for the Matte swatch in Save for Web.
matte

Save for Web Exercise

Right-click on each of the three images below to download the source files to your flash drive. Then try to get the highest quality web image while keeping it within the restraints indicated below.

Image Download Desired Width Maximum File Size Additional Requirements
lemur-sm 400px 50KB
stewie-sm 200px 10KB Maintain transparent background.
Destination background color: match the blue highlight on his laser gun
tv-sm 150px 12KB White background

When you are finished ZIP up all the optimized image files, and rename the ZIP file saveforweb.zip.

Further Study at Home

Article

The Code Side Of Color from Smashing Magazine, October 2012

The Traditional Color Wheel

The traditional color wheel is used for paints and other pigments.

traditional color wheel
PRIMARY COLORS IN THE TRADITIONAL COLOR WHEEL:
red
blue
yellow
SECONDARY COLORS: TWO PRIMARIES MIXED TOGETHER
orange (red and yellow mixed)
violet (blue and red mixed)
green (yellow and blue mixed)
TERTIARY COLORS: A PRIMARY PLUS A NEIGHBORING SECONDARY
yellow-orange
red-orange
red-violet
blue-violet
blue-green
yellow-green

The RGB Color Wheel

The RGB color wheel is based on the way colors are mixed in light, and therefore on a monitor screen.

RGB Color Wheel
PRIMARY COLORS IN RGB:
red
green
blue
SECONDARY COLORS (CMY):
cyan (green and blue mixed)
magenta (blue and red mixed)
yellow (green and red mixed)

CMYK and RGB: Subtractive vs. Additive Color Models

CMYK stands for Cyan, Magenta, Yellow and Key color (which is black). CMYK is the color model used for printing presses. It is based on the chemistry of mixing translucent printing inks rather than paint. It is called subtractive because if you mix the three primary colors (cyan, magenta and yellow) together, you get black (in theory; in reality you need to added pure black ink to get real black.)

RGB stands for Red, Green, Blue. It is based on the way the light mixes on a computer screen. It is called an additivecolor model because if you add the three primaries (red, green and blue) together, you get pure white light.

CMYK   and RGB

Hexadecimal Color

HOW HEXADECIMAL IS CALCULATED
  • subdivided pixelspixels are subdivided into 3 vertical parts: one for red, one for green, and one for blue
  • the pixel’s “color” is created by the varying amounts of light coming out of those 3 sub-pixels
  • we typically count in “base-10″
TO UNDERSTAND HEXADECIMAL, WE START WITH BINARY CODE
  • binary (“base-2″) describes whether an electrical connection is “on” (1) or “off” (0)
  • a bit is a single record of “on” or “off” (that is, a single digit)
  • one byte equals 8 bits
  • each half-byte has 16 possibilities (24)
  • a complete byte = 162 = 256 possibilities
  • 256 possible values each for red, green and blue
  • color can be described using RBG notation, like this for white: rbg(255, 255, 255)
WE CAN WRITE HEXADECIMAL WITH FEWER CHARACTERS
  • hexadecimal (“base-16″) counting starts at 0, switches to letters after 9, and stops at f: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
  • this gives us 16 possible values for a single digit
  • each digit represents one half-byte of information
  • each pair represents a byte (or 8 bits): the first 2 characters are red, next 2 for green, last 2 for blue: ffffff
  • this explains the term “8 bits per channel”
  • lowest value (00) means no color value at all, or black
  • highest value (ff) means full brightness (pure color or white)
  • 2563 = 16,777,216 possible color values
  • color can therefore also be described using hex notation, like this for white: #ffffff
  • how hexadecimal color shorthand works (shortening 6 digits to only 3): the two R values must be the same as each other, the two G values must be the same as each other, AND the two B values must be the same as each other:
    • #000000 can be shortened to #000
    • #ff0000 can be shortened to #f00
    • #44dd99 can be shortened to #4d9
    • #60ee33 cannot be shortened
HEXADECIMAL COLOR WHEEL

Click for a larger image:

Hexadecimal Color Wheel

The color wheel above shows three primary colors (red, green and blue) and three secondary colors (yellow, cyan and magenta). This color mode is just like in the RGB Color Wheel, but the colors here are identified with a different code – hexadecimal. The hexadecimal code always starts with a pound (#) sign in CSS coding.

You will also find a field for hexadecimal values in the Color Pickers for Photoshop and Illustrator.

Further Reducing File Size

There are a handful of free tools online that will further reduce your image file size, without destroying quality. Do this after already having optimized in Photoshop:

HTML Images

You already know the basics of inserting an image into your HTML:

<img src=”images/picture.jpg” alt=”My Picture description”>

Sometimes you will see width and height attributes added as well:

<img src=”images/picture.jpg” alt=”My Picture description” width=”200px” height=”50px”>

Some notes about this practice:

  • It is not necessary to use these attributes.
  • However, sometimes designers include these so that the layout know how much space an image is going to occupy before the image has fully loaded. This prevents the layout from jumping around as the page loads.
  • These attributes can be used to resize the image in the browser. This is generally a bad idea, because the image may be shown very small but in fact is a huge file size that still needs to download first. This can take a lot of time, and bandwidth/data allocation on mobile.
  • Sometimes, designers deal with high-resolution (such as “retina”) mobile devices by reducing the quality of a JPG way down to 30% while keeping the image dimensions large. Then they resize it down in the HTML. This keeps the file size low but presents better image quality on high-resolution screens.
  • There’s a whole lot more to image sizing and quality for responsive web design that we won’t get into in this class (but do in later web coding classes).

CSS Images

CSS has two basic ways of incorporating images into your design: as backgrounds and as bullets.

Here are two example CSS rules:

Background

body {
background-image: url(images/background.gif);
}

Bullet

ul li {
list-style-image: url(images/bullet.gif);
}

If you really want to go crazy with it, you can even create graphics using only CSS and HTML.