HSV Color Clock

Info

HSV Color Clock is a little experiment with the purpose of representing visually time by using the HSV Color Space representation (Hue, Saturation, Value). It adheres to the following rules:

  • Colors cannot repeat and each minute of the day should match a different color.
  • 12.00 midday should match to White color (0% Saturation and 100% of Value).
  • 00.00 midnight should correspond to Black color (0% Saturation and 0% Value).
  • Color change has to be done gradually and no sudden big step should happen between contiguous minutes.
  • Hue value will follow the rotation of the hours handler (0°:red, 60°:yellow, 120°:green, 180°:cyan, 240°:blue, 300°:magenta).

This experiment has been developed using HTML5, CSS3 and JavaScript / jQuery by : @alterebro
Source code is available GitHub : https://github.com/alterebro/HSV.ColorClock.


HSV Color Clock es un pequeño experimento con el objetivo de representar visualmente el tiempo en forma de color usando el modelo HSV (Matiz, Saturación, Valor). Las reglas que sigue son las siguientes:

  • Los colores no pueden repetirse y a cada minuto del día le debe corresponder un color diferente.
  • Las 12.00 del mediodía deben corresponder a el color Blanco (Saturación: 0%, Valor: 100%).
  • Las 0:00 de la noche deben corresponder a el color Negro (Saturación: 0%, Valor: 0%)
  • El cambio de color ha de ser gradual y no puede haber saltos bruscos entre minutos contiguos.
  • El valor de la matiz seguirá la rotación de la manecilla de las horas. (0°:rojo, 60°:amarillo, 120°:verde, 180°:cian, 240°:azul, 300°:magenta).

Este experimento ha sido desarrollado usando HTML5, CSS3 y JavaScript / jQuery por : @alterebro
El código fuente esta disponible en GitHub : https://github.com/alterebro/HSV.ColorClock.