这个 RGB 调色板工具具有以下特点：
直观的色彩控制：三个颜色滑块（红、绿、蓝）分别用对应颜色标识，可精确控制 0-255 范围内的颜色值。
实时反馈：调整滑块时，颜色显示区域会立即更新，同时显示当前颜色的 HEX 代码。
用户友好功能：
颜色数值实时显示
一键复制 HEX 代码功能
复制成功的视觉反馈
根据颜色亮度自动调整文字颜色，确保可读性
精致的视觉设计：
现代简约的 UI 风格
卡片式布局带有微妙阴影和悬停效果
滑块和按钮有平滑的过渡动画
颜色变化时有轻微的缩放动画增强反馈感
响应式设计：适配从手机到桌面的各种屏幕尺寸，保证在任何设备上都有良好的使用体验。
您可以直接使用这个工具来选择和创建任何 RGB 颜色，并获取对应的 HEX 代码用于设计或开发工作中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGB Color Picker</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<!-- Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
accent: '#F59E0B',
dark: '#1E293B',
light: '#F8FAFC'
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.slider-thumb {
@apply appearance-none w-5 h-5 rounded-full cursor-pointer transition-all duration-200;
}
.slider-track {
@apply appearance-none h-2 rounded-lg outline-none;
}
.color-display {
@apply w-full aspect-square rounded-xl shadow-lg transition-all duration-300 ease-out;
}
.hex-display {
@apply text-2xl font-bold px-4 py-3 rounded-lg bg-dark/5 border border-dark/10 text-center transition-all duration-300;
}
.slider-container {
@apply relative w-full p-4 bg-white rounded-xl shadow-md transition-all duration-300 hover:shadow-lg;
}
}
</style>
</head>
<body class="font-inter bg-gradient-to-br from-light to-slate-100 min-h-screen p-4 md:p-8 flex flex-col items-center justify-center">
<div class="max-w-2xl w-full mx-auto">
<!-- 标题区域 -->
<header class="text-center mb-8">
<h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-dark mb-2">RGB Color Picker</h1>
<p class="text-slate-500">Adjust the sliders to create your perfect color</p>
</header>
<!-- 颜色显示区域 -->
<div class="mb-8">
<div id="color-display" class="color-display bg-gray-200"></div>
</div>
<!-- HEX 代码显示 -->
<div class="mb-8">
<div class="flex items-center gap-3">
<input type="text" id="hex-code" class="hex-display flex-1" value="#808080" readonly>
<button id="copy-btn" class="bg-primary hover:bg-primary/90 text-white px-4 py-3 rounded-lg transition-all duration-300 flex items-center gap-2">
<i class="fas fa-copy"></i>
<span>Copy</span>
</button>
</div>
<p id="copy-message" class="text-center mt-2 text-green-500 opacity-0 transition-opacity duration-300">Copied to clipboard!</p>
</div>
<!-- 滑块控制区域 -->
<div class="space-y-6">
<!-- 红色滑块 -->
<div class="slider-container">
<div class="flex justify-between items-center mb-2">
<label for="red" class="font-medium text-red-500 flex items-center gap-2">
<i class="fas fa-circle"></i>
Red
</label>
<span id="red-value" class="text-lg font-bold">128</span>
</div>
<input
type="range"
id="red"
min="0"
max="255"
value="128"
class="slider-track w-full bg-red-100"
style="accent-color: #EF4444;"
>
</div>
<!-- 绿色滑块 -->
<div class="slider-container">
<div class="flex justify-between items-center mb-2">
<label for="green" class="font-medium text-green-500 flex items-center gap-2">
<i class="fas fa-circle"></i>
Green
</label>
<span id="green-value" class="text-lg font-bold">128</span>
</div>
<input
type="range"
id="green"
min="0"
max="255"
value="128"
class="slider-track w-full bg-green-100"
style="accent-color: #10B981;"
>
</div>
<!-- 蓝色滑块 -->
<div class="slider-container">
<div class="flex justify-between items-center mb-2">
<label for="blue" class="font-medium text-blue-500 flex items-center gap-2">
<i class="fas fa-circle"></i>
Blue
</label>
<span id="blue-value" class="text-lg font-bold">128</span>
</div>
<input
type="range"
id="blue"
min="0"
max="255"
value="128"
class="slider-track w-full bg-blue-100"
style="accent-color: #3B82F6;"
>
</div>
</div>
<!-- 页脚 -->
<footer class="mt-12 text-center text-slate-400 text-sm">
<p>RGB Color Picker Tool © 2023</p>
</footer>
</div>
<script>
// 获取DOM元素
const redSlider = document.getElementById('red');
const greenSlider = document.getElementById('green');
const blueSlider = document.getElementById('blue');
const redValue = document.getElementById('red-value');
const greenValue = document.getElementById('green-value');
const blueValue = document.getElementById('blue-value');
const colorDisplay = document.getElementById('color-display');
const hexCode = document.getElementById('hex-code');
const copyBtn = document.getElementById('copy-btn');
const copyMessage = document.getElementById('copy-message');
// 更新颜色显示和HEX代码
function updateColor() {
// 获取当前滑块值
const r = parseInt(redSlider.value);
const g = parseInt(greenSlider.value);
const b = parseInt(blueSlider.value);
// 更新数值显示
redValue.textContent = r;
greenValue.textContent = g;
blueValue.textContent = b;
// 转换为HEX代码
const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
// 更新颜色显示
colorDisplay.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
// 添加颜色变化动画
colorDisplay.classList.add('scale-[1.02]');
setTimeout(() => {
colorDisplay.classList.remove('scale-[1.02]');
}, 200);
// 更新HEX代码显示
hexCode.value = hex;
// 根据颜色亮度调整文字颜色
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
hexCode.style.color = brightness > 128 ? '#000' : '#fff';
hexCode.style.backgroundColor = brightness > 128 ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.1)';
}
// 复制HEX代码到剪贴板
function copyToClipboard() {
hexCode.select();
document.execCommand('copy');
// 显示复制成功消息
copyMessage.style.opacity = '1';
setTimeout(() => {
copyMessage.style.opacity = '0';
}, 2000);
// 按钮动画
copyBtn.classList.add('scale-95', 'bg-green-500');
setTimeout(() => {
copyBtn.classList.remove('scale-95', 'bg-green-500');
}, 200);
}
// 添加事件监听器
redSlider.addEventListener('input', updateColor);
greenSlider.addEventListener('input', updateColor);
blueSlider.addEventListener('input', updateColor);
copyBtn.addEventListener('click', copyToClipboard);
// 初始化颜色显示
updateColor();
// 美化滑块样式
const style = document.createElement('style');
style.textContent = `
input[type="range"]::-webkit-slider-thumb {
@apply slider-thumb bg-red-500 hover:bg-red-600 hover:scale-110;
}
#green::-webkit-slider-thumb {
@apply slider-thumb bg-green-500 hover:bg-green-600 hover:scale-110;
}
#blue::-webkit-slider-thumb {
@apply slider-thumb bg-blue-500 hover:bg-blue-600 hover:scale-110;
}
/* Firefox */
input[type="range"]::-moz-range-thumb {
@apply slider-thumb bg-red-500 hover:bg-red-600;
}
#green::-moz-range-thumb {
@apply slider-thumb bg-green-500 hover:bg-green-600;
}
#blue::-moz-range-thumb {
@apply slider-thumb bg-blue-500 hover:bg-blue-600;
}
input[type="range"]::-moz-range-track {
@apply slider-track;
}
`;
document.head.appendChild(style);
</script>
</body>
</html>
版权属于：agoniegirl
本文链接：https://sucaibaoku.com/index.php/archives/3/
本站未注明转载的文章均为原创，并采用
CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！
