Profile Picture - Initials

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<p>
  &nbsp;
</p>

<div class='initial-container'>

</div>

CSS

.user-initial {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  float: left;
  margin: 5px 0 0 5px;
  color: white;
}



.user-initial div {
  padding-top: 0.5em;
  text-align: center;
}

JavaScript

var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var userInitials = {};

var initials = "LE,EL,RK,SM,AM,MQ,LD,DV,PS,PK,VV,GS,UP,WW,RK,ZZ".split(',');

$.each(initials, function(i, v) {
  if (userInitials[v] == undefined) {
    H = parseInt(str.indexOf(v.charAt(0))) * 14;
    S = 20 + 2.5 * parseInt(str.indexOf(v.charAt(1)));

    userInitials[v] = {
      h: H,
      s: S
    }
  }
  $('.initial-container').append('<div style="background-color: hsl(' + userInitials[v].h + ',' + userInitials[v].s + '%, 35%)" class="user-initial"><div>' + v + '</div></div>');
});

console.log(userInitials);