在线颜色选择器

什么是颜色选择器？

颜色选择器（Color Picker）是前端开发者和设计师日常使用频率最高的工具之一。它提供直观的色彩选取界面，支持通过色轮、色条、数值输入等多种方式精确指定颜色，并实时输出HEX、RGB、HSL等多种格式的颜色代码。在Web开发中，颜色是CSS样式的基础属性，准确高效地获取颜色代码是提升开发效率的关键。本工具不仅支持可视化取色，还内置了颜色格式转换功能，可以在HEX（#FF5733）、RGB（rgb(255,87,51)）、HSL（hsl(14,100%,60%)）和RGBA等格式之间自由切换，满足不同场景的使用需求。

如何使用颜色选择器

1. 选取颜色 — 在色轮上点击选取色相，在饱和度-亮度面板中微调具体色调。也可以直接在色条上拖拽选择。
2. 精确调整 — 在数值输入框中直接输入HEX、RGB或HSL值进行精确定位。支持透明度（Alpha通道）调节。
3. 复制颜色代码 — 点击需要的颜色格式即可复制对应的代码。最近使用的颜色会自动保存到历史记录中。

常见使用场景

技术原理

颜色表示涉及多种色彩空间和转换算法：

// HEX ↔ RGB 转换
function hexToRgb(hex) {
    const r = parseInt(hex.slice(1,3), 16);
    const g = parseInt(hex.slice(3,5), 16);
    const b = parseInt(hex.slice(5,7), 16);
    return { r, g, b };
}

// RGB → HSL 转换
function rgbToHsl(r, g, b) {
    r /= 255; g /= 255; b /= 255;
    const max = Math.max(r,g,b), min = Math.min(r,g,b);
    const l = (max + min) / 2;
    // 根据max和min计算色相h和饱和度s
    return { h: hue, s: saturation, l: lightness };
}

// 颜色在CSS中的使用方式
// color: #FF5733;
// color: rgb(255, 87, 51);
// color: hsl(14, 100%, 60%);
// color: rgba(255, 87, 51, 0.8);

最佳实践与注意事项

• Web开发中建议使用CSS变量定义颜色，方便全局修改和主题切换。
• 注意sRGB和Display P3色彩空间的差异，宽屏显示器上颜色可能看起来不同。
• HEX颜色值中#FFF是#FFFFFF的简写，仅当每两位相同时才能缩写。
• 考虑用户的色彩感知差异，关键信息不要仅依靠颜色区分。

常见问题