W3.CSS कलर जेनरेटर
इस रंग जनरेटर से आप अपनी निजी थीम बना सकते हैं।
नीचे दिए गए पीले बॉक्स में एक रंग दर्ज करें या वर्ष के रंगों में से एक रंग चुनें।
W3.CSS थीम्स उदाहरण
पांच भूमि
Cinque Terre (पांच भूमि) इतालवी रिवेरा का एक हिस्सा है। पांच गांवों के साथ समुद्र तट: मोंटेरोसो, वर्नाज़ा, कॉर्निग्लिया, मनारोला और रिओमागिओर यूनेस्को की विश्व धरोहर स्थल है।
मोंटेरोसो
मोंटेरोसो अल मारे ला स्पेज़िया के रिवेरा में एक छोटी सी कृत्रिम चट्टान द्वारा संरक्षित एक छोटी प्राकृतिक खाड़ी के केंद्र में स्थित है। यह सिंक टेरे का सबसे उत्तरी गांव है।
वर्नाज़ा
वर्नाज़ा Cinque Terre क्षेत्र के पाँच शहरों में से एक है। वर्नाज़ा उत्तर की ओर जाने वाला चौथा शहर है। इसमें कोई कार यातायात नहीं है, और यह इतालवी रिवेरा पर सबसे कठिन "मछली पकड़ने के गांवों" में से एक है।
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>