颜色选择器工具 - 掌握用于设计的 HEX、RGB 和 HSL 颜色代码
颜色是视觉设计中最强大的元素。研究表明，颜色可将品牌认知度提高高达 80%，用户会在 90 毫秒内形成初始视觉印象，其中 62-90% 仅基于颜色。无论您是网络开发人员、图形设计师还是数字营销人员，理解颜色代码都是一项基本技能。
HEX、RGB、HSL — 何时分别使用
| 格式 | 最适合 | 例子 |
|---|---|---|
| 十六进制 | CSS 样式表、可复制代码、设计交接 | #667eea |
| RGB | 不透明度控制、画布渲染、图像处理 | RGB(102, 126, 234) |
| HSL | 创建调色板，以编程方式调整亮度 | HSL(231, 77%, 66%) |
为什么设计师更喜欢 HSL 来创建调色板
HSL（色相、饱和度、亮度）是构建和谐色彩系统的最直观的格式。要创建品牌颜色的浅色版本，只需增加 L 值即可。要使其静音，请减少 S。您可以通过以相同的步长将 L 从 10 调整到 90，从单一基色生成完整的 10 色阶 - 这在 HEX 或 RGB 中是不可能直观地做到的。
色彩工作流程的专业提示
- 直接从任何屏幕元素中选取— 使用我们的吸管从浏览器窗口、图像或 UI 组件中采样颜色。
- 检查对比度— WCAG AA 辅助功能要求正文的对比度为 4.5:1。测试您的前景和背景组合。
- 构建一致的调色板— 一旦找到您喜欢的 H 值，即可在 L=10、20、30...90 处创建 9 个色调，以获得完整的设计系统令牌。
- 保存您的品牌颜色— 在 URL 中使用十六进制代码为页面添加书签，以便立即与队友共享颜色。
- 使用 HSL 实现悬停状态— 将按钮和链接悬停时的 L 变暗 10%，以保持颜色和谐。
常见问题解答
HEX #000000 和 rgb(0,0,0) 有什么区别？
它们以不同的符号表示相同的颜色——纯黑色。浏览器对它们一视同仁。 HEX更加紧凑； RGB 更明确。
我可以从图像中选择颜色吗？
是的 - 单击吸管图标并选择屏幕上的任意位置，包括浏览器渲染的图像。
为什么打印颜色看起来与屏幕颜色不同？
屏幕使用 RGB（加色）颜色模型；打印机使用 CMYK（减色法）。要获得打印准确的颜色，请使用 Adobe Color 等专业工具将 HEX 值转换为 CMYK。