Polymer web component to display a clock.

   <link rel="import" href="alfa-clock.html">

    <style>
        alfa-clock {float: left;}
        alfa-clock.red{
            --seconds-color: red; 
            --ring-css: 6px solid red; 
            --hands-color: darkred; 
            --shadow-color: none; 
            --face-filter: invert(.5) sepia(5) saturate(25) hue-rotate(-45deg); 
        }
        alfa-clock.bigger{ --size: 400px; --brand-font: 2em Arial}
    </style>
    <alfa-clock></alfa-clock>
    <alfa-clock class="red" clock-brand="red clock"></alfa-clock>
    <alfa-clock class="bigger" clock-brand="bigger clock"></alfa-clock>

The clock face is made with SVG image containing numbers for hours.
To change the color of SVG, a CSS filter is applied.
--face-filter: invert(.5) sepia(5) saturate(25) hue-rotate(-45deg);
Try to manipulate saturation and hue-rotate to achieve desired color. It is hard, but blame the CSS committee.

Examples of colors:

--face-filter: invert(1); /* black */
--face-filter: invert(.5) sepia(1) saturate(5) hue-rotate(60deg);  /* green */
--face-filter: invert(.5) sepia(5) saturate(25) hue-rotate(-45deg); /* red */

This clock is based on CSS animations. When a page is loosing "focus" the CSS animation stops. When the page with clock is reopened, the clock resunmes animations and is late! To avoid this, run
this.$$('alfa-clock').start();
each time the containing page is reopened.