1 / 9

Color Names

Color Names. All standards-compliant browsers should handle these color names. These color names can be used with the CSS properties of color and background-color :. For other colors, it’s safest to use a numerical representation …. RGB Color.

allene
Télécharger la présentation

Color Names

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Color Names All standards-compliant browsers should handle these color names These color names can be used with the CSS properties of color and background-color: For other colors, it’s safest to use a numerical representation…

  2. RGB Color The human retina has three kinds of color-sensitive photoreceptors that were traditionally called red, green and blue cones Visible colors can be created by adding different amounts of the three primary colors, red, green and blue Color monitors display colors by adding different amounts of red, green and blue light RGB color components are usually defined on a scale from 0 to 255 Two ways to specify turquoise using rgb in CSS: color: rgb(64,224,208); color: rgb(25%,88%,82%); Over 16 million colors can be represented this way!

  3. Hexadecimal Notation Numbers in the range 0-255 are represented in base 16, using two “digits” that each have 16 values, drawn from 0..9, A..F decimal hexadecimal • Converting decimal to hexadecimal: • Left digit: divide by 16, convert quotient to 0..9,A..F • Right digit: convert remainder to 0..9,A..F • Converting hexadecimal to decimal: • Convert left digit to 0..15, multiply by 16 • Convert right digit to 0..15, add to (1) • Example: A716 16710 • A16 is 1010, 10*16 = 160 • 716 = 710 160+7 = 167 • Example: 20110 C916 • 201/16 = 1210 C16 • remainder is 910 916

  4. Hexadecimal Colors Using hexadecimal colors in CSS: blockquote { color: #9400D3; background-color: #E6E6FA; }

  5. Image Representation RGB color for each pixel is stored in 24 bits (3 bytes) How much memory is needed to store a 300x500 pixel image? 300 x 500 x 3 = 450,000 bytes (450 kB) • Large image files can take a long time to download! • Example: On a 300 kbps (300k bits per second) cable modem, a 450 kB image takes about 12 seconds to download • Solutions: • Downsample images to make them smaller (fewer pixels) • Compress the images, using “lossless” compression (no information is lost) or “lossy” compression (less important information is lost) techniques

  6. Indexed Color image image contents color palette • How large is a file that stores a 300x500 pixel indexed color image with 4 colors, and its color palette? • 300x500 pixels, with 2 bits per pixel (why?) • 300 x 500 x 2 = 300,000 bits • (2) 4 colors, with 24 bits per color • 4 x 24 = 96 bits •  ~37.5kB (compared to the 450kB uncompressed file!) 2 bits per pixel 24 bits per color

  7. Indexed Color • How large is a file that stores a 300x500 pixel indexed color image with 16 colors, and its color palette? • number of bits to store the image pixels: • (2) number of bits to store the color palette: • Total file size (in bytes): “bits per pixel” is also called the “bit depth” bit depth must be large enough to store all of the colors

  8. GIF Indexed Color The GIF file format is an indexed color format that allows 256 colors (out of a possible 16 million colors!) • Computing the file size for a GIF image, in bytes: • number of bytes to store the image pixels: (width * height * bit-depth) / 8 • (2) number of bytes to store the color palette: num_colors * 3 • (3) total number of bytes*: • (width * height * bit-depth) / 8 + 3 * num_colors • (4) divide by 1,000 or 1,000,000 to convert to kilobytes or megabytes *There’s also a small amount of fixed overhead for storing file type, dimensions, etc.

  9. Other Image Formats JPEG: wellesley.jpg - millions of colors, compressed, nice for photos, does not allow transparency PNG: cs110-logo.png - millions of colors, compressed, nice for line art and graphics, allows 8-bit transparency GIF: palette.gif - limited to 256 colors, nice for line art and graphics, allows 1-bit transparency, supports animation Generate all formats and compare with Fireworks! Never use BMP files!

More Related