HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

HTML color shades

Colors consist of a red, green, and blue element. But what happens when a color contains just a red element? or just a green or blue element? What about if a color consists of equal amounts of red, green, and blue?

This tutorial focuses on:

Red shades

You can create a bunch of red shades by setting the red part of a color to anything above zero, and the green and blue parts to 0.

Red shades
Shade Hex value RGB value
  #000000 rgb(0,0,0)
  #080000 rgb(8,0,0)
  #100000 rgb(16,0,0)
  #180000 rgb(24,0,0)
  #200000 rgb(32,0,0)
  #280000 rgb(40,0,0)
  #300000 rgb(48,0,0)
  #380000 rgb(56,0,0)
  #400000 rgb(64,0,0)
  #480000 rgb(72,0,0)
  #500000 rgb(80,0,0)
  #580000 rgb(88,0,0)
  #600000 rgb(96,0,0)
  #680000 rgb(104,0,0)
  #700000 rgb(112,0,0)
  #780000 rgb(120,0,0)
  #800000 rgb(128,0,0)
  #880000 rgb(136,0,0)
  #900000 rgb(144,0,0)
  #980000 rgb(152,0,0)
  #A00000 rgb(160,0,0)
  #A80000 rgb(168,0,0)
  #B00000 rgb(176,0,0)
  #B80000 rgb(184,0,0)
  #C00000 rgb(192,0,0)
  #C80000 rgb(200,0,0)
  #D00000 rgb(208,0,0)
  #D80000 rgb(216,0,0)
  #E00000 rgb(224,0,0)
  #E80000 rgb(232,0,0)
  #F00000 rgb(240,0,0)
  #F80000 rgb(248,0,0)
  #FF0000 rgb(255,0,0)

By keeping the blue and green parts of a color at 0, there are 256 red color possibilites. However, this is not the complete set of red shades you can produce. You can set the blue or green parts of a color to a number greater than 0 and still have shades of red, though it will not be a true red, but will be altered by blue and green.

<table border="1" cellpadding="5" width="90%"> <tr> <td bgcolor="#d62735">Red shades</td> <td bgcolor="#d30e0e">altered by</td> </tr> <tr> <td bgcolor="#870909">blue and green</td> <td bgcolor="#f73131">mixture</td> </tr> </table>
Output:
Red shades altered by
blue and green mixture

Green shades

You can create a bunch of green shades by setting the green part of a color to anything above zero, and the red and blue parts to 0.

Green shades
Shade Hex value RGB value
  #000000 rgb(0,0,0)
  #000800 rgb(0,8,0)
  #001000 rgb(0,16,0)
  #001800 rgb(0,24,0)
  #002000 rgb(0,32,0)
  #002800 rgb(0,40,0)
  #003000 rgb(0,48,0)
  #003800 rgb(0,56,0)
  #004000 rgb(0,64,0)
  #004800 rgb(0,72,0)
  #005000 rgb(0,80,0)
  #005800 rgb(0,88,0)
  #006000 rgb(0,96,0)
  #006800 rgb(0,104,0)
  #007000 rgb(0,112,0)
  #007800 rgb(0,120,0)
  #008000 rgb(0,128,0)
  #008800 rgb(0,136,0)
  #009000 rgb(0,144,0)
  #009800 rgb(0,152,0)
  #00A000 rgb(0,160,0)
  #00A800 rgb(0,168,0)
  #00B000 rgb(0,176,0)
  #00B800 rgb(0,184,0)
  #00C000 rgb(0,192,0)
  #00C800 rgb(0,200,0)
  #00D000 rgb(0,208,0)
  #00D800 rgb(0,216,0)
  #00E000 rgb(0,240)
  #00E800 rgb(0,232,0)
  #00F000 rgb(0,240,0)
  #00F800 rgb(0,248,0)
  #00FF00 rgb(0,255,0)

By keeping the blue and red parts of a color at 0, there are 256 green color possibilites. However, this is not the complete set of green shades you can produce. You can set the blue or red parts of a color to a number greater than 0 and still have shades of green, though it will not be a true green, but will be altered by blue and red.

<table border="1" cellpadding="5" width="90%"> <tr> <td bgcolor="#d62735">Greenshades</td> <td bgcolor="#d30e0e">altered by</td> </tr> <tr> <td bgcolor="#870909">blue and red</td> <td bgcolor="#f73131">mixture</td> </tr> </table>
Output:
Green shades altered by
blue and red mixture

Blue shades

You can create a bunch of blue shades by setting the blue part of a color to anything above zero, and the red and green parts to 0.

Blue shades
Shade Hex value RGB value
  #000000 rgb(0,0,0)
  #000008 rgb(0,0,8)
  #000010 rgb(0,0,16)
  #000018 rgb(0,0,24)
  #000020 rgb(0,0,32)
  #000028 rgb(0,0,40)
  #000030 rgb(0,0,48)
  #000038 rgb(0,0,56)
  #000040 rgb(0,0,64)
  #000048 rgb(0,0,72)
  #000050 rgb(0,0,80)
  #000058 rgb(0,0,88)
  #000060 rgb(0,0,96)
  #000068 rgb(0,0,104)
  #000070 rgb(0,0,112)
  #000078 rgb(0,0,120)
  #000080 rgb(0,0,128)
  #000088 rgb(0,0,136)
  #000090 rgb(0,0,144)
  #000098 rgb(0,0,152)
  #0000A0 rgb(0,0,160)
  #0000A8 rgb(0,0,168)
  #0000B0 rgb(0,0,176)
  #0000B8 rgb(0,0,184)
  #0000C0 rgb(0,0,192)
  #0000C8 rgb(0,0,200)
  #0000D0 rgb(0,0,208)
  #0000D8 rgb(0,0,216)
  #0000E0 rgb(0,0,240)
  #0000E8 rgb(0,0,232)
  #0000F0 rgb(0,0,240)
  #0000F8 rgb(0,0,248)
  #0000FF rgb(0,0,255)

By keeping the red and green parts of a color at 0, there are 256 blue color possibilites. However, this is not the complete set of blue shades you can produce. You can set the red or green parts of a color to a number greater than 0 and still have shades of blue, though it will not be a true blue, but will be altered by red and green.

<table border="1" cellpadding="5" width="90%"> <tr> <td bgcolor="#334980">Blue shades</td> <td bgcolor="#5274cc">altered by</td> </tr> <tr> <td bgcolor="#a3afcc">red and green</td> <td bgcolor="#494f6e">mixture</td> </tr> </table>
Output:
Blue shades altered by
red and green mixture

Equal amount of shades

What happens when you apply an equal amount of red, green, and blue? You get gray!

Gray shades
Shade Hex value RGB value
  RGB(0,0,0)  #000000 
  RGB(8,8,8)  #080808 
  RGB(16,16,16)  #101010 
  RGB(24,24,24)  #181818 
  RGB(32,32,32)  #202020 
  RGB(40,40,40)  #282828 
  RGB(48,48,48)  #303030 
  RGB(56,56,56)  #383838 
  RGB(64,64,64)  #404040 
  RGB(72,72,72)  #484848 
  RGB(80,80,80)  #505050 
  RGB(88,88,88)  #585858 
  RGB(96,96,96)  #606060 
  RGB(104,104,104)  #686868 
  RGB(112,112,112)  #707070 
  RGB(120,120,120)  #787878 
  RGB(128,128,128)  #808080 
  RGB(136,136,136)  #888888 
  RGB(144,144,144)  #909090 
  RGB(152,152,152)  #989898 
  RGB(160,160,160)  #A0A0A0 
  RGB(168,168,168)  #A8A8A8 
  RGB(176,176,176)  #B0B0B0 
  RGB(184,184,184)  #B8B8B8 
  RGB(192,192,192)  #C0C0C0 
  RGB(200,200,200)  #C8C8C8 
  RGB(208,208,208)  #D0D0D0 
  RGB(216,216,216)  #D8D8D8 
  RGB(224,224,224)  #E0E0E0 
  RGB(232,232,232)  #E8E8E8 
  RGB(240,240,240)  #F0F0F0 
  RGB(248,248,248)  #F8F8F8 
  RGB(255,255,255)  #FFFFFF 

By applying an equal amount of red, green, and blue to a color, there are 256 gray color possibilites. However, this is not the complete set of gray shades you can produce. You can set the red, green, and blue parts of a color to different values and still have shades of gray.

<table border="1" cellpadding="5" width="90%"> <tr> <td bgcolor="#babba8">Gray shades</td> <td bgcolor="#786b63">where the</td> </tr> <tr> <td bgcolor="#a09a8b">red, green, and blue</td> <td bgcolor="#8b8c85">parts are are a different value</td> </tr> </table>
Output:
Gray shades where the
red, green, and blue parts are a different value

Gradients

When it comes to color, sometimes you have more than one color to choose from and you don't know which one to choose. In such a scenario, sometimes you can choose more than one.

Have you ever seen one of those fading backgrounds some webpages have? You know, the one where it starts out as one color and changes through several different colors? Here is an example of this.

This type of fading color background is called a gradient and can add that extra dazzle to a webpage to make it more attractive. You can make your own gradients using Adobe Photoshop and many other image editing programs or online at the online gradient maker.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information