W3.CSS Color Themes
Created Theme
Theme In Use:
☰ 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.
Generated CSS:
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.
Color Themes
With W3.CSS, it is easy to customize your applications with your own color themes.
Example
<!DOCTYPE html>
<html>
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet"
href="/lib/w3-theme-indigo.css">
Predefined Themes
In HTML applications, you can limit the use of colors by choosing different hues from predefined colors:
| w3-red | Try it |
| w3-pink | Try it |
| w3-purple | Try it |
| w3-deep-purple | Try it |
| w3-indigo | Try it |
| w3-blue | Try it |
| w3-light-blue | Try it |
| w3-cyan | Try it |
| w3-teal | Try it |
| w3-green | Try it |
| w3-light-green | Try it |
| w3-lime | Try it |
| w3-khaki | Try it |
| w3-yellow | Try it |
| w3-amber | Try it |
| w3-orange | Try it |
| w3-deep-orange | Try it |
| w3-blue-grey | Try it |
| w3-brown | Try it |
| w3-grey | Try it |
| w3-dark-grey | Try it |
| w3-black | Try it |
| w3-w3schools | Try it |
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
Private Themes
With W3.CSS, it is easy to customize an applications 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%)}
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 |
