ตัวสร้าง สี W3.CSS
ด้วยเครื่องมือสร้างสีนี้ คุณสามารถสร้างธีมส่วนตัวของคุณเองได้
ป้อนสีในกล่องสีเหลืองด้านล่างหรือเลือกสีจากสีประจำปี
ตัวอย่างธีม W3.CSS
ห้าแผ่นดิน
Cinque Terre (ห้าดินแดน) เป็นส่วนหนึ่งของ Italian Riviera ชายฝั่งทะเลที่มีหมู่บ้าน 5 แห่ง ได้แก่ Monterosso, Vernazza, Corniglia, Manarola และ Riomaggiore เป็นมรดกโลกขององค์การยูเนสโก
มอนเตรอสโซ
Monterosso al Mare ตั้งอยู่ที่ศูนย์กลางของอ่าวธรรมชาติขนาดเล็กซึ่งได้รับการคุ้มครองโดยแนวปะการังเทียมขนาดเล็กใน Riviera of La Spezia เป็นหมู่บ้านที่อยู่เหนือสุดของ Cinque Terre
แวร์นาซซา
Vernazza เป็นอีกเมืองหนึ่งในห้าเมืองในภูมิภาค Cinque Terre Vernazza เป็นเมืองที่สี่ที่มุ่งหน้าไปทางเหนือ ไม่มีรถสัญจรไปมา และเป็นหนึ่งใน "หมู่บ้านชาวประมง" ที่แท้จริงที่สุดในอิตาเลียน ริเวียร่า
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>