<script>
  document.addEventListener('DOMContentLoaded', function(event) {
    const colorCards = document.getElementsByClassName('acss-color-card__wrapper');

    for (let i = 0; i < colorCards.length; i++) {
      const colorCard = colorCards[i];
      const computedStyle = window.getComputedStyle(colorCard);
      const backgroundColor = computedStyle.getPropertyValue('background-color');

      if (backgroundColor) {
        let hexValue = backgroundColor;
        // Check if the value is in RGB format
        if (backgroundColor.indexOf('rgb(') === 0) {
          // Extract the RGB values
          const rgbValues = backgroundColor.replace(/[^\d,]/g, '').split(',');
          
          // Convert RGB to hexadecimal
          const r = parseInt(rgbValues[0], 10);
          const g = parseInt(rgbValues[1], 10);
          const b = parseInt(rgbValues[2], 10);
          hexValue = '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
        }
        
        const colorCardName = colorCards[i].querySelector('.acss-color-card__name');
        colorCardName.innerHTML += '<br>' + hexValue;
      }
    }
  });
</script>