Есть десять цветов hsl(0, 0%, 54%) hsl(0, 0%, 48%) hsl(0, 0%, 42%) hsl(0, 0%, 36%) hsl(0, 0%, 30%) hsl(0, 0%, 24%) hsl(0, 0% 18%) hsl(0, 0%, 12%) hsl(0, 0%, 6%) hsl(0, 0%, 0%), возможно ли сделать чтобы <span class="colon"> менял цвет от светлосерого до чёрного с интервалом в 100 милисекунд?
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
font: 14px serif;
border: 1px solid #ccc;
padding: 5px;
margin-bottom: 5px;
text-align: center;
}
#block_time-data {
display: inline-block;
white-spage: nowrap; }
span { display: inline-block;
white-space: nowrap; }
#hours, #min, #sec { }
colon { color: hsl(0, 0%, 54%); }
</style>
</head>
<body>
<div id="block_time-data">
<span id="hours"></span><span class="colon">:</span><span id="min"></span><span class="colon">:</span><span id="sec"></span><br>
<span id="day"></span><br>
<span id="date"></span>
<span id="month_name"></span>(<span id="month"></span>)
<span id="year"></span>
г.
</div>
<script>
var hours = document.getElementById('hours');
var minutes = document.getElementById('min');
var seconds = document.getElementById('sec');
var day = document.getElementById('day');
var date_name = document.getElementById('date');
var month = document.getElementById('month');
var month_name = document.getElementById('month_name');
var year = document.getElementById('year');
var days = ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'];
var monthes = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
(function timer()
{
var date = new Date();
hours.innerHTML = date.getHours();
minutes.innerHTML = date.getMinutes();
seconds.innerHTML = date.getSeconds();
day.innerHTML = days[date.getDay()];
date_name.innerHTML = date.getDate();
month.innerHTML = date.getMonth()+1;
month_name.innerHTML = monthes[date.getMonth()];
year.innerHTML = date.getFullYear();
[hours, min, sec, date_name, month].forEach(function(el) {
el.innerHTML = ("0"+ el.innerHTML).slice(-2)
})
window.setTimeout(timer, 1e3);
})()
</script>
</body>
</html>