Design tohoto webu jsem proměnila do následující palety barev vygenerované pomocí W3.CSS Color Themes. Za základní barvu jsem zvolila #673ab7, což je jedna z nabízených palet (themes) w3-deep-purple.
Deep Purple #673ab7, hsl(262, 52%, 47%) + opozitní o 180°
Deep Purple #673ab7, hsl(262, 52%, 47%) | Zelená opozitní #89b73a, hsl(82, 52%, 47%) |
---|---|
#f9f9f3 w3-theme-l5 |
#f8fbf3 w3-theme-l5 |
#e0d6f2 w3-theme-l4 |
#e8f2d6 w3-theme-l4 |
#c1ade5 w3-theme-l3 |
#d0e5ad w3-theme-l3 |
#a384d8 w3-theme-l2 |
#b9d884 w3-theme-l2 |
#845bcb w3-theme-l1 |
#a2cb5b w3-theme-l1 |
#673ab7 w3-theme |
#89b73a w3-theme |
#5d34a4 w3-theme-d1 |
#7ba434 w3-theme-d1 |
#532e92 w3-theme-d2 |
#6d922e w3-theme-d2 |
#482880 w3-theme-d3 |
#608028 w3-theme-d3 |
#3e236d w3-theme-d4 |
#526d23 w3-theme-d4 |
#341d5b w3-theme-d5 |
#445b1d w3-theme-d5 |
Vygenerované CSS #673ab7
.w3-theme-l5 {color:#000 !important; background-color:#f6f3fb !important} .w3-theme-l4 {color:#000 !important; background-color:#e0d6f2 !important} .w3-theme-l3 {color:#000 !important; background-color:#c1ade5 !important} .w3-theme-l2 {color:#fff !important; background-color:#a384d8 !important} .w3-theme-l1 {color:#fff !important; background-color:#845bcb !important} .w3-theme-d1 {color:#fff !important; background-color:#5d34a4 !important} .w3-theme-d2 {color:#fff !important; background-color:#532e92 !important} .w3-theme-d3 {color:#fff !important; background-color:#482880 !important} .w3-theme-d4 {color:#fff !important; background-color:#3e236d !important} .w3-theme-d5 {color:#fff !important; background-color:#341d5b !important} .w3-theme-light {color:#000 !important; background-color:#f6f3fb !important} .w3-theme-dark {color:#fff !important; background-color:#341d5b !important} .w3-theme-action {color:#fff !important; background-color:#341d5b !important} .w3-theme {color:#fff !important; background-color:#673ab7 !important} .w3-text-theme {color:#673ab7 !important} .w3-border-theme {border-color:#673ab7 !important} .w3-hover-theme:hover {color:#fff !important; background-color:#673ab7 !important} .w3-hover-text-theme {color:#673ab7 !important} .w3-hover-border-theme:hover {border-color:#673ab7 !important}
Vygenerované CSS #89b73a
.w3-theme-l5 {color:#000 !important; background-color:#f8fbf3 !important} .w3-theme-l4 {color:#000 !important; background-color:#e8f2d6 !important} .w3-theme-l3 {color:#000 !important; background-color:#d0e5ad !important} .w3-theme-l2 {color:#000 !important; background-color:#b9d884 !important} .w3-theme-l1 {color:#000 !important; background-color:#a2cb5b !important} .w3-theme-d1 {color:#fff !important; background-color:#7ba434 !important} .w3-theme-d2 {color:#fff !important; background-color:#6d922e !important} .w3-theme-d3 {color:#fff !important; background-color:#608028 !important} .w3-theme-d4 {color:#fff !important; background-color:#526d23 !important} .w3-theme-d5 {color:#fff !important; background-color:#445b1d !important} .w3-theme-light {color:#000 !important; background-color:#f8fbf3 !important} .w3-theme-dark {color:#fff !important; background-color:#445b1d !important} .w3-theme-action {color:#fff !important; background-color:#445b1d !important} .w3-theme {color:#fff !important; background-color:#89b73a !important} .w3-text-theme {color:#89b73a !important} .w3-border-theme {border-color:#89b73a !important} .w3-hover-theme:hover {color:#fff !important; background-color:#89b73a !important} .w3-hover-text-theme {color:#89b73a !important} .w3-hover-border-theme:hover {border-color:#89b73a !important}