Interactive Image Color Picker

.color-picker-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.image-section {
  position: relative;
  border: 2px dashed #ccc;
  border-radius: 8px;
  overflow: hidden;
}

.image-canvas {
  width: 100%;
  height: 300px;
  cursor: crosshair;
  display: block;
}

.color-indicator {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 2px black;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
}

.info-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.color-display {
  display: flex;
  align-items: center;
  gap: 15px;
}

.color-preview {
  width: 60px;
  height: 60px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f0f0f0;
}

.color-info {
  font-family: monospace;
}

.color-info p {
  margin: 5px 0;
}

.reset-btn {
  padding: 10px 20px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reset-btn:hover {
  background-color: #e0e0e0;
}

/* Dark mode version */
@media (prefers-color-scheme: dark) {
  .image-section {
    border-color: #555;
  }
  
  .color-preview {
    border-color: #444;
    background-color: #333;
  }
  
  .reset-btn {
    background-color: #333;
    border-color: #555;
    color: #f0f0f0;
  }
  
  .reset-btn:hover {
    background-color: #444;
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const canvas = document.getElementById('imageCanvas');
  const ctx = canvas.getContext('2d');
  const colorIndicator = document.getElementById('colorIndicator');
  const colorPreview = document.getElementById('colorPreview');
  const rgbValue = document.getElementById('rgbValue');
  const hexValue = document.getElementById('hexValue');
  const resetBtn = document.getElementById('resetBtn');
  
  // Set canvas dimensions
  function resizeCanvas() {
    const displayWidth = canvas.clientWidth;
    const displayHeight = canvas.clientHeight;
    
    if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
      canvas.width = displayWidth;
      canvas.height = displayHeight;
      drawImage();
    }
  }
  
  // Draw a sample image (in a real app, this would be a user-loaded image)
  function drawImage() {
    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Draw a gradient as sample image
    const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
    gradient.addColorStop(0, '#ff0000');
    gradient.addColorStop(0.2, '#ffff00');
    gradient.addColorStop(0.4, '#00ff00');
    gradient.addColorStop(0.6, '#00ffff');
    gradient.addColorStop(0.8, '#0000ff');
    gradient.addColorStop(1, '#ff00ff');
    
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Add some shapes for more color variety
    ctx.fillStyle = '#ffffff';
    ctx.beginPath();
    ctx.arc(canvas.width * 0.3, canvas.height * 0.3, 30, 0, Math.PI * 2);
    ctx.fill();
    
    ctx.fillStyle = '#000000';
    ctx.fillRect(canvas.width * 0.7, canvas.height * 0.7, 50, 50);
  }
  
  // Get color at specific position
  function getColorAtPixel(x, y) {
    const pixel = ctx.getImageData(x, y, 1, 1);
    const data = pixel.data;
    return {
      r: data[0],
      g: data[1],
      b: data[2],
      a: data[3]
    };
  }
  
  // Convert RGB to HEX
  function rgbToHex(r, g, b) {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
  }
  
  // Update color display
  function updateColorDisplay(color) {
    const hex = rgbToHex(color.r, color.g, color.b);
    colorPreview.style.backgroundColor = hex;
    rgbValue.textContent = `${color.r}, ${color.g}, ${color.b}`;
    hexValue.textContent = hex;
  }
  
  // Handle canvas click
  canvas.addEventListener('click', function(e) {
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    // Show indicator
    colorIndicator.style.display = 'block';
    colorIndicator.style.left = `${e.clientX}px`;
    colorIndicator.style.top = `${e.clientY}px`;
    
    // Get and display color
    const color = getColorAtPixel(x, y);
    updateColorDisplay(color);
  });
  
  // Reset the color picker
  resetBtn.addEventListener('click', function() {
    colorIndicator.style.display = 'none';
    colorPreview.style.backgroundColor = '#f0f0f0';
    rgbValue.textContent = '-';
    hexValue.textContent = '-';
    
    // Reset dark mode color
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      colorPreview.style.backgroundColor = '#333';
    }
  });
  
  // Initialize
  resizeCanvas();
  window.addEventListener('resize', resizeCanvas);
});