快速互转 HEX 与 RGB

一边查看颜色预览,一边比较 HEX、RGB、HSL 与 CSS 数值。

🔒 100% 本地处理 ⚡ 即时处理 🚫 无需上传 🏠 全部工具
#3b82f6

边看颜色边整理 HEX 与 RGB 数值

在设计与开发协作中,HEX 和 RGB 常常会混用。DragKit 提供实时颜色预览和相互转换,方便在交付前统一颜色表达。

双向转换

可在 HEX 与 RGB 之间即时切换。

实时预览

输入颜色后立即显示效果,方便边看边调。

适合 CSS 校对

同时显示 HSL 和 CSS 值,便于开发前检查。

使用步骤

  1. 输入颜色代码 - 输入 HEX 或 RGB 数值开始转换。
  2. 查看结果 - 结合颜色预览确认显示效果。
  3. 使用需要的格式 - 复制 HEX、RGB、HSL 或 CSS 值继续工作。

常见用途

  • CSS 颜色值确认
  • 设计与开发对色
  • 品牌色格式转换

FAQ

HEX 和 RGB 该用哪一个?

两者在 CSS 中都可使用,通常按团队规范或工具习惯来决定。

可以同时看到 HSL 吗?

可以,页面中会同步显示 HSL 值。