<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span>28.03.2018</span><br>
<span>29.03.2018</span><br>
<span>30.03.2018</span><br>
<span>31.03.2018</span><br>
<span>01.04.2018</span><br>
<span>02.04.2018</span><br>
<script>
var now = Date.now();
[].forEach.call(document.querySelectorAll('span'), function(el){
var date = el.textContent.replace(/(\d+)\.(\d+)\.(\d+)/, '$3,$2,$1');
date = Date.parse(date);
var ost = date - now;
if(ost>86400000*4) el.style.color = '#00ff00';
else if(ost>86400000*3) el.style.color = '#44CC00';
else if(ost>86400000*2) el.style.color = '#77AA00';
else if(ost>86400000) el.style.color = '#DD8800';
else if(ost>0) el.style.color = '#ff7700';
else el.style.color = '#ff0000';
console.log(date);
});
</script>
</body>
</html>
цвета если не подходят сами укажите