Click HTML element to get its color codes. Drops this snippet into browser Console. This works but there is a bug. Bugfix may or may not come one day.

elemental-colors.js

let popupCount = 1; // Initialize popup count

document.querySelectorAll('*').forEach(element => {
  let popup; // Declare popup outside the event listeners

  element.addEventListener('click', (event) => {
    if (popup && popup.parentNode) {
      document.body.removeChild(popup); // Remove previous popup
    }

    // Create popup with title
    popup = createPopup(element, event.type, popupCount);

    // Position the popup
    positionPopup(popup, element);

    // Add popup to the document
    document.body.appendChild(popup);

    // Prevent default link behavior
    if (element.tagName === 'A' && element.href) {
      event.preventDefault();
    }

    // Drag and drop functionality
    addDragAndDrop(popup);

    popupCount++; // Increment popup count
  });
});

// Helper functions

function createPopup(element, eventType, popupNumber) {
  const styles = window.getComputedStyle(element);
  const colorCodes = [];

  // Add color codes to the array
  colorCodes.push({
    name: 'color',
    value: styles.color,
    pseudo: '',
    box: `<div style="background-color: ${styles.color}; width: 20px; height: 20px; border: 1px solid black;"></div>`
  });

  colorCodes.push({
    name: 'background-color',
    value: styles.backgroundColor,
    pseudo: '',
    box: `<div style="background-color: ${styles.backgroundColor}; width: 20px; height: 20px; border: 1px solid black;"></div>`
  });

  colorCodes.push({
    name: 'border-color',
    value: styles.borderColor,
    pseudo: '',
    box: `<div style="background-color: ${styles.borderColor}; width: 20px; height: 20px; border: 1px solid black;"></div>`
  });

  // Add pseudo-elements
  for (let i = 0; i < colorCodes.length; i++) {
    colorCodes[i].pseudo = `::${colorCodes[i].name.replace('-', '')}`;
  }

  // Create popup element
  const popup = document.createElement('div');
  popup.style.position = 'absolute';
  popup.style.backgroundColor = 'white';
  popup.style.padding = '10px';
  popup.style.border = '1px solid black';
  popup.style.zIndex = '1000'; // Ensure it's on top
  popup.style.boxShadow = '2px 2px 5px rgba(0, 0, 0, 0.2)'; // Add a shadow for better visibility
  popup.style.cursor = 'move'; // Set cursor to move icon

  // Add title to the popup
  const title = document.createElement('h3');
  title.textContent = `Element Details - ${eventType} - ${popupNumber}`;
  popup.appendChild(title);

  // Add color codes to the popup
  colorCodes.forEach(color => {
    const line = document.createElement('div');
    line.innerHTML = `${element.tagName} ${color.pseudo}: ${color.value} ${color.box}`;
    popup.appendChild(line);
  });

  // Create close button
  const closeButton = document.createElement('button');
  closeButton.textContent = 'Close';
  closeButton.style.marginTop = '10px';
  closeButton.addEventListener('click', () => {
    if (popup && popup.parentNode) {
      document.body.removeChild(popup);
    }
  });
  popup.appendChild(closeButton);

  return popup;
}

function positionPopup(popup, element) {
  const rect = element.getBoundingClientRect();
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;
  const popupWidth = popup.offsetWidth;
  const popupHeight = popup.offsetHeight;

  // Calculate adjusted position to prevent off-screen display
  popup.style.top = `${rect.top + window.scrollY}px`;
  popup.style.left = `${rect.left + window.scrollX}px`;

  // Adjust left position if popup goes off-screen to the right
  if (rect.left + popupWidth > viewportWidth) {
    popup.style.left = `${rect.right - popupWidth}px`;
  }

  // Adjust top position if popup goes off-screen to the bottom
  if (rect.top + popupHeight > viewportHeight) {
    popup.style.top = `${rect.bottom - popupHeight}px`;
  }
}

function addDragAndDrop(popup) {
  let isDragging = false;
  let offsetX, offsetY;

  popup.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - popup.offsetLeft;
    offsetY = e.clientY - popup.offsetTop;
  });

  document.addEventListener('mousemove', (e) => {
    if (isDragging) {
      popup.style.left = (e.clientX - offsetX) + 'px';
      popup.style.top = (e.clientY - offsetY) + 'px';
    }
  });

  document.addEventListener('mouseup', () => {
    isDragging = false;
  });
}