取色器 - 获取 HEX、RGB 和 HSL 代码 | Morph

选择颜色，获取代码

Morph 的取色器让你以可视化方式选择任意颜色，并即时读取你实际会用到的代码格式：HEX（`#3A7BD5`）、RGB（`rgb(58, 123, 213)`）和 HSL（`hsl(214, 64%, 53%)`）。在颜色区域内拖动，用色相滑块微调，然后把数值直接复制到你的 CSS、设计文件，或任何需要的地方。

三种格式，同一份数据源

这三种代码描述的是同一种颜色——只是写法不同，各有各的用途：

HEX 是最紧凑的写法，可粘贴到大多数 CSS 和设计工具中。
RGB 分别列出红、绿、蓝三个通道的值（各为 0–255），当你要单独调整某个通道，或代码需要分开的数值时很方便。
HSL 描述的是色相、饱和度和明度——当你想让颜色更亮一点、更柔和一点，或者微调到相邻色相时，这是最直观的格式，不用反复试错。

无论怎样调整颜色，三种代码都会同步更新，你可以随时取用项目需要的那一种。

为真实工作流而生

设计师用它敲定配色方案，把精确数值复制到设计文件或风格指南中。前端开发者用它为按钮取一个 HEX 值，或把设计师给的 RGB 转换成 HSL 来制作悬停状态。无论是调整主题、图表颜色还是邮件模板，都能精准锁定色调，一键复制。由于 HSL 就在 HEX 旁边，制作基础色的深浅变体比盯着十六进制数字瞎猜要容易得多。

在你的浏览器中运行，完全私密

取色器完全是浏览器端代码——颜色运算和界面都在你的设备上运行。没有上传，无需账号，也不会有任何数据发送到服务器。它加载迅速，页面打开后即使离线也能继续使用，因为选取颜色和计算代码从来不需要联网。

几点实用说明

复制 HEX 值后可以直接粘贴到 CSS 中使用。如果需要带透明度的颜色，转换成 RGB 并在代码中加上 alpha 通道（`rgba(...)`）即可。要打造统一的配色方案，可以选定一个基础色，保持色相和饱和度不变，只上下微调 HSL 的明度值，生成深浅不同的变体——这样一组颜色看起来才像同一个系列，而不是随意拼凑。

使用方法

选择颜色 — 在颜色区域内拖动以设置饱和度和明度，然后用色相滑块设定基础色。
查看代码 — 拖动时 HEX、RGB 和 HSL 数值会同步更新，随时都能看到当前颜色的三种代码。
复制所需格式 — 大多数 CSS 和设计工作复制 HEX，调整通道用 RGB，制作深浅变体用 HSL。
粘贴到你的项目中 — 把数值直接放进你的样式表、设计工具或主题设置中。

常见问题

它能提供哪些颜色格式？

每选一种颜色，它都会显示 HEX、RGB 和 HSL，三者始终保持同步，你可以复制项目所需的任意格式。

为什么要用 HSL 而不是 HEX？

HSL 能让你更直观地调整颜色——提高明度得到浅色调，降低明度得到深色调，或者调整色相——都不用去猜十六进制数字。

能获取带透明度的颜色吗？

选好颜色后复制 RGB 数值，在代码中以 rgba(...) 的形式加上 alpha 通道，即可设置想要的透明度。

它会把我的数据发送到别处吗？

不会。取色器完全在你的浏览器中运行，没有上传，也不会有任何数据发送到服务器——加载完成后甚至可以离线使用。

如何搭配出统一的配色方案？

选定一个基础色并使用它的 HSL 数值，保持色相和饱和度不变，只上下微调明度，就能生成风格统一的深浅变体。