Loading...
Loading...
免费的在线颜色选择器——可视化取色，即时获取 HEX、RGB 和 HSL 值。预览透明度色阶。
颜色选择器是网页设计师、前端开发者和数字艺术家的必备工具。数字设计中的颜色使用几种标准格式表示：HEX（十六进制）、RGB（红绿蓝）和 HSL（色相饱和度亮度）。每种格式服务于不同的目的和工作流程。
HEX（#RRGGBB）是 Web 开发中最常见的格式——简洁、熟悉、CSS 直接支持。每对字符表示从 00（0）到 FF（255）的颜色通道值。该格式可扩展为 8 字符（#RRGGBBAA）以包含透明度（Alpha）。
RGB 将颜色定义为红、绿、蓝光的组合，每个值范围 0 到 255。如果你将其理解为混合光，RGB 很直观——rgb(255, 0, 0) 是纯红色，rgb(0, 255, 0) 是纯绿色，rgb(0, 0, 255) 是纯蓝色。CSS 同时支持 rgb() 和 rgba() 函数表示法。
HSL 以更人性化的方式描述颜色：色相（0-360 度的色环角度，0/360 是红色，120 是绿色，240 是蓝色）、饱和度（0-100%，从灰度到全彩）和亮度（0-100%，从黑色到白色）。HSL 在创建调色板时通常更易用，因为你可以调整色相同时保持饱和度和亮度一致。
此颜色选择器让你直观地选择颜色，并立即查看对应的 HEX、RGB 和 HSL 值。透明度色阶条显示你的颜色在不同透明度级别下的外观——用于 UI 设计中对叠加层、阴影和分层元素等的考虑。
理解色彩和谐原则可以显著提升你的设计水平。互补色在色环上相对（如蓝色和橙色）并产生强烈对比。类似色相邻排列（如蓝色、青色和绿色）营造和谐宁静的设计。三色方案使用色环上均匀分布的三种颜色，形成鲜明而平衡的调色板。许多设计师使用 HSL 来探索这些关系，因为保持饱和度和亮度不变的同时调整色相，可以直观地看到和谐模式。
HEX 只是 RGB 的简写形式。#FF0000 等同于 rgb(255, 0, 0)。HEX 更紧凑（6 字符 vs ~12 字符），而 RGB 在考虑颜色通道强度时更易读。现代浏览器可互换接受这两种格式。
确保文本和背景之间有足够的对比度。WCAG 标准要求普通文本的对比度至少为 4.5:1，大号文本为 3:1。使用对比度检查工具配合颜色选择器来验证可访问性。
色彩空间定义设备可以显示的颜色范围（色域）。sRGB 是 Web 标准。Display P3（现代苹果设备使用）提供更广的色域。除非另有说明，CSS 中的 HEX 和 RGB 值假定在 sRGB 色彩空间中。
HSLA 与 HSL 相同但增加了透明度通道。HSL 值指定色相、饱和度和亮度。HSLA 增加了第四个值——透明度从 0（完全透明）到 1（完全不透明）。格式为 hsla(200, 50%, 50%, 0.5)。现代 CSS 支持 hsl() 和 hsla() 表示法互换使用。
从基色色相开始，系统地改变饱和度和亮度。对于 UI 调色板，使用 10% 的亮度步进从非常浅（背景）到非常深（文本）。强调色保持高饱和度，中性色调使用低饱和度。HSL 拾色器使这一过程变得直观，因为你可以锁定色相，独立调整其他两个维度。