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.

---

---

---

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:

createTheme(-1)

function huePlus(amount) {
var x,y;
x = document.getElementById("color").value;
y = w3color(x).toHsl();
y.h = y.h + amount;
if (y.h 0.98) {y.s = 100;}
if (y.s < 0.02) {y.s = 0.01;}
document.getElementById("color").value = w3color("hsl(" + y.h + "," + y.s + "," + y.l + ")").toHexString();
createTheme(-1);
}
function createSuggestion() {
document.getElementById("color").value = document.getElementById("select01").value;
createTheme(-1);
}
function createTheme(inVar) {
var theme1 = new Object;
var i,c,h,s,l,b,v;
var x, y, z, txt, sat, light, hex, col, ele;
var y = document.getElementById("color").value;

x = w3color(y).toHsl();

document.getElementById("hue").value = x.h.toFixed(0);
document.getElementById("saturation").value = x.s.toFixed(2);
document.getElementById("color").value = w3color(y).toHexString();

x = w3color(y).toHsl();
sat = x.s;
light = x.l;

x.l= light + ((1.0-light)/5) * 4.7
hex = w3color("hsl(" + x.h + "," + sat + "," + x.l + ")").toHexString();
z = document.getElementById("t1l5");
z.style.backgroundColor = hex;
z.innerHTML = hex + " w3-theme-l5";
theme1.l5 = hex;
col = "#000";
if (w3color(hex).isDark(165)) {col = "#fff"};
z.style.color = col;
theme1.tl5 = col;

x.l= light + ((1.0-light)/5) * 4
hex = w3color("hsl(" + x.h + "," + sat + "," + x.l + ")").toHexString();
z = document.getElementById("t1l4");
z.style.backgroundColor = hex;
z.innerHTML = hex + " w3-theme-l4";
theme1.l4 = hex;
col = "#000";
if (w3color(hex).isDark(165)) {col = "#fff"};
z.style.color = col;
theme1.tl4 = col;

x.l= light + ((1.0-light)/5) * 3
hex = w3color("hsl(" + x.h + "," + sat + "," + x.l + ")").toHexString();
z = document.getElementById("t1l3");
z.style.backgroundColor = hex;
z.innerHTML = hex + " w3-theme-l3";
theme1.l3 = hex;
col = "#000";
if (w3color(hex).isDark(165)) {col = "#fff"};
z.style.color = col;
theme1.tl3 = col;

x.l= light + ((1.0-light)/5) * 2
hex = w3color("hsl(" + x.h + "," + sat + "," + x.l + ")").toHexString();
z = document.getElementById("t1l2");
z.style.backgroundColor = hex;
z.innerHTML = hex + " w3-theme-l2";
theme1.l2 = hex;
col = "#000";
if (w3color(hex).isDark(165)) {col = "#fff"};
z.style.color = col;
theme1.tl2 = col;

x.l= light + ((1.0-light)/5) * 1
hex = w3color("hsl(" + x.h + "," + sat + "," + x.l + ")").toHexString();
z = document.getElementById("t1l1");
z.style.backgroundColor = hex;
z.innerHTML = hex + " w3-theme-l1";
theme1.l1 = hex;
col = "#000";
if (w3color(hex).isDark(165)) {col = "#fff"};
z.style.color = col;

theme1.tl1 = col;
x.l= light
hex = w3color(y).toHexString();
z = document.getElementById("t1d0");
z.style.backgroundColor = hex;
z.innerHTML = hex + " w3-theme";
theme1.d0 = hex;
col = "#000";
if (w3color(hex).isDark(165)) {col = "#fff"};
z.style.color = col;
theme1.td0 = col;

x.l= light - ((light)/5) * 0.5
hex = w3color("hsl(" + x.h + "," + x.s + "," + x.l + ")").toHexString();
z = document.getElementById("t1d1");
z.style.backgroundColor = hex;
z.innerHTML = hex + " w3-theme-d1";
theme1.d1 = hex;
col = "#000";
if (w3color(hex).isDark(165)) {col = "#fff"};
z.style.color = col;
theme1.td1 = col;

x.l= light - ((light)/5) * 1
hex = w3color("hsl(" + x.h + "," + x.s + "," + x.l + ")").toHexString();
z = document.getElementById("t1d2");
z.style.backgroundColor = hex;
z.innerHTML = hex + " w3-theme-d2";
theme1.d2 = hex;
col = "#000";
if (w3color(hex).isDark(165)) {col = "#fff"};
z.style.color = col;
theme1.td2 = col;

x.l= light - ((light)/5) * 1.5
hex = w3color("hsl(" + x.h + "," + x.s + "," + x.l + ")").toHexString();
z = document.getElementById("t1d3");
z.style.backgroundColor = hex;
z.innerHTML = hex + " w3-theme-d3";
theme1.d3 = hex;
col = "#000";
if (w3color(hex).isDark(165)) {col = "#fff"};
z.style.color = col;
theme1.td3 = col;

x.l= light - ((light)/5) * 2;
hex = w3color("hsl(" + x.h + "," + x.s + "," + x.l + ")").toHexString();
z = document.getElementById("t1d4");
z.style.backgroundColor = hex;
z.innerHTML = hex + " w3-theme-d4";
theme1.d4 = hex;
col = "#000";
if (w3color(hex).isDark(165)) {col = "#fff"};
z.style.color = col;
theme1.td4 = col;

x.l= light - ((light)/5) * 2.5;
hex = w3color("hsl(" + x.h + "," + x.s + "," + x.l + ")").toHexString();
z = document.getElementById("t1d5");
z.style.backgroundColor = hex;
z.innerHTML = hex + " w3-theme-d5";
theme1.d5 = hex;
col = "#";
if (w3color(hex).isDark(165)) {col = "#fff"};
z.style.color = col;
theme1.td5 = col;

txt = ".w3-theme-l5 {color:" + theme1.tl5 + " !important; background-color:" + theme1.l5 +" !important}
";
txt += ".w3-theme-l4 {color:" + theme1.tl4 + " !important; background-color:" + theme1.l4 +" !important}
";
txt += ".w3-theme-l3 {color:" + theme1.tl3 + " !important; background-color:" + theme1.l3 +" !important}
";
txt += ".w3-theme-l2 {color:" + theme1.tl2 + " !important; background-color:" + theme1.l2 +" !important}
";
txt += ".w3-theme-l1 {color:" + theme1.tl1 + " !important; background-color:" + theme1.l1 +" !important}
";
txt += ".w3-theme-d1 {color:" + theme1.td1 + " !important; background-color:" + theme1.d1 +" !important}
";
txt += ".w3-theme-d2 {color:" + theme1.td2 + " !important; background-color:" + theme1.d2 +" !important}
";
txt += ".w3-theme-d3 {color:" + theme1.td3 + " !important; background-color:" + theme1.d3 +" !important}
";
txt += ".w3-theme-d4 {color:" + theme1.td4 + " !important; background-color:" + theme1.d4 +" !important}
";
txt += ".w3-theme-d5 {color:" + theme1.td5 + " !important; background-color:" + theme1.d5 +" !important}

";

txt += ".w3-theme-light {color:" + theme1.tl5 + " !important; background-color:" + theme1.l5 +" !important}
";
txt += ".w3-theme-dark {color:" + theme1.td5 + " !important; background-color:" + theme1.d5 +" !important}
";
txt += ".w3-theme-action {color:" + theme1.td5 + " !important; background-color:" + theme1.d5 +" !important}

";

txt += ".w3-theme {color:" + theme1.td0 + " !important; background-color:" + theme1.d0 +" !important}
";
txt += ".w3-text-theme {color:" + theme1.d0 + " !important}
";
txt += ".w3-border-theme {border-color:" + theme1.d0 + " !important}

";

txt += ".w3-hover-theme:hover {color:" + theme1.td0 + " !important; background-color:" + theme1.d0 +" !important}
";
txt += ".w3-hover-text-theme:hover {color:" + theme1.d0 + " !important}
";
txt += ".w3-hover-border-theme:hover {border-color:" + theme1.d0 + " !important}
";

document.getElementById("css1").innerHTML = txt;

ele = document.getElementById("mt1-top")
ele.style.background = theme1.d3;
ele.style.color = theme1.td3;

ele = document.getElementById("mt1-header")
ele.style.background = theme1.d0;
ele.style.color = theme1.td0;

ele = document.getElementById("mt1-footer")
ele.style.background = theme1.d0;
ele.style.color = theme1.td0;

ele = document.getElementById("mt1-bottom")
ele.style.background = theme1.d5;
ele.style.color = theme1.td5;

ele = document.getElementById("mt1-action")
ele.style.background = theme1.d5;
ele.style.color = theme1.td5;

ele = document.getElementById("mt1-graphic")
ele.style.color = theme1.d0;

ele = document.getElementById("mt1-back")
ele.style.background = theme1.l5;

ele = document.getElementById("mt1-h1")
ele.style.color = theme1.d0
ele = document.getElementById("mt1-h2")
ele.style.color = theme1.d0
ele = document.getElementById("mt1-h3")
ele.style.color = theme1.d0

displayDemo(theme1);
}
function displayDemo(theme) {
document.getElementById("demo-h1").style.backgroundColor = theme.d2;
document.getElementById("demo-h1").style.color = theme.td2;
document.getElementById("demo-input").style.backgroundColor = theme.d1;
document.getElementById("demo-h2").style.backgroundColor = theme.d0;
document.getElementById("demo-h2").style.color = theme.td0;
document.getElementById("demo-footer").style.backgroundColor = theme.d2;
document.getElementById("demo-footer").style.color = theme.td2;
}