CSS Hex Color Clock

Developer
Luuk Lamers
Size
3,351 Kb
Views
4,048
  1. CSS Hex Color Clock Previews
  2. CSS Hex Color Clock HTML Codes
  3. CSS Hex Color Clock CSS Codes
  4. CSS Hex Color Clock JS Codes

How do I make an css hex color clock?

This does almost exactly the same as the whatcolour is it clock, only it maps the 24 hours to (0-100%) red, minutes to green and seconds to blue so every colour will come by instead of just the blues and greens.. What is a css hex color clock? How do you make a css hex color clock? This script and codes were developed by Luuk Lamers on 22 January 2023, Sunday.

CSS Hex Color Clock Previews
IQ Test

CSS Hex Color Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Hex Color Clock</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato:100,300'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="content"> <div class="clock"> <span class="hour">24</span> <span class="minute">00</span> <span class="second">00</span> </div> <div class="code"></div> <div class="toggle"> <span class="rgb">rgb</span> / <span class="hex active">hex</span> </div>
</div>
<div class="xaddict">by <a href="https://xaddict.me" target="_blank">xaddict</a></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS Hex Color Clock - Script Codes CSS Codes

html,
body { color: white; display: block; font-family: Lato, sans-serif; font-weight: 100; height: 100%; text-align: center; width: 100%;
}
html.light,
body.light { color: black;
}
#content { bottom: 0; color: inherit; height: 200px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 800px;
}
.clock { display: inline-block; font-size: 192px; height: 200px; line-height: 200px; margin: auto; width: auto;
}
.divider,
.hour,
.minute,
.second { display: inline;
}
.code { font-size: 32px; line-height: 1em; padding: 2em 0 1em 0;
}
.toggle { color: inherit; font-size: 18px; line-height: 1em; padding: 0;
}
.toggle span { cursor: pointer; font-weight: 100;
}
.toggle span.active { font-weight: 300;
}
.xaddict { bottom: 0; font-size: 18px; padding-bottom: 1em; position: absolute; width: 100%;
}
.xaddict a { color: inherit; text-decoration: none;
}
.xaddict a:link { text-decoration: underline;
}

CSS Hex Color Clock - Script Codes JS Codes

Number.prototype.pad = function (n,str){ return Array(n-String(this).length+1).join(str||'0')+this;
}
String.prototype.pad = function(n, str){ return Array(n-String(this).length+1).join(str||'0')+this;
}
var showRGB = false;
function updateTime(){ var date = new Date(), hours = date.getHours(), minutes = date.getMinutes(), seconds = date.getSeconds(), red = Math.round((255/23) * hours), green = Math.round((255/59) * minutes), blue = Math.round((255/59) * seconds), color = 'rgb('+red+','+green+','+blue+')'; $(".hour").text(hours.pad(2)); $(".minute").text(minutes.pad(2)); $(".second").text(seconds.pad(2)); //console.log(color); if(showRGB){ $('.code').text(color); } else { $('.code').text('#'+red.toString(16).pad(2)+green.toString(16).pad(2)+blue.toString(16).pad(2)); } if(red > 200 && green > 200 && blue > 200){ $(".clock").addClass("light"); } else { $(".clock").removeClass("light"); } $('body').css('background',color);
}
$(".toggle span").on("click",function(e){ $(".toggle span").removeClass('active'); $(this).addClass('active'); if($(this).text() == 'rgb'){ showRGB = true; } else { showRGB = false; } updateTime();
});
setInterval(updateTime,1000);
updateTime();
CSS Hex Color Clock - Script Codes
CSS Hex Color Clock - Script Codes
Home Page Home
Developer Luuk Lamers
Username xaddict
Uploaded January 22, 2023
Rating 3
Size 3,351 Kb
Views 4,048
Do you need developer help for CSS Hex Color Clock?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Luuk Lamers (xaddict) Script Codes
Name
CSSDAY in CSSGRID
SVG animated patterns
Big text and big gradient
CSS 3D Card Deck
Flexbox layout sidebars and content
CSS object-fit fallback with plain JS
Isometric css island
Responsive off-canvas dual-side navigation without transforms
Bubble Pop Menu
Big Chat
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!