颜色选择器
颜色格式详解
HEX
十六进制颜色码（如 #FF5733），由 # 加 6 位十六进制数组成，分别代表红、绿、蓝通道。广泛用于 CSS 和网页设计，是最通用的颜色表示法。
RGB / CSS rgb()
红、绿、蓝三通道各取 0-255 值。直观易懂，适合程序化调色，CSS 中可用 rgb() 函数。屏幕显示的原生色彩模型。
HSL / HSB
色相(H 0-360)、饱和度(S 0-100%)、亮度/明度(L/B 0-100%)。HSL 更符合人类感知，便于创建色彩方案和渐变。HSB（也叫 HSV）在设计软件中更常见。
CMYK
青(C)、品红(M)、黄(Y)、黑(K) 四色印刷模型。专用于印刷行业，当颜色需要从屏幕输出到纸张时必须转换为 CMYK，以确保印刷色彩准确。
色彩理论基础
色彩理论围绕色轮展开：原色（红、黄、蓝）不可由其他颜色混合而成；二次色（橙、绿、紫）由两个原色等量混合得到；三次色（如红橙、蓝紫）由一个原色加一个相邻二次色混合而成。互补色（色轮对角）对比强烈，类似色（相邻 30 度内）协调统一，三等分色（间隔 120 度）则兼具活力与平衡。
FAQ
- HEX 和 RGB 有什么区别？
- 它们表达的信息完全相同，只是写法不同。HEX 用十六进制（#FF0000），RGB 用十进制（255, 0, 0）。HEX 更紧凑，常用于 CSS；RGB 更易阅读和计算。
- 为什么我的设计在屏幕上和打印出来的颜色不同？
- 屏幕使用 RGB 加色模型（光混合），印刷使用 CMYK 减色模型（颜料吸收光线）。两种模型的色域不同，部分鲜艳的 RGB 颜色超出了 CMYK 可表达的范围，因此打印时会出现偏差。
- HSL 和 HSB (HSV) 有什么区别？
- 两者都用色相和饱和度，但第三个分量不同。HSL 的 L（亮度）中 50% 为纯色，0% 为黑、100% 为白；HSB 的 B（明度）中 100% 为纯色或白色，0% 为黑。HSL 在 CSS 中原生支持，HSB 在 Photoshop 等设计工具中更常见。
- 什么是 HWB 颜色格式？
- HWB 代表色相(Hue)、白度(Whiteness)、黑度(Blackness)。它比 HSL 更直觉化——选一个色相，然后加入白色或黑色来调节。CSS Color Level 4 规范已支持 hwb() 函数，现代浏览器均可使用。
💬 留言讨论
常见问题
HEX、RGB 和 HSL 颜色有什么区别？ +
HEX（#FF5733）简洁，用于 HTML/CSS。RGB（255, 87, 51）指定红/绿/蓝通道 0-255，混色直观。HSL（色相 0-360°、饱和度%、亮度%）最接近人类直觉，通过调整亮度轻松创建明暗变体。
如何为网站创建配色方案？ +
从一个主品牌色开始。用色轮找互补色（180°对面）、类似色（±30°）或三分色（间隔 120°）。遵循 60-30-10 法则：60% 主中性色、30% 辅助色、10% 强调色。测试对比度确保无障碍访问。
什么是 WCAG 颜色对比度，为什么重要？ +
WCAG（网页内容无障碍指南）要求正常文字与背景对比度至少 4.5:1，大字体至少 3:1。低对比度让视觉障碍人士无法阅读，也会影响 SEO。
如何将 Pantone 色号转换为 HEX？ +
Pantone 颜色是物理油墨标准，没有完美的数字对应（屏幕是 RGB，印刷是 CMYK）。大多数 Pantone 色卡列出最近似的 CMYK/RGB/HEX 对应值，用本工具的颜色转换器进行视觉微调。
深色模式 UI 最适合用什么颜色？ +
避免纯黑（#000000），使用深灰（#121212 到 #1e1e1e）。文字用米白（#e0e0e0）而非纯白。与浅色模式相比降低 10-20% 饱和度。主色应更亮（HSL 亮度更高），以在深色背景上保持足够对比度。