Dzzz

配色工具

调色板、渐变、格式转换与对比度检查 — 全部在你的设备上完成。

#3B82F6
#F6AF3B

完全在你的设备上运行的免费配色工具：用六种配色方案从任意基准色生成调色板，设计线性、径向或锥形 CSS 渐变并实时预览，在 HEX、RGB 和 HSL 之间转换，并对照 WCAG AA 与 AAA 阈值检查文字对比度。不会上传任何内容 — 全部可离线使用。

关于本工具

你需要提供

  • 一个 HEX 基准色，以及一种配色方案。
  • 渐变色标、渐变类型（线性、径向或锥形）和角度。
  • 用于对比度检查的两种颜色，以及文本是否为大字号。

你将获得

  • 可复制为 HEX 列表或 CSS 变量的调色板。
  • 渐变的 CSS，以及在 HEX、RGB 和 HSL 之间转换后的颜色。
  • 对比度比值，以及对照 WCAG AA 和 AAA 阈值的通过或未通过结果。

使用限制

  • 工作在 8 位 sRGB 下——只有 HEX、RGB 和 HSL，没有 CMYK 或印刷色彩配置文件。
  • 来回转换可能让某个通道偏移 1，这是正常的 8 位取整。
  • 对比度检查只针对你输入的两种颜色，不涉及设计中的其他部分。

使用方法

  1. 打开一个面板

    在标题下方的标签行中选择「调色板」、「渐变」或「转换与对比度」。

  2. 构建调色板

    在「调色板」中，用取色器或 HEX 栏设置基色，选择一种配色关系（互补、类似、三分、四分、分裂互补或单色），然后锁定想保留的色块，点按「重新生成」把其余的重新随机。

  3. 设计渐变

    在「渐变」中选择线性、径向或锥形，设置「角度（度）」——线性和锥形类型才提供——并添加或删除带位置的色标，预览和下方的 CSS 代码会随之更新。

  4. 转换并检查对比度

    在「转换与对比度」中，在 HEX、RGB 或 HSL 任一栏输入，另外两栏会跟着变；再设置文字色和背景色，勾选「大号文字」即可读到对比度以及 AA 和 AAA 判定。

  5. 复制结果

    在调色板中使用「复制 HEX 列表」或「复制 CSS 变量」，在渐变面板中使用「复制 CSS」，或使用「复制此结果的链接」来分享 URL 所携带的设置。

常见问题

如何在 HEX 和 RGB 之间转换颜色？

使用 Color Tools 的格式转换功能，可以就在你的设备上完成颜色格式之间的转换。

我能在这里检查颜色对比度是否符合无障碍要求吗？

可以，Color Tools 在格式转换功能之外还包含一个对比度检查器。

Color Tools 免费吗？它是不是全部在你的设备上运行？

是的，它可以免费使用，而且一切都在你的设备上运行。