码农教程 - 一技在手,衣食无忧! tools

W3.CSS Color Generator

❮ Previous Next ❯

With this color generator you can create your own private themes.

Input a color in the yellow box below or select a color from colors of the year.

 

W3.CSS Themes Example

Cinque Terre

The Cinque Terre (five lands) is a portion of the Italian Riviera. The coastline with five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore is a UNESCO World Heritage Site.

Monterosso

Monterosso al Mare is located at the center of a small natural gulf, protected by a small artificial reef, in the Riviera of La Spezia. It is the northernmost village of the Cinque Terre.

Vernazza

Vernazza is another of the five towns in the Cinque Terre region. Vernazza is the fourth town heading north. It has no car traffic, and is one of the truest "fishing villages" on the Italian Riviera.

Created Theme

Theme In Use:

12:30

Movies

+
avatar

Frozen

The response to the animations was ridiculous.

Star Wars

People were excited for the new Star Wars movie.

avatar

The Avengers

A huge success for Marvel and Disney.

« »

Generated CSS:

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>

Try It Yourself »


❮ Previous Next ❯