Generator Warna W3.CSS
Dengan generator warna ini Anda dapat membuat tema pribadi Anda sendiri.
Masukkan warna di kotak kuning di bawah ini atau pilih warna dari warna tahun ini.
Contoh Tema W3.CSS
Lima tanah
Cinque Terre (lima daratan) adalah bagian dari Riviera Italia. Garis pantai dengan lima desa: Monterosso, Vernazza, Corniglia, Manarola, dan Riomaggiore adalah Situs Warisan Dunia UNESCO.
Monterosso
Monterosso al Mare terletak di tengah teluk kecil alami, dilindungi oleh karang buatan kecil, di Riviera of La Spezia. Ini adalah desa paling utara dari Cinque Terre.
Vernazza
Vernazza adalah salah satu dari lima kota di wilayah Cinque Terre. Vernazza adalah kota keempat menuju utara. Tidak ada lalu lintas mobil, dan merupakan salah satu "desa nelayan" yang paling benar di Riviera Italia.
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>