W3.CSS Color Themes

Toggle navigation
TUTORIAL HOME
W3.CSS Color Themes
❮ Previous Next ❯
Color Themes
With W3.CSS, it is easy to customize your applications with color themes.

Movies 2014
Frozen

The response to the animations was ridiculous

The Fault in Our Stars

Touching, gripping and genuinely well made

The Avengers

A huge success for Marvel and Disney

«»
Movies 2014
Frozen

The response to the animations was ridiculous

The Fault in Our Stars

Touching, gripping and genuinely well made

The Avengers

A huge success for Marvel and Disney

«»
All you have to do is add a link to a predefined (or home made) theme:

Example
<link rel="stylesheet" href="https://www.Omegas.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.Omegas.com/lib/w3-theme-indigo.css">
»

Predefined Themes
These are the predefined themes in W3.CSS:

w3-theme-red Try it
w3-theme-pink Try it
w3-theme-purple Try it
w3-theme-deep-purple Try it
w3-theme-indigo Try it
w3-theme-blue Try it
w3-theme-light-blue Try it
w3-theme-cyan Try it
w3-theme-teal Try it
w3-theme-green Try it
w3-theme-light-green Try it
w3-theme-lime Try it
w3-theme-khaki Try it
w3-theme-yellow Try it
w3-theme-amber Try it
w3-theme-orange Try it
w3-theme-deep-orange Try it
w3-theme-blue-grey Try it
w3-theme-brown Try it
w3-theme-grey Try it
w3-theme-dark-grey Try it
w3-theme-black Try it
w3-theme-Omegas Try it
Private Themes
Below you can create your own private themes.

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


#efc050
Create Theme


0
Hue - Hue +

0
Sat - Sat +
Created Theme
Theme In Use:
12:30
Movies
+
Frozen
The response to the animations was ridiculous.

Star Wars
People were exited for the new Star Wars movie.

The Avengers
A huge success for Marvel and Disney.

Omegas 2016

«»
Generated CSS:

 

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.

HTML Tutorial
CSS Tutorial
JavaScript Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
HTML Reference
CSS Reference
JavaScript Reference
W3.CSS Reference
Browser Statistics
HTML Examples
CSS Examples
JavaScript Examples
W3.CSS Examples
HTML DOM Examples
Footer
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>
»

Adding Gradients
One reader sent us this suggestion: You might want to consider adding a gradient for each theme.

I used the l2 and l1 colors from the blue theme to create this gradient:

Example
.w3-theme-gradient {
  color: #000 !important;
  background:-webkit-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-moz-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-o-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-ms-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background: linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
»

Downloadable Color Themes
Here are some downloadable color themes inspired by Google's Material Design:

Style Sheet Description
w3-theme-amber.css Color Theme Amber
w3-theme-black.css Color Theme Black
w3-theme-blue.css Color Theme Blue
w3-theme-blue-grey.css Color Theme Blue Grey
w3-theme-brown.css Color Theme Brown
w3-theme-cyan.css Color Theme Cyan
w3-theme-dark-grey.css Color Theme Dark Grey
w3-theme-deep-orange.css Color Theme Deep Orange
w3-theme-deep-purple.css Color Theme Deep Purple
w3-theme-green.css Color Theme Green
w3-theme-grey.css Color Theme Grey
w3-theme-indigo.css Color Theme Indigo
w3-theme-khaki.css Color Theme Khaki
w3-theme-light-blue.css Color Theme Light Blue
w3-theme-light-green.css Color Theme Light Green
w3-theme-lime.css Color Theme Lime
w3-theme-orange.css Color Theme Orange
w3-theme-pink.css Color Theme Pink
w3-theme-purple.css Color Theme Purple
w3-theme-red.css Color Theme Red
w3-theme-teal.css Color Theme Teal
w3-theme-yellow.css Color Theme Yellow


❮ Previous Next ❯