Webleb - UI Elements - Color Picker Circle

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

Color Picker Circle

Recommended

Multicolor login form

How to animate background-color

CSS Circle Animation HTML Snippet

HTML

CSS

JS

Recommended

Multicolor login form

How to animate background-color

CSS Circle Animation HTML Snippet

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS