Generador de color W3.CSS
Con este generador de colores puedes crear tus propios temas privados.
Ingrese un color en el cuadro amarillo a continuación o seleccione un color de los colores del año.
Ejemplo de temas W3.CSS
cinco tierras
Las Cinque Terre (cinco tierras) es una parte de la Riviera italiana. La costa con cinco pueblos: Monterosso, Vernazza, Corniglia, Manarola y Riomaggiore es Patrimonio de la Humanidad por la UNESCO.
Monterosso
Monterosso al Mare se encuentra en el centro de un pequeño golfo natural, protegido por un pequeño arrecife artificial, en la Riviera de La Spezia. Es el pueblo más septentrional de Cinque Terre.
Vernazza
Vernazza es otro de los cinco pueblos de la región de Cinque Terre. Vernazza es la cuarta ciudad que se dirige al norte. No tiene tráfico de automóviles y es uno de los "pueblos de pescadores" más auténticos de la Riviera italiana.
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>