W3 Deep Purple paleta barev

Aktualizováno: 29. 11. 2020, datum vydání: 17. 8. 2016

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}

Další články