<div>
<div class="uig-color uig-color--blue">
<div class="uig-color__example"></div>
<p class="uig-color__text">Tallinna Sinine</p>
</div>
<div class="uig-color uig-color--white">
<div class="uig-color__example"></div>
<p class="uig-color__text">Valge</p>
</div>
<div class="uig-color uig-color--gray">
<div class="uig-color__example"></div>
<p class="uig-color__text">Hall</p>
</div>
<div class="uig-color uig-color--black">
<div class="uig-color__example"></div>
<p class="uig-color__text">Must</p>
</div>
<div class="uig-color uig-color--green">
<div class="uig-color__example"></div>
<p class="uig-color__text">Roheline</p>
</div>
<div class="uig-color uig-color--red">
<div class="uig-color__example"></div>
<p class="uig-color__text">Punane</p>
</div>
<div class="uig-color uig-color--yellow">
<div class="uig-color__example"></div>
<p class="uig-color__text">Kollane</p>
</div>
</div>
{
"colors": {
"blue": "Tallinna Sinine",
"white": "Valge",
"gray": "Hall",
"black": "Must",
"green": "Roheline",
"red": "Punane",
"yellow": "Kollane"
}
}
<div>
<!--<span style="float:left;">-->
<span style="display: inline-block">
<div class="uig-color uig-color--blue-8">
<div class="uig-color__example"></div>
<p class="uig-color__text">80%</p>
</div><br>
<div class="uig-color uig-color--blue-6">
<div class="uig-color__example"></div>
<p class="uig-color__text">60%</p>
</div><br>
<div class="uig-color uig-color--blue-4">
<div class="uig-color__example"></div>
<p class="uig-color__text">40%</p>
</div><br>
<div class="uig-color uig-color--blue-2">
<div class="uig-color__example"></div>
<p class="uig-color__text">20%</p>
</div><br>
</span>
<!--<span style="float:left;">-->
<span style="display: inline-block">
<div class="uig-color uig-color--black-8">
<div class="uig-color__example"></div>
<p class="uig-color__text">80%</p>
</div><br>
<div class="uig-color uig-color--black-6">
<div class="uig-color__example"></div>
<p class="uig-color__text">60%</p>
</div><br>
<div class="uig-color uig-color--black-4">
<div class="uig-color__example"></div>
<p class="uig-color__text">40%</p>
</div><br>
<div class="uig-color uig-color--black-2">
<div class="uig-color__example"></div>
<p class="uig-color__text">20%</p>
</div><br>
</span>
<!--<span style="float:left;">-->
<span style="display: inline-block">
<div class="uig-color uig-color--green-8">
<div class="uig-color__example"></div>
<p class="uig-color__text">80%</p>
</div><br>
<div class="uig-color uig-color--green-6">
<div class="uig-color__example"></div>
<p class="uig-color__text">60%</p>
</div><br>
<div class="uig-color uig-color--green-4">
<div class="uig-color__example"></div>
<p class="uig-color__text">40%</p>
</div><br>
<div class="uig-color uig-color--green-2">
<div class="uig-color__example"></div>
<p class="uig-color__text">20%</p>
</div><br>
</span>
<!--<span style="float:left;">-->
<span style="display: inline-block">
<div class="uig-color uig-color--red-8">
<div class="uig-color__example"></div>
<p class="uig-color__text">80%</p>
</div><br>
<div class="uig-color uig-color--red-6">
<div class="uig-color__example"></div>
<p class="uig-color__text">60%</p>
</div><br>
<div class="uig-color uig-color--red-4">
<div class="uig-color__example"></div>
<p class="uig-color__text">40%</p>
</div><br>
<div class="uig-color uig-color--red-2">
<div class="uig-color__example"></div>
<p class="uig-color__text">20%</p>
</div><br>
</span>
<!--<span style="float:left;">-->
<span style="display: inline-block">
<div class="uig-color uig-color--yellow-8">
<div class="uig-color__example"></div>
<p class="uig-color__text">80%</p>
</div><br>
<div class="uig-color uig-color--yellow-6">
<div class="uig-color__example"></div>
<p class="uig-color__text">60%</p>
</div><br>
<div class="uig-color uig-color--yellow-4">
<div class="uig-color__example"></div>
<p class="uig-color__text">40%</p>
</div><br>
<div class="uig-color uig-color--yellow-2">
<div class="uig-color__example"></div>
<p class="uig-color__text">20%</p>
</div><br>
</span>
</div>
{
"colors": [
{
"blue-8": "80%",
"blue-6": "60%",
"blue-4": "40%",
"blue-2": "20%"
},
{
"black-8": "80%",
"black-6": "60%",
"black-4": "40%",
"black-2": "20%"
},
{
"green-8": "80%",
"green-6": "60%",
"green-4": "40%",
"green-2": "20%"
},
{
"red-8": "80%",
"red-6": "60%",
"red-4": "40%",
"red-2": "20%"
},
{
"yellow-8": "80%",
"yellow-6": "60%",
"yellow-4": "40%",
"yellow-2": "20%"
}
]
}