Círculo do seletor de cores

765 Anes_unk

Abrir no Editor Publique Seu Código

Recomendado

21 July 2025

Entrada de upload de arquivo com ícone SVG

11 September 2025

Jogo de tiro HTML5 Canvas com placar

17 July 2025

Modelo HTML de painel do Atelier de Alta Costura

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';
  }
});

Recomendado

Entrada de upload de arquivo com ícone SVG

Jogo de tiro HTML5 Canvas com placar

Modelo HTML de painel do Atelier de Alta Costura

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS