<!-- تعیین نوع سند HTML5 -->
<html lang="fa">
<!-- زبان سند را فارسی تنظیم می‌کند -->
<head>
<meta charset="UTF-8">
<title>Advanced Color Picker with Circular Palette</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
/* تنظیمات استایل بدن صفحه */
}
#palette {
width: 200px;
height: 200px;
border-radius: 50%;
cursor: crosshair;
/* تنظیمات استایل پالت رنگ دایره‌ای */
}
.slider-container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
width: 100%;
max-width: 300px;
/* تنظیمات استایل محفظه اسلایدرها */
}
label {
flex: 1;
line-height: 210%;text-align: right;
padding-right: 10px;
/* تنظیمات استایل برچسب‌ها */
}
.slider {
flex: 3;
width: 100%;
/* تنظیمات استایل اسلایدرها */
}
.slider-container span {
flex: 1;
line-height: 210%;text-align: left;
padding-left: 10px;
/* تنظیمات استایل مقادیر اسلایدرها */
}
#colorBox {
width: 100px;
height: 100px;
margin-top: 20px;
border: 1px solid #000;
/* تنظیمات استایل جعبه نمایش رنگ */
}
input[type="text"] {
margin-top: 10px;
line-height: 210%;text-align: center;
padding: 5px;
width: 100px;
/* تنظیمات استایل ورودی متنی برای نمایش کد رنگ */
}
@media (max-width: 600px) {
#palette {
width: 150px;
height: 150px;
/* تغییر اندازه پالت در صفحات کوچکتر */
}
.slider-container {
max-width: 250px;
/* تغییر اندازه محفظه اسلایدرها در صفحات کوچکتر */
}
#colorBox {
width: 80px;
height: 80px;
/* تغییر اندازه جعبه نمایش رنگ در صفحات کوچکتر */
}
input[type="text"] {
width: 80px;
/* تغییر اندازه ورودی متنی در صفحات کوچکتر */
}
}
</style>
</head>
<body>
<canvas id="palette" width="200" height="200"></canvas>
<div class="slider-container">
<label for="red">قرمز:</label>
<input type="range" id="red" name="red" min="0" max="255" class="slider">
<span id="redValue">0</span>
</div>
<div class="slider-container">
<label for="green">سبز:</label>
<input type="range" id="green" name="green" min="0" max="255" class="slider">
<span id="greenValue">0</span>
</div>
<div class="slider-container">
<label for="blue">آبی:</label>
<input type="range" id="blue" name="blue" min="0" max="255" class="slider">
<span id="blueValue">0</span>
</div>
<div id="colorBox"></div>
<input type="text" id="colorCode" readonly>
<script>
const redSlider = document.getElementById('red');
const greenSlider = document.getElementById('green');
const blueSlider = document.getElementById('blue');
const colorBox = document.getElementById('colorBox');
const colorCode = document.getElementById('colorCode');
const palette = document.getElementById('palette');
const ctx = palette.getContext('2d');
function drawPalette() {
const gradient = ctx.createConicGradient(
0, 100, 100
);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1 / 6, 'yellow');
gradient.addColorStop(2 / 6, 'lime');
gradient.addColorStop(3 / 6, 'aqua');
gradient.addColorStop(4 / 6, 'blue');
gradient.addColorStop(5 / 6, 'magenta');
gradient.addColorStop(1, 'red');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, palette.width, palette.height);
}
function updateColor() {
const red = redSlider.value;
const green = greenSlider.value;
const blue = blueSlider.value;
const hexColor = rgbToHex(red, green, blue);
colorBox.style.backgroundColor = hexColor;
colorCode.value = hexColor;
document.getElementById('redValue').innerText = red;
document.getElementById('greenValue').innerText = green;
document.getElementById('blueValue').innerText = blue;
}
function rgbToHex(r, g, b) {
return `#${Number(r).toString(16).padStart(2, '0')}${Number(g).toString(16).padStart(2, '0')}${Number(b).toString(16).padStart(2, '0')}`;
}
palette.addEventListener('click', (event) => {
const rect = palette.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const [r, g, b] = ctx.getImageData(x, y, 1, 1).data;
redSlider.value = r;
greenSlider.value = g;
blueSlider.value = b;
updateColor();
});
redSlider.addEventListener('input', updateColor);
greenSlider.addEventListener('input', updateColor);
blueSlider.addEventListener('input', updateColor);
drawPalette();
</script>
</body>
</html>