Sand Tray Experiments 03
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 07 - "Olive Tree"...........to Gallery Menu
Primary Colours |
| |
|
|
|
| #999900 |
#666633 |
#333300 |
#CCCC33 |
Secondary Colour A |
| |
|
|
|
| #993300 |
#663333 |
#330000 |
#CC6633 |
Secondary Colour B |
| |
|
|
|
| #006666 |
#333333 |
#003333 |
#339999 |
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 |
#CCCC33 |
|
|
|
| |
|
|
|
|
|
|
| body{color} |
#000000 |
#FF0099 |
|
|
|
|
| |
|
|
|
|
|
|
| container{background} |
#1E0584 |
#FF66CC |
#FFFFFF |
|
|
|
| |
|
|
|
|
|
|
| container{border} |
#28709E |
#99CC00 |
#993300 |
|
|
|
| |
|
|
|
|
|
|
| header{background} |
#10014B |
|
|
|
|
|
| |
|
|
|
|
|
|
| header{border} |
#28709E |
#99CC00 |
#993300 |
|
|
|
| |
|
|
|
|
|
|
| header{color} |
#D19A1C |
|
|
|
|
|
| |
|
|
|
|
|
|
| sidebar1{background} |
#D19A1C |
#FF9966 |
#333300 |
|
|
|
| |
|
|
|
|
|
|
| sidebar1{color} |
#D19A1C |
#3300CC |
|
|
|
|
| |
|
|
|
|
|
|
| sidebar1 p{color} |
|
|
#993300 |
|
|
|
| |
|
|
|
|
|
|
| sidebar1 p{background} |
|
|
#999900 |
|
|
|
| |
|
|
|
|
|
|
| sidebar1{border} |
#28709E |
#99CC00 |
#993300 |
|
|
|
| |
|
|
|
|
|
|
| sidebar1 a:link {color} |
#442CA5 |
|
#FFFFFF |
|
|
|
| |
|
|
|
|
|
|
| sidebar1 a:visited {color} |
#6D4C00 |
#CCFF00 |
#FFFFFF |
|
|
|
| |
|
|
|
|
|
|
| sidebar1 a:hover {background} |
|
#9999FF |
#006666 |
|
|
|
| |
|
|
|
|
|
|
| sidebar1 a:hover {color} |
#10014B |
|
#FFFFFF |
|
|
|
| |
|
|
|
|
|
|
| sidebar1 a:active {color} |
#002A45 |
|
#FFFFFF |
|
|
|
| |
|
|
|
|
|
|
| sidebar1 a:active {background} |
#18699E |
|
|
|
|
|
| |
|
|
|
|
|
|
| mainContent {border} |
#28709E |
|
#993300 |
|
|
|
| |
|
|
|
|
|
|
| mainContent{color} |
#D19A1C |
#3300CC |
#333300 |
|
|
|
| |
|
|
|
|
|
|
| mainContent a{color} |
#28709E |
#6666FF |
#006666 |
|
|
|
| |
|
|
|
|
|
|
| span.css {color} |
red |
red |
red |
|
|
|
| |
|
|
|
|
|
|
| a.ref.link {color} |
|
|
|
|
|
|
| |
|
|
|
|
|
|
| footer {background} |
#10014B |
#FFFF99 |
#333300 |
|
|
|
| |
|
|
|
|
|
|
| footer {border} |
#28709E |
#99CC00 |
#993300 |
|
|
|
| |
|
|
|
|
|
|
| footer p{color} |
#28709E |
#FF0099 |
#FFFFFF |
|
|
|
| |
|
|
|
|
|
|
