JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<div id="box">
  
</div>

CSS

#box {
  width: 100px;
  height: 100px;
  border: 4px solid;
  border-radius: 25px;
}

JavaScript

/* const a = 'UEGBFoAdx0URfgws0AvmKmHWfQT2' */
const a = 'NaHOAmkouCTM8qy7ZvRmOR8jh093'
const splitEvenChunk = (arr, chunkSize) => {
  const res = [] 
  while(arr.length > 0)
    res.push(arr.splice(0, chunkSize))
  return res.filter((elm) => elm.length === chunkSize)
}

console.log(splitEvenChunk(a.split(''), 3))

function rgba (value) {
	const total = value.length
  const part = 3
  const v = parseInt(total / part)
  let source = value.slice(0, v * 3)
  const rgb = []
  
  const calculate = (acc, cur) => {
  	const total = acc + cur.charCodeAt(0)
    return total % 256
  }

	const splitEvenChunk = (arr, chunkSize) => {
  	const res = [] 
		while(arr.length > 0)    
    	res.push(arr.splice(0, chunkSize))
    return res.filter((elm) => elm.length === chunkSize)
  }
	
  while(source.length > 0) {
  	let sliced = ''
    sliced = source.slice(0, v)
		source = source.replace(sliced, '')    
    const color = sliced.split('').reduce(calculate, 0)
  	rgb.push(color)
  }
  
    document.getElementById('box').style.borderColor = `rgba(${ rgb.join(',') })`;
    
  return rgb
}

rgba(a)