Webleb - HTML UI Elements - Círculo do seletor de cores

HTML

CSS

body {
  background-color: #121212;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
  font-family: 'Arial', sans-serif;
  color: white;
  overflow: hidden;
}

.color-circle {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: conic-gradient(
    #e74c3c, #f39c12, #f1c40f, #2ecc71, #1abc9c, #3498db, #9b59b6, #8e44ad, #34495e
  );
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-top: 50px;
}

.color-circle:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
}

.info-box {
  position: absolute;
  top: 500px;
  width: 100%;
  font-size: 20px;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  display: none;
}

.color-name {
  font-size: 24px;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.color-code {
  font-size: 18px;
  font-family: monospace;
  color: #f39c12;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.percentage {
  font-size: 20px;
  font-weight: bold;
  color: #00ff00;
  margin-top: 10px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  display: none;
}

JS

const colorCircle = document.getElementById('colorCircle');
const colorInfo = document.getElementById('colorInfo');
const colorName = document.getElementById('colorName');
const colorCode = document.getElementById('colorCode');
const percentage = document.getElementById('percentage');

const colors = [
  { name: 'Red', code: '#FF0000' },
  { name: 'Orange', code: '#FFA500' },
  { name: 'Yellow', code: '#FFFF00' },
  { name: 'Green', code: '#008000' },
  { name: 'Cyan', code: '#00FFFF' },
  { name: 'Blue', code: '#0000FF' },
  { name: 'Indigo', code: '#4B0082' },
  { name: 'Violet', code: '#8A2BE2' },
  { name: 'Pink', code: '#FFC0CB' },
  { name: 'Magenta', code: '#FF00FF' },
  { name: 'Golden Yellow', code: '#F1C40F' },
  { name: 'Turquoise', code: '#1ABC9C' },
  { name: 'Emerald Green', code: '#2ECC71' },
  { name: 'Caribbean Blue', code: '#1F77B4' },
  { name: 'Gray', code: '#BDC3C7' },
  { name: 'Dark Slate Blue', code: '#2C3E50' },
];

const savedColor = localStorage.getItem('selectedColor');
if (savedColor) {
  const savedColorObj = JSON.parse(savedColor);
  colorCircle.style.backgroundColor = savedColorObj.code;
  colorName.textContent = savedColorObj.name;
  colorCode.textContent = savedColorObj.code;
  colorInfo.style.display = 'block';
}

colorCircle.addEventListener('click', (e) => {
  const rect = colorCircle.getBoundingClientRect();
  const x = e.clientX - rect.left - rect.width / 2;
  const y = e.clientY - rect.top - rect.height / 2;
  const angle = Math.atan2(y, x) * (180 / Math.PI) + 90;

let selectedColor = colors[Math.floor((angle + 360) / 360 * colors.length) % colors.length];
  colorName.textContent = selectedColor.name;
  colorCode.textContent = selectedColor.code;

const percentageValue = Math.floor((angle + 360) / 360 * 100);
  percentage.style.display = 'block';
  percentage.textContent = `Degree: ${percentageValue}%`;

colorInfo.style.display = 'block';
  colorCircle.style.backgroundColor = selectedColor.code;

localStorage.setItem('selectedColor', JSON.stringify(selectedColor));
});

document.addEventListener('click', (e) => {
  if (!colorCircle.contains(e.target)) {
    colorInfo.style.display = 'none';
  }
});

Círculo do seletor de cores

Recomendado

um sistema criado com diretórios

Um código de Mete Han

Site da loja de calçados

HTML

CSS

JS

Recomendado

um sistema criado com diretórios

Um código de Mete Han

Site da loja de calçados

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS