Värvid

Põhivärvid

Preview 
<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"
  }
}

Värvide pooltoonid

Preview 
<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%"
    }
  ]
}