调色板

不只可以在线调色,在 HEX、RGB、HSL 任一输入框输入颜色时,其他色码格式也会自动同步。

提示:支持粘贴 #RGB / #RRGGBB、rgb(...)、hsl(...) 格式。

格式不正确,请检查输入。
格式不正确,请检查输入。
格式不正确,请检查输入。

在线调色器

拖动颜色选择器或 RGB 滑块,色码会实时同步
79
70
229
  1. 使用线上调色器点击选色,或拖拉 RGB 三色滑块微调颜色。
  2. 或直接在 HEX、RGB、HSL 任一字段粘贴色码。
  3. 修改任一字段后,其他所有格式会实时同步转换。
  4. 点击「复制 HEX」、「复制 RGB」或「复制 HSL」按钮,将色码复制到剪贴板。

提示:支持 #RGB、#RRGGBB、rgb(...)、hsl(...) 等常见输入格式;也可点击「随机颜色」获取灵感。

何时会用到?

  • 设计稿交接、前端开发或品牌色整理时,需要快速在 HEX、RGB、HSL 之间互转。
  • 想微调一个颜色,但不确定改哪种数值格式更顺手时。
  • 需要把色码直接复制到 CSS、设计工具、演示文稿或文档中时。

HEX、RGB、HSL 有什么区别?

HEX 常用于前端与设计交付,RGB 直接反映红绿蓝数值,HSL 则更适合理解色相、饱和度与明度。它们只是不同表示法,指向的可以是同一个颜色。

我应该用哪一种格式来调整颜色?

如果你想精准粘贴进代码,HEX 很方便;要细调某一色光比例时,RGB 直观;要做一整组色调明暗变化时,HSL 通常更好调。实际工作里很多人会混合使用。

为什么我输入一半就显示格式错误?

因为系统会实时验证输入是否已经形成完整可解析的色码。如果只是暂时还没输完,补完整后通常就会正常同步,不代表数据被清掉或损坏。

随机颜色功能适合做什么?

它很适合用来找灵感、快速试色,或打破原本只在熟悉色域内思考的习惯。找到喜欢的颜色后,再用其他字段慢慢微调会更有效率。

这个工具能帮我判断颜色对比或无障碍吗?

这个页面主要专注在选色与格式转换,不是对比判断工具。如果你要检查文字与背景是否足够可读,建议搭配站内的 contrast-checker 一起使用。

你可能也需要