Tutorials References Exercises Bootcamps Videos Menu
Sign Up Create Website Get Certified Upgrade

W3.CSS Color Generator

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 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 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:





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:

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:



.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}


Try It Yourself »