vuejs中根据用户名生成头像背景色

需求是有头像的显示头像，没有头像的显示名称首字母作为头像

从网上找的代码，但是生成的颜色有些太刺眼，这里稍微调整一下，颜色显得更正一些。颜色的基本思路也就是限定红绿，只让蓝和透明度动态调整

主要是限定了前两位的色值

extractColorByName (name) {
      var str = ''
      for (var i = 0; i < name.length; i++) {
        str += parseInt(name[i].charCodeAt(0), 10).toString(16)
      }
      return '#0c' + str.slice(1, 2)
    }

引用

<span style="height: 2em; float: left;">
  <a-avatar v-if="blog.data.user.img" size="default" :src="blog.data.user.img" />
  <a-avatar v-else :style="`background:${extractColorByName(blog.data.user.name)}`">{{ blog.data.user.name.charAt(0) }}</a-avatar>
</span>