Generatore colore W3.CSS
Con questo generatore di colori puoi creare i tuoi temi privati.
Inserisci un colore nella casella gialla sottostante o seleziona un colore dai colori dell'anno.
Esempio di temi W3.CSS
Cinque Terre
Le Cinque Terre (cinque terre) sono una porzione della Riviera Ligure. Il litorale con cinque borghi: Monterosso, Vernazza, Corniglia, Manarola e Riomaggiore è patrimonio mondiale dell'UNESCO.
Monterosso
Monterosso al Mare si trova al centro di un piccolo golfo naturale, protetto da un piccolo scoglio artificiale, nella Riviera della Spezia. È il paese più settentrionale delle Cinque Terre.
Vernazza
Vernazza è un altro dei cinque paesi delle Cinque Terre. Vernazza è il quarto paese in direzione nord. Non ha traffico automobilistico, ed è uno dei più veri "borghi di pescatori" della Riviera Ligure.
Created Theme
| #fefbf5 w3-theme-l5 |
| #fcf2dc w3-theme-l4 |
| #f9e6ba w3-theme-l3 |
| #f5d997 w3-theme-l2 |
| #f2cd75 w3-theme-l1 |
| #efc050 w3-theme |
| #ecb535 w3-theme-d1 |
| #e9ab18 w3-theme-d2 |
| #ce9613 w3-theme-d3 |
| #b08010 w3-theme-d4 |
| #936b0e w3-theme-d5 |
Theme In Use:
Movies
Frozen
The response to the animations was ridiculous.
Star Wars
People were excited for the new Star Wars movie.
The Avengers
A huge success for Marvel and Disney.
Generated CSS:
.w3-theme-l5 {color:#000 !important; background-color:#fefbf5 !important}
.w3-theme-l4 {color:#000 !important; background-color:#fcf2dc !important}
.w3-theme-l3 {color:#000 !important; background-color:#f9e6ba !important}
.w3-theme-l2 {color:#000 !important; background-color:#f5d997 !important}
.w3-theme-l1 {color:#000 !important; background-color:#f2cd75 !important}
.w3-theme-d1 {color:#000 !important; background-color:#ecb535 !important}
.w3-theme-d2 {color:#000 !important; background-color:#e9ab18 !important}
.w3-theme-d3 {color:#fff !important; background-color:#ce9613 !important}
.w3-theme-d4 {color:#fff !important; background-color:#b08010 !important}
.w3-theme-d5 {color:#fff !important; background-color:#936b0e !important}
.w3-theme-light {color:#000 !important; background-color:#fefbf5 !important}
.w3-theme-dark {color:#fff !important; background-color:#936b0e !important}
.w3-theme-action {color:#fff !important; background-color:#936b0e !important}
.w3-theme {color:#000 !important; background-color:#efc050 !important}
.w3-text-theme {color:#efc050 !important}
.w3-border-theme {border-color:#efc050 !important}
.w3-hover-theme:hover {color:#000 !important; background-color:#efc050 !important}
.w3-hover-text-theme:hover {color:#efc050 !important}
.w3-hover-border-theme:hover {border-color:#efc050 !important}
Private Themes
With W3.CSS, it is easy to customize an application with a private color theme.
You can link to a private theme in a <link> tag, or you can put the private theme in a <style> tag:
Example
<style>
.w3-theme
{color:#fff !important;background-color:#3f51b5 !important}
.w3-theme-light
{color:#000 !important;background-color:#e8eaf6 !important}
.w3-theme-dark
{color:#fff !important;background-color:#1a237e !important}
.w3-theme-l5
{color:#000 !important;background-color:#e8eaf6 !important}
.w3-theme-l4
{color:#000 !important;background-color:#c5cae9 !important}
.w3-theme-l3
{color:#000 !important;background-color:#9fa8da !important}
.w3-theme-l2
{color:#fff !important;background-color:#7986cb !important}
.w3-theme-l1
{color:#fff !important;background-color:#5c6bc0 !important}
.w3-theme-d1
{color:#fff !important;background-color:#3949ab !important}
.w3-theme-d2
{color:#fff !important;background-color:#303f9f !important}
.w3-theme-d3
{color:#fff !important;background-color:#283593 !important}
.w3-theme-d4
{color:#fff !important;background-color:#1a237e !important}
.w3-theme-action
{color:#fff !important;background-color:#311b92 !important}
.w3-text-theme
{color:#1a237e !important}
</style>