Edit in JSFiddle

<div class="Grupos">
<div class="grupito" style="background: #324b54;">GRUPO UNO</div>
<div class="grupito" style="background: #44a1c2;">GRUPO DOS</div>
<div class="grupito" style="background: #44c2ac;">GRUPO TRES</div>
<div class="grupito" style="background: #6fad61;">GRUPO CUATRO</div>
<div class="grupito" style="background: #ccb341;">GRUPO CINCO</div>
<div class="grupito" style="background: #COLOR;">GRUPO SEIS</div>
</div>

.Grupos { 
width: 500px;
padding:10px;
background-color: #ddd;
}

.grupito { 
width: 140px; 
display: inline-block; 
text-align: center;
font-size: 8px;
background-color:black;
color: #fff;
margin:2px;
padding: 10px;
font-family: arial;
}

.grupito:hover {
  background-color:#fff!important;
  color:#000;
  transition:0.3s linear;
}