免费在线设计工具

面向设计师和开发者的色彩与设计实用工具。使用 HEX/RGB/HSL/CMYK 转换选取颜色、生成 CSS 渐变、检查 WCAG 无障碍对比度、创建调色板并在屏幕上测量。

为什么使用在线设计工具？

快速的色彩决策、无障碍检查和渐变生成是设计与前端开发中的常见任务。拥有浏览器工具意味着你可以检查对比度或生成渐变，而无需打开 Figma、Photoshop 或单独的桌面应用。我们的设计工具即时、准确，且始终免费。

无障碍与 WCAG 合规

Web 内容无障碍指南（WCAG）要求文本与背景颜色之间达到最低对比度：AA 级别下，普通文本为 4.5:1，大号文本为 3:1。我们的对比度检查器会针对所有 WCAG AA 和 AAA 标准即时给出通过/不通过的结果。打造无障碍产品并非可选——对比度检查器让你在设计阶段而非事后就能轻松验证合规性。

颜色格式参考

HEX（#RRGGBB）

Web 设计中最常见的格式。用于 CSS、HTML 和设计工具。便于直接复制粘贴到代码中。示例：#0070f3

RGB（R, G, B）

指定红、绿、蓝通道，取值 0–255。在 CSS 中写作 rgb(0, 112, 243)。适合以编程方式创建颜色变体。

HSL（H, S%, L%）

色相（0–360°）、饱和度（0–100%）、亮度（0–100%）。对人最直观。在 HSL 中创建更亮或更暗的颜色变体很容易。在 CSS 中写作 hsl(211, 100%, 48%)。

CMYK（C%, M%, Y%, K%）

用于印刷设计。青、品红、黄和黑（Key）通道。将你的屏幕颜色转换为最接近的 CMYK 等效值以准备印刷。

常见问题

无障碍需要多大的对比度？

WCAG AA（大多数无障碍法律要求的级别）要求普通文本 4.5:1，大号文本 3:1（18pt/24px 常规或 14pt 粗体）。AAA 将其提高到 7:1 和 4.5:1。对比度检查器会同时显示这四个阈值。

在 CSS 中我应该使用哪种颜色格式？

静态品牌色使用 HEX，需要透明度时使用 RGBA，生成色调或主题时使用 HSL。这三者描述的是相同的颜色——取色器会同时显示任意颜色的 HEX、RGB、HSL 和 CMYK。

这些设计工具是免费的吗？

是的。每个色彩和设计工具都完全免费，无需账户或注册。它们在你的浏览器中运行，是打开 Figma、Photoshop 或桌面应用处理快速任务的快捷替代方案。

我可以在 HEX、RGB、HSL 和 CMYK 之间转换吗？

可以。取色器会将任意选定颜色同时转换为全部四种格式，生成一系列色调，并显示在白色和黑色背景上的 WCAG 对比度。