Activity 1a: Creating Color Palettes Using The Color Wheel

Open up Color Scheme Designer. The URL is http://colorschemedesigner.com Experiment with the different schemes (mono, complimentary etc). Move the hues around by dragging the spots on the color wheel.

Adjust saturation, brightness and/or contrast after selecting the ‘Adjust Scheme’ tab. When you have a color scheme that you like, export it to HTML + CSS after selecting the ‘Scheme Info’ Tab. Obtain -

a) Print screen of the exported page

The CSS code of the page (Hint‐ View the source of the HTML page)

.primary-1 { background-color: #3562A1 }
.primary-2 { background-color: #3C5579 }
.primary-3 { background-color: #113669 }
.primary-4 { background-color: #6995D1 }
.primary-5 { background-color: #86A5D1 }

/* end */

body {
   margin:0; padding: 2em;
   background:white;
   color: #666;
   font: 75%/1.33 Verdana, sans-serif;
   text-align:left;
   }
h1 {
   margin: 0.5em 0;
   font-size: 200%;
   }
p {
   margin: 0.5em 0;
   }

.color-table {
   margin: 2em 2em 5em;
   border-collapse:collapse;
   border:none;
   border-spacing:0;
   font-size:100%;
   }
.color-table th {
   padding: 0 1em 0;
   text-align:right;
   vertical-align: middle;
   font-size:110%;
   border: none;
   }
.color-table td.sample {
   width:8em; height:8em;
   padding: 10px;
   text-align:center;
   vertical-align:middle;
   font-size:90%;
   border: 1px solid white;
   }
.color-table .white { color:white }
.color-table .black { color:black }

hr {
   border:none;
   border-bottom:1px solid silver;
   }
#footer {
   padding:1em;
   text-align:center;
   font-size:80%;
   }

At the bottom right you will find a drop down box titled ‘Simulate color vision deficiency:’ Select some of the various forms to see what the colors would appear like to a person with that particular form of color blindness.

Open up the Adobe Kuler tool at http://kuler.adobe.com/#create/fromacolor
Again, experiment with the various schemes (called rules in Kuler) and try dragging the spots on the color wheel around.

When you have created a palette that you like and obtain a print screen