Introduction: Arduino TFT Color Clock

Picture of Arduino TFT Color Clock

You may be familiar with a website in the UK called Colour Clock ( which converts the time into a hex value and then uses that value to update the background color. It's very hypnotic and once you get used to how it works you can actually tell where you are in the day just by glancing at the screen from across the room.

I had an Arduino Uno R3 and an Adafruit 1.8" Color TFT Shield w/microSD and Joystick that I was trying to use for another project that kept stalling out. One night just for fun I decided to see if I could recreate the Colour Clock and it only took a couple hours. If you're familiar with Arduino you could easily swap parts out for a simple TFT breakout board and something tiny like a Beetle and make a very compact unit. You could even wear it as a badge.

I made use of the Adafruit GFX Library which made getting things set up a breeze. I already had mine working and understood how to use the library a little so your results may vary depending on your experience. At first I would just type the current time into the code and sync, but with the addition of a real time clock the project will remember what time it is and spring to life every time you power it up.

  • Materials
  • Arduino UNO R3 (or clone, or something similar if you're crafty)
  • Adafruit 1.8" Color TFT Shield w/microSD (or compatible, the larger the better!)
  • DS3231 RTC (Real Time Clock) module (more accurate than DS1307
  • Jumper wire (or jumpers with Dupont connectors)
  • Soldering Iron
  • Solder

Step 1: The Hardware

Picture of The Hardware

The TFT shield comes with some assembly required. You need to attach the header pins which I usually do by first inserting them in the corresponding holes on the Arduino, then setting the shield in place and flowing with solder. Use a fine tip soldering iron and fine filament solder for best results. Apply just a little heat to the top of the pin and gently touch the solder to the pin (not the iron) until it starts to flow. Very quickly you'll have a tiny pool of solder around the pin. Lift the solder and iron and let it cool. Repeat until all the pins are done.

With that out of the way your shield is already installed on your UNO. Click through to attach the RTC and add a jumper to be able to adjust brightness.

Step 2: The Peripherals

Picture of The Peripherals

This isn't so much a peripheral as an option. If you solder a little jumper between pin 5 and the BC pin. That lets you AnalogWrite to pin 5 to set the screen brightness from 0 to 255. More on that later.

To attach the RTC module I happened to have some jumper cables with Dupont connectors, female on one end and male on the other. These are great for connecting to peripherals or breadboards. I just slid the female ends on the appropriate four pins on the RTC and then soldered the other ends to the TFT shield. Each pin has a hole next to it that it's tied to so you don't have to solder right to the pin. I'm not going to put mine in a case. It'll probably get pulled apart in a month to become something else. For now I'm going to rest it in a business card holder on my desk at work so I came off the front. You could just as easily go to the back of the UNO or even add some screw terminals for easy changes.

Pins used are:

  • SCL - Clock Line - to Arduino Pin A5
  • SDA - Data Line - to Arduino Pin A4
  • VCC - 5 Volts - to Arduino 5v Pin
  • GND - Ground - to Arduino Gnd Pin

Because the clock is the only device using the I2C bus in this project, pull up resistors aren't needed. While the UNO R3 has pins over by the ARef pin for I2C, they really just connect to A4 and A5 so it doesn't matter that the shield doesn't bring them up to the top level, we'll just go straight to the source.

Now that it's all built it's just a matter of loading the code and we're off to the races.

Step 3: The Code

Some of the code comes directly from the example sketches that came with the shield and RTC module. The rest was cooked up by yours truly and heavily commented for your ease of use. The one thing you will need to watch out for is the different ways you can set up for the TFT screen. It's also available as a simple breakout board (without the joystick or SD card reader) and the pinout is different for that. There are also multiple versions of the shield which are indicated by the color of the tab on the screen protector. Mine came with a green tab but only worked with the black tab code line enabled. You'll just have to try a few things out to get yours working. Refer to the example sketches for help.

You'll need to include the following libraries:

  • Wire.h
  • SPI.h
  • RTClib.h
  • Adafruit_GFX.h
  • Adafruit_ST7735.h

Make sure you have those downloaded and installed in the IDE before you get going. The first three have to be in that exact order or you'll get compile errors. I was stumped for quite a while before I found that little tidbit in a forum somewhere.

I'll explain the code a little. To pick a color to use on the screen you have to use a 16 bit hex value but it's in a weird configuration that's a little hard to understand at first. It's called 565 color and that's because the green value is treated differently. There's five bits for red and blue but because your eye is more sensitive to green it uses 6 bits for that. So you have 16 values for red and blue, and 32 values for green. But that's not all. The lowest value is actually zero so the highest value is actually 15 or 31.

While you can get out a hex chart and do some converting it's sort of cumbersome to be constantly typing in color values in hex like 0xFFFF for white (you can declare some color values, see the top of the sketch) the GFX library provides a nice little function to take care of things for you using values from 0 to 255.

What the time portion of the sketch does is take the hour value and use the map function to convert 24 hours, 60 minutes, and 60 seconds to values ranging from 0 to 255. Then it plugs those variables into the tft.Color565 function and it takes care of coming up with the hex value. Hours give the red value, minutes the green, and seconds the blue.

redValue =map(hour(t), 0, 23, 0, 255);

grnValue = map(minute(t), 0, 59, 0, 255);

bluValue = map(second(t), 0, 59, 0, 255);

tft.fillRect(0, 0, 160, 50, (tft.Color565(redValue, grnValue, bluValue)));

That's what the sketch uses to set the text and field colors. I messed around with eliminating the black bar and instead having the time appear in black with a clear text background but it was a little flickery. That's why the bar exists and it draws two rectangles of color instead of just filling the screen with color.

As for the colors you can get to know about where you are in the day or hour with just a quick glance.

Just after midnight it's very dark because the red value (hours) is zero and so are the blue and green (minutes and seconds). As the seconds tick off things get bluer and bluer until the minute ticks over and a tiny bit of green is added and the blue value resets to zero. When it's almost one AM things will be very green with the seconds taking things into teal as they creep up.

By lunch time there's a fair amount of red in play so things start to get a little more purple.

And by the end of the day, especially just before midnight things are very bright because all the values are very high at this point.

If you also have the shield with the joystick it's very easy to add some code to set the brightness. If you've gone the simple route you can just add two buttons to any two pins that can do a digitalRead. Use one to call the brightness function and then the other two for up and down. Hit select again to exit.

If you want to do away with buttons entirely you could either program the brightness depending on time of day, or use a photo sensor and control it with ambient light levels.

Here's the code:

Arduino Color Clock - Pastebin Code

Step 4: The Frills

I have a hard time leaving any project alone. I went ahead and added a little preferences menu that you access with the joystick. A press gets you into the menu and there you can select screen brightness by clicking left or right and 12 or 24 hour time by clicking up or down. Click again and your settings are saved to EEPROM so they're still there the next time you power up.

Here's The Code: [Edit] Corrected issue with first hour after midnight and leading zero in 12 hour mode.

Arduino Color Clock with Settings Menu - Pastebin Code


andrew_h made it! (author)2014-09-23

Such a cool idea! I just happened to have the parts lying around for this one so I whipped one up. I modded the code for a DS1307 RTC and used a generic ST7735 display I bought for another project ages ago that never went ahead. I'll probably sub the 'UNO' for a pro mini and make a nice compact clock. My daughter is already eyeing it off for her... Have you had any issues with screen burn?

It does give me an idea though - You could use a 'white' normal 16X2 character LCD with custom full screen characters (like i did in my amp project) and then use something like WS2812b or even normal RGB LED's for the backlight instead of white.

Sound Guy (author)andrew_h2014-09-23

So cool! Did you post that with the I Made It button? I haven't had it long enough to see if there are any burn in issues. In all likelihood it'll get torn apart in a month and become a display for a logging barometer or some such thing. I love the 16x2 idea, used some large characters for a weather station I made last month and was thinking about getting an RGB backlight model to indicate the temperature decade.

andrew_h (author)Sound Guy2014-09-26

Yeah, that's the first time i've ever used it :). Looking now, I didn't even realize adafruit already sell RGB 16X2 LCDs - Makes it even easier.

dixonl90 made it! (author)2014-12-22

I had a display off eBay and thought it'd be awesome to make one of these. I modified the code to make it a bit more generic. Also, the YELLOW definition should be "#define YELLOW 0xFFE0". Thanks for the idea and code! :)

TimV94 (author)dixonl902017-08-08

hello friend,

can you uplaod the code for this tft screen? i have the same screen but i don't know the sketch

johangrobler2009 (author)2015-12-30


I need some help. The following are error messages in the main program I called DS3231_Joystick. Can you please explain what is wrong?

DS3231_Joystick:8: error: 'RTC_DS3231' does not name a type

DS3231_Joystick:51: error: 'Adafruit_ST7735' does not name a type

DS3231_Joystick.ino: In function 'void setup()':

DS3231_Joystick:64: error: 'RTC' was not declared in this scope

DS3231_Joystick:68: error: 'DateTime' was not declared in this scope

DS3231_Joystick:70: error: 'DateTime' was not declared in this scope

DS3231_Joystick:79: error: 'tft' was not declared in this scope

DS3231_Joystick.ino: In function 'void drawTime()':

DS3231_Joystick:104: error: 'DateTime' was not declared in this scope

DS3231_Joystick:104: error: 'RTC' was not declared in this scope

DS3231_Joystick:108: error: 'now' was not declared in this scope

DS3231_Joystick:115: error: 'tft' was not declared in this scope

mickjazz29 (author)2015-01-09

Hi, great clock.

Forgive my naivety, I am a complete rookie with arduino but I really wanted to make this. Am I supposed to be able to just cut and paste your code onto my IDE, because I have tried that and I get all sorts of errors when I verify it. Wonder if you could give me a nudge in the right direction. - Many thanks (-:

ibenkos (author)2014-10-18

Smart idea! Thanks for shearig :)

tkleinauskas (author)2014-10-06


Arman5592 (author)2014-09-24

Wouldn't it be easier to use time library ? It would be less accurate but you just give the current time and it calculates time .

Sound Guy (author)Arman55922014-09-24

That was how I started out when I was just getting the concept going. But once it's all up and running it's nice to be able to just plug it into any USB power anywhere and have the correct time show up. I've run this thing on my coffee table, in the car, my desk at work, pretty much anywhere I want to show it off and there's 5 volts available.

xxlauraxx (author)2014-09-23

I love this idea! I had a similar thought a while back, but for an analog clock. Rather than having 12 different time zones on the clock face, there would be 6.

"Meet me for a drink towards the beginning of green."

Maybe developing a less-precise clock is just appealing to me because I'm usually running 5 or 10 minutes late… :)

Sound Guy (author)xxlauraxx2014-09-23

That settles it. Next chance I get I'm adding an extra step for an analog face clock with one color per hour.

MsSweetSatisfaction (author)2014-09-23

This is awesome! Definitely would better alert me to time limits! Thanks for sharing!

About This Instructable




Bio: The sound guy is expected to have all the answers and all the gear and gadgets to make the show come off smoothly. From batteries ... More »
More by Sound Guy:Arduino TFT Color ClockBusiness Card Micro Sewing Kit (Fits In Wallet)
Add instructable to: