Sand Tray Experiments 02
Color Switching
I will take six of the color schemes from the gallery, and experiment with switching the colors in the associated CSS file.
First we have "Earth and Sky", the basis of this whole website.
I will then plan switches to the "Pink Panther" color scheme.
Colour Scheme 01 - "Earth and Sky"...........to Gallery Menu
Primary Colours |
| |
|
|
|
|
| #C08500 |
#846929 |
#6D4C00 |
#D19A1C |
#D1A032 |
Secondary Colour A |
| |
|
|
|
|
| #1E0584 |
#2B1F5B |
#10014B |
#361BA5 |
#442CA5 |
Secondary Colour B |
| |
|
|
|
|
| #024B7B |
#1B3E55 |
#002A45 |
#18699E |
#28709E |
Colour Scheme 11 - "Pink Panther"...........to Gallery Menu
Primary Colours |
| |
|
|
|
| #FF0099 |
#CC0099 |
#FF66CC |
#FF99CC |
Secondary Colour A |
| |
|
|
| #FF6600 |
#FF9966 |
#FFCC99 |
Secondary Colour B |
| |
|
|
| #3300CC |
#6666FF |
#9999FF |
Complimentary Colour |
| |
|
|
|
| #CCFF00 |
#99CC00 |
#CCFF00 |
#FFFF99 |
Colors Used from "Earth and Sky" in website column "cs1":
Colors Used from "Pink Panther" in website column "cs2":
Colors Used from "Olive Tree" in website column "cs3":
| element |
cs1 |
cs2 |
cs3 |
cs4 |
cs5 |
cs6 |
| body{background} |
#6D4C00 |
#000000 |
|
|
|
|
| |
|
|
|
|
|
|
| body{color} |
#000000 |
#FF0099 |
|
|
|
|
| |
|
|
|
|
|
|
| container{background} |
#1E0584 |
#FF66CC |
|
|
|
|
| |
|
|
|
|
|
|
| container{border} |
#28709E |
#99CC00 |
|
|
|
|
| |
|
|
|
|
|
|
| header{background} |
#10014B |
|
|
|
|
|
| |
|
|
|
|
|
|
| header{border} |
#28709E |
#99CC00 |
|
|
|
|
| |
|
|
|
|
|
|
| header{color} |
#D19A1C |
|
|
|
|
|
| |
|
|
|
|
|
|
| sidebar1{background} |
#D19A1C |
#FF9966 |
|
|
|
|
| |
|
|
|
|
|
|
| sidebar1{color} |
#D19A1C |
#3300CC |
|
|
|
|
| |
|
|
|
|
|
|
| sidebar1{border} |
#28709E |
#99CC00 |
|
|
|
|
| |
|
|
|
|
|
|
| sidebar1 a:link {color} |
#442CA5 |
|
|
|
|
|
| |
|
|
|
|
|
|
| sidebar1 a:visited {color} |
#6D4C00 |
#CCFF00 |
|
|
|
|
| |
|
|
|
|
|
|
| sidebar1 a:hover {color} |
#10014B |
|
|
|
|
|
| |
|
|
|
|
|
|
| sidebar1 a:hover {background} |
|
#9999FF |
|
|
|
|
| |
|
|
|
|
|
|
| sidebar1 a:hover {color} |
#10014B |
|
|
|
|
|
| |
|
|
|
|
|
|
| sidebar1 a:active {color} |
#002A45 |
|
|
|
|
|
| |
|
|
|
|
|
|
| sidebar1 a:active {background} |
#18699E |
|
|
|
|
|
| |
|
|
|
|
|
|
| mainContent {border} |
#28709E |
|
|
|
|
|
| |
|
|
|
|
|
|
| mainContent{color} |
#D19A1C |
#3300CC |
|
|
|
|
| |
|
|
|
|
|
|
| mainContent a{color} |
#28709E |
#6666FF |
|
|
|
|
| |
|
|
|
|
|
|
| span.css {color} |
red |
red |
|
|
|
|
| |
|
|
|
|
|
|
| a.ref.link {color} |
|
|
|
|
|
|
| |
|
|
|
|
|
|
| footer {background} |
#10014B |
#FFFF99 |
|
|
|
|
| |
|
|
|
|
|
|
| footer {border} |
#28709E |
#99CC00 |
|
|
|
|
| |
|
|
|
|
|
|
| footer p{color} |
#28709E |
#FF0099 |
|
|
|
|
| |
|
|
|
|
|
|
