Take the 2-minute tour ×
Programming Puzzles & Code Golf Stack Exchange is a question and answer site for programming puzzle enthusiasts and code golfers. It's 100% free, no registration required.

Your challenge is to create a clock that displays the time as a hex number, and the background color as the hex color code of the time.

Requirements: No input. In the center of your output you should display the number sign and the current time in 24 hour format as "#hhmmss". The program should update to the current time at least once every second. The text must be centered and white (or a light color that stands out). The background should be entirely the color of the hex code. Shortest code wins, but creative answers are encouraged.

Live example. Idea from r/InternetIsBeautiful.

share|improve this question
I liked the idea, but it'd be better as a popularity contest imo –  William Barbosa Jun 20 '14 at 21:52
@WilliamBarbosa I believe the result is way too simple for a popularity contest to be useful. –  qwr Jun 20 '14 at 22:48
You may want to point out that the IIB post is an x-post from /r/minimalism. But heh. –  cjfaure Jun 22 '14 at 17:24

5 Answers 5

up vote 1 down vote accepted

python3 (143) or (124 with flickering)

import time;from turtle import*;tracer(0)
while 1:reset();ht();color("snow");a=time.strftime("#%H%M%S");write(a,0,"center");bgcolor(a);update()

using turtles, 143 bytes, will probably not be the shortest, but I simply wanted to use play with turtles again.

This example updates the screen often enough en does what is asked, but it is not pretty, as it goes on and off. Then it is only 124 bytes. (not a specified quality)

import time;from turtle import*
while 1:reset();ht();color("snow");a=time.strftime("#%H%M%S");write(a,0,"center");bgcolor(a)


import time
from turtle import*
tracer(0)                           #1 not every change should be propagated immediatly
while 1:
    reset()                         #2 remove previous drawing
    ht()                            #3 hide the turtle
    color("snow")                   #4 set color to snow, which is white for as far I can see
    a=time.strftime("#%H%M%S")      #5 generate the color from time
    write(a,0,"center")             #6 print time
    bgcolor(a)                      #7 change bgcolor
    update()                        #8 propagate changes

btw, because of the while 1, I'd recommend running it from terminal. As it can be quite difficult to close :D (you'll need ctrl+c)

share|improve this answer
You can reduce your character count by combining all of the lines in the while loops using semicolons. –  isaacg Jun 21 '14 at 3:19
@isaacg thank you, I adapted it. –  Pinna_be Jun 21 '14 at 6:55

HTML/CSS/JavaScript 207 183 180 161 152

Tested and working in the latest Firefox and Chrome browsers.

<body id=b onload=setInterval("b.innerHTML=b.bgColor=Date().replace(/.*(..):(..):(..).*/,'#$1$2$3')",0) text=#fff style=position:fixed;top:50%;left:47%>

Demo Here

share|improve this answer
as far as I see, your code perfectly works without the <html style=height:100%> at least in safari/jsfiddle –  Pinna_be Jun 21 '14 at 6:59
@Pinna_be Good catch. I was trying out a few different ways of vertically centering the text and that was left over from another method. –  nderscore Jun 21 '14 at 7:13
I know I'm braking some rules by making this comment, but, damn this body tag is pure beauty. –  Jacob Jun 22 '14 at 4:30

Processing, 162 bytes

void draw()
 int h=hour(),m=minute(),s=second();


enter image description here

I don't know if it's against the rules, but the actual drawing area is the 100x100px square on the center of the window. For some reason, Processing can't scale down the window to that size, so it adds the gray margins around the drawing area. Here's another version without the gray margins, but slightly larger (198 bytes):

void setup()

void draw()
 int h=hour(),m=minute(),s=second();
share|improve this answer
are the newlines and the spaces at the beginning mandatory? Because you could shave off some characters over there. –  Pinna_be Jun 21 '14 at 9:41

HTML + Javascript (184)

This uses the => notation which is currently only supported in Firefox. It does not use any libraries.

<body text=white onload='(b=document.body).bgColor=b.innerHTML="#"+[(d=new Date()).getHours(),d.getMinutes(),d.getSeconds()].map(x=>("00"+x).slice(-2)).join("");setTimeout(b.onload)'>

With indentation:

       (b=document.body).bgColor = 
       b.innerHTML = 
             "#"+[ (d=new Date()).getHours(),
share|improve this answer
shouldn't the output be in the center of the screen? –  Pinna_be Jun 20 '14 at 23:07

C# 357, 325 with minor cheating

Yea, C# isn't gonna win many codegolf prizes against other languages. Still, fun!

Cheating (not exactly centre, and only centre with .NET 4.5's default form size of 300x300, Mono may do other funny stuff):

using System.Windows.Forms;using System.Drawing;class P:Form{static void Main(){new P().ShowDialog();}public P(){var l=new Label(){Top=125,Left=120,ForeColor=Color.White};Controls.Add(l);new Timer(){Enabled=true,Interval=1}.Tick+=(s,e)=>{BackColor=ColorTranslator.FromHtml(l.Text=System.DateTime.Now.ToString("#HHmmss"));};}}


using System.Windows.Forms;using System.Drawing;class P:Form{static void Main(){new P().ShowDialog();}public P(){var l=new Label(){Dock=(DockStyle)5,TextAlign=(ContentAlignment)32,ForeColor=Color.White};Controls.Add(l);new Timer(){Enabled=true,Interval=1}.Tick+=(s,e)=>{BackColor=ColorTranslator.FromHtml(l.Text=System.DateTime.Now.ToString("#HHmmss"));};}}


using System.Windows.Forms;
using System.Drawing;

class P : Form
    static void Main()
        new P().ShowDialog();

    public P()
        var l = new Label() { Dock = (DockStyle)5, TextAlign = (ContentAlignment)32, ForeColor = Color.White };
        new Timer() { Enabled = true, Interval = 1 }.Tick += (s, e) =>
            BackColor = ColorTranslator.FromHtml(l.Text = System.DateTime.Now.ToString("#HHmmss"));
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.