Color Opacity

function addOpacityWithColorMix(color, opacity) {
  const percentage = opacity * 100;
  return `color-mix(in srgb, ${color} ${percentage}%, transparent)`;
}

const box = document.getElementById('box')
const backgroundColor = 'rgb(0, 62, 163)'
const textColor = 'rgb(255, 255, 255)'
box.style.color = textColor
box.style.backgroundColor = backgroundColor
box.style.borderColor = addOpacityWithColorMix(textColor, 0.20)

// add hover style
box.addEventListener('mouseenter', () => {
  box.style.backgroundColor = addOpacityWithColorMix(textColor, 0.2)
})

box.addEventListener('mouseleave', () => {
  box.style.backgroundColor = addOpacityWithColorMix(backgroundColor, 1)
})