The background color of this page changes based on the time of day. At midnight, this page is pure blue. At 8am, it is pure red. At noon, yellow. At 4pm, green. You may come back at a different time of day to see the change, or you can temporary change the clock on your computer right now and reload the page.
There is a slightly different hue every four minutes, resulting in 360 hues found in common image editing programs like Photoshop and Illustrator.
The JavaScript that runs this also takes brightness and saturation into account, just like the HSB panel in Photoshop and Illustrator. A relatively simple formula from a less simple understanding of the workings of HSB allows the programmer to change the saturation and brightness level.
2 Feb 2008.
Really rough process pages; some mistakes in there. Mainly built one on top/after the other.
Here’s the code. Please link back here if you’re using it.
Put this JavaScript in the head tag.
var bri; //for brightness control. between 0 and 1.
var sat; //for saturation control. between 0 and 1.
sat=.45;
bri=.9;
function doIt(){
//
var date=new Date;
var hr = date.getHours();
var m = date.getMinutes();
//
//get total minutes
var totalMin=60*hr+m;
//
//divide by 4 to get a number between 0 and 360, the range of available hues on any particular brightness and saturation
var score=totalMin/4;
//
var red; // percentage of red. between 0 and 1, including 1.
var grn; // percentage of green. between 0 and 1, including 1.
var blu; // percentage of blue. between 0 and 1, including 1.
if (0%3C=score %26%26 score%3C60){
//for between 00:00 and 04:00. the red is increasing.
red=score/60;
grn=0;
blu=1;
} else if (60%3C=score %26%26 score%3C120){
//for between 04:00 and 08:00. the blue is decreasing.
red=1;
grn=0;
blu=1-((score-60)/60);
} else if (120%3C=score %26%26 score%3C180){
//for between 8:00 and 12:00. the green is increasing.
red=1;
grn=(score-120)/60;
blu=0;
} else if (180%3C=score %26%26 score%3C240){
//for between 12:00 and 16:00. the red is decreasing.
red=1-((score-180)/60);
grn=1;
blu=0;
} else if (240%3C=score %26%26 score%3C300){
// for between 16:00 and 20:00. the blue is increasing.
red=0;
grn=1;
blu=(score-240)/60;
} else if (300%3C=score %26%26 score%3C360){
//for between 20:00 and 24:00. the green is decreasing.
red=0;
grn=1-((score-300)/60);
blu=1;
}
//
var redPerc=red*sat+bri-bri*sat; // get total percentage of red to display on the scale. 0% as 00, 100% as FF
var grnPerc=grn*sat+bri-bri*sat; // get total percentage of green to display on the scale. 0% as 00, 100% as FF
var bluPerc=blu*sat+bri-bri*sat; // get total percentage of blue to display on the scale. 0% as 00, 100% as FF
//
redNum=redPerc*255; //prepares percentage for getting pre-hex value;
redNumA=Math.floor(redNum/16); //round down to get the first of the 2 pre-hex values in this channel;
redNumB=Math.round(redNum%16); //takes the remainder to get the second of the 2 pre-hex values in this channel.
grnNum=grnPerc*255; //prepares percentage for getting pre-hex value;
grnNumA=Math.floor(grnNum/16); //round down to get the first of the 2 pre-hex values in this channel;
grnNumB=Math.round(grnNum%16); //takes the remainder to get the second of the 2 pre-hex values in this channel.
bluNum=bluPerc*255; //prepares percentage for getting pre-hex value;
bluNumA=Math.floor(bluNum/16); //round down to get the first of the 2 pre-hex values in this channel;
bluNumB=Math.round(bluNum%16); //takes the remainder to get the second of the 2 pre-hex values in this channel.
//
//introduce variables for actual hex values
var redHexA;
var redHexB;
var grnHexA;
var grnHexB;
var bluHexA;
var bluHexA;
//if the ___NumA and ___NumB values are less than 10, keep them as numbers.
if (redNumA%3C10){redHexA=redNumA;}
if (grnNumA%3C10){grnHexA=grnNumA;}
if (bluNumA%3C10){bluHexA=bluNumA;}
if (redNumB%3C10){redHexB=redNumB;}
if (grnNumB%3C10){grnHexB=grnNumB;}
if (bluNumB%3C10){bluHexB=bluNumB;}
//if the ___NumA and ___NumB values are more than 9, convert them to letters.
///////////////////////////////redNumA
if (redNumA==10){redHexA="A";}
if (redNumA==11){redHexA="B";}
if (redNumA==12){redHexA="C";}
if (redNumA==13){redHexA="D";}
if (redNumA==14){redHexA="E";}
if (redNumA==15){redHexA="F";}
if (redNumA==16){redHexA="F";}
///////////////////////////////grnNumA
if (grnNumA==10){grnHexA="A";}
if (grnNumA==11){grnHexA="B";}
if (grnNumA==12){grnHexA="C";}
if (grnNumA==13){grnHexA="D";}
if (grnNumA==14){grnHexA="E";}
if (grnNumA==15){grnHexA="F";}
if (grnNumA==16){grnHexA="F";}
///////////////////////////////bluNumA
if (bluNumA==10){bluHexA="A";}
if (bluNumA==11){bluHexA="B";}
if (bluNumA==12){bluHexA="C";}
if (bluNumA==13){bluHexA="D";}
if (bluNumA==14){bluHexA="E";}
if (bluNumA==15){bluHexA="F";}
if (bluNumA==16){bluHexA="F";}
///////////////////////////////redNumB
if (redNumB==10){redHexB="A";}
if (redNumB==11){redHexB="B";}
if (redNumB==12){redHexB="C";}
if (redNumB==13){redHexB="D";}
if (redNumB==14){redHexB="E";}
if (redNumB==15){redHexB="F";}
if (redNumB==16){redHexB="F";}
///////////////////////////////grnNumB
if (grnNumB==10){grnHexB="A";}
if (grnNumB==11){grnHexB="B";}
if (grnNumB==12){grnHexB="C";}
if (grnNumB==13){grnHexB="D";}
if (grnNumB==14){grnHexB="E";}
if (grnNumB==15){grnHexB="F";}
if (grnNumB==16){grnHexB="F";}
///////////////////////////////bluNumB
if (bluNumB==10){bluHexB="A";}
if (bluNumB==11){bluHexB="B";}
if (bluNumB==12){bluHexB="C";}
if (bluNumB==13){bluHexB="D";}
if (bluNumB==14){bluHexB="E";}
if (bluNumB==15){bluHexB="F";}
if (bluNumB==16){bluHexB="F";}
//
//put the hex in one string:
var fullHex=String(redHexA)+String(redHexB)+String(grnHexA)+String(grnHexB)+String(bluHexA)+String(bluHexB);
//
//remove the background declaration above and change the value to fullHex
document.body.style.backgroundColor="#"+fullHex;
document.body.style.color="#ffffff";
}
onload=doIt;