Activity 1a: Creating Color Palettes Using The Color Wheel

Open up Color Scheme Designer. The URL is 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;
    color: #666;
    font: 75%/1.33 Verdana, sans-serif;
h1 {
    margin: 0.5em 0;
    font-size: 200%;
p {
    margin: 0.5em 0;

.color-table {
    margin: 2em 2em 5em;
.color-table th {
    padding: 0 1em 0;
    vertical-align: middle;
    border: none;
.color-table td.sample {
    width:8em; height:8em;
    padding: 10px;
    border: 1px solid white;
.color-table .white { color:white }
.color-table .black { color:black }

hr {
    border-bottom:1px solid silver;
#footer {

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
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