免费颜色工具
转换颜色、生成调色板、检查无障碍对比度、模拟色盲等。
所有颜色工具
颜色转换器，免费
即时在 HEX、RGB 和 HSL 之间转换颜色。带颜色选择器的实时预览。复制 CSS 值。免费，无需注册。
免费在线配色生成器
随机或从基色生成漂亮的调色板。 锁定收藏夹、复制 HEX 代码、导出为 CSS 或图片。 免费且即时。
颜色对比度检查器，免费
检查颜色对比度比率是否符合 WCAG 2.1 无障碍标准。针对 AA 和 AAA 标准测试前景和背景颜色。免费 · 无需注册。
明暗色调生成器，免费
选择一种颜色，即时生成更浅的淡色和更深的暗色。复制 HEX、RGB 或 HSL 值。免费，在您的浏览器中运行。
颜色混合器，免费
混合两种或更多颜色，实时查看结果。获取 HEX、RGB 和 HSL 值。免费，无需注册。
色盲模拟器，免费
免费的色盲模拟器。上传图片或输入颜色，查看它们在红色盲、绿色盲等色觉缺陷人士眼中的样子。
图片取色器，免费
上传图片并点击即可提取颜色。立即获取 HEX、RGB 和 HSL 值。免费在线取色工具 · 无需注册。
HEX 转 RGB 转换器，免费
立即将 HEX 颜色代码转换为 RGB 值。支持实时预览、批量转换和可直接复制的 CSS 输出。免费，无需注册。
CSS 颜色名称查找器，免费
免费 CSS 颜色名称查询工具。输入 HEX 或 RGB 颜色，即时查找最接近的 CSS 颜色名称，附带距离值和预览。
色轮，免费
通过交互式色轮探索色彩搭配。为任意底色找到互补、类似、三元和分裂互补色。
渐变壁纸生成器，免费
创建并下载适用于桌面或手机的自定义渐变壁纸。选择颜色、角度和分辨率，并导出为 PNG。
从图片提取调色板，免费
从图片中提取主色，构建调色板。上传一张照片，获取 HEX、RGB 和 HSL 格式的主要颜色。
无障碍调色板生成器，免费
生成符合 WCAG 2.2 对比度要求的调色板。每种组合实时根据 AA 和 AAA 标准进行测试。
关于我们的颜色工具
Absolutool 为设计师、开发者和无障碍专业人员提供 7 款专业颜色工具。在 HEX、RGB、HSL 和 HSB 格式之间转换。使用色彩理论生成协调的调色板。检查 WCAG 对比度，确保您的设计对所有人都无障碍。
色盲模拟器使用 Brettel/Viénot 研究矩阵精确模拟 8 种色觉缺陷 · 上传图像或测试单个颜色。使用色调生成器创建设计系统的色彩 token、用调色器进行精确混合，并用图像取色器从任何照片中提取颜色。所有工具都完全在您的浏览器中运行。
Web 上的颜色模型
现代网页上的每个像素都由一个颜色值描述，浏览器会解释它并请求 GPU 进行渲染。你最常看到的两种格式是 HEX（一个六位的十六进制三元组，如 #3b82f6）和 RGB（十进制值，如 rgb(59 130 246)）。两者描述的是同一件事：在使用加色法的屏幕上要混合多少红光、绿光和蓝光。标准的 24 位显示屏每个通道提供 256 个等级，这意味着可寻址的独特颜色多达 1678 万种。HEX 更短，RGB 更便于计算，两者可以互换。
HSL（色相、饱和度、亮度）和 HSB（色相、饱和度、明度）描述的是同一种屏幕颜色，但采用更接近人类感知方式的坐标。色相是颜色在色轮上从 0°（红）到 360° 的位置。饱和度表示颜色有多鲜艳，从灰到完全纯净。亮度控制混入多少白色或黑色。HSL 是设计师在构建设计系统时通常会选择的格式，因为调整单个通道会产生可预测的变化，比如把按钮在悬停状态下调暗 10%。CSS 原生支持 HEX、RGB、HSL，以及较新的 LCH 和 OKLCH。
在所有这些格式背后是一个色彩空间，它精确定义了“红色 255”在物理上意味着什么。Web 的默认值是 sRGB，由 IEC 于 1996 年标准化，几乎所有台式机和手机显示屏都能覆盖这个色域。较新的 Apple、OLED 和高端设备支持 Display P3，这是一个更宽的色域，增加了大约 25% 更饱和的红色和绿色。CSS 现在允许你写 color(display-p3 1 0 0) 来加以利用。本网站上的大多数颜色工具在 sRGB 中工作并能触及每一个浏览器；P3 在不改变工作流程的情况下扩展了可用范围。
理解 WCAG 颜色对比度
《Web 内容无障碍指南》（WCAG 2.1）为文本与其背景之间的对比度设定了数值阈值。AA 级是大多数无障碍审核的目标，要求普通文本至少达到 4.5:1，大号文本至少达到 3:1（18 pt 常规或 14 pt 粗体及以上）。AAA 级把这些收紧到 7:1 和 4.5:1。该比值由每种颜色的相对亮度计算得出，相对亮度是一个感知亮度值，通过 IEC 61966-2-1 公式从 sRGB 原色推导而来。两种看起来“几乎一样”的颜色仍可能通过，而两种看起来完全不同的颜色如果一种是灰底上的灰，则可能不通过。
这些数字之所以重要，是因为全球大约 5% 的成年人口由于白内障、青光眼、糖尿病视网膜病变或与年龄相关的黄斑变化而具有可测量的对比敏感度下降。明亮的户外阳光会为所有人降低有效对比度。斜视角度看的移动屏幕会进一步降低对比度。WCAG 的阈值旨在让文本在这些真实条件下保持可读，而不是在光线昏暗的办公室里的色彩校准显示器上。一种名为 APCA 的较新算法（将在 WCAG 3.0 中作为候选替代）会考虑 WCAG 2.x 忽略的东西，比如文本的字重和极性。目前，4.5:1 AA 仍然是大多数监管机构所参照的标准。
色盲与包容性设计
北欧血统的人中，大约8% 的男性和 0.5% 的女性有某种形式的红绿色觉缺陷，全球数字在规模上也相似。三种最常见的类型会影响视网膜中的视锥细胞如何对特定波长作出反应。绿色弱（最常见，约占男性的 5%）降低对中波长绿光的敏感度。红色弱降低对长波长红光的敏感度。蓝色弱影响蓝黄感知，并且要罕见得多。本网站的模拟器使用 Brettel、Viénot 和 Mollon（1997）的颜色矩阵推导，这是颜色科学中这些变换的标准参考。
实用的设计规则是“不要只依赖颜色”。一个红色的错误图标和一个绿色的成功图标对许多绿色弱的用户来说看起来完全相同。增加一个不同的形状（叉号对勾号）、一个标签（“错误”或“成功”）或一种图案就能解决这个问题，而对其他用户没有任何代价。图表和仪表板设计是最常见的违例者，因为图例通常依赖一个颜色色块。本网站的色盲模拟器让你在发布前透过每一种常见缺陷预览一张真实的屏幕截图，这样你就能发现那些本会在生产中失效的元素。
调色板的颜色理论
色轮按照色相围绕圆周的角度来排列：红色在 0°，黄色在 60°，绿色在 120°，青色在 180°，蓝色在 240°，品红在 300°。互补色彼此正好相对（红与青、蓝与橙），产生最强的对比。类似调色板使用色轮上相邻的两到四种色相，给人平静而统一的感觉，很适合背景和渐变。三等分调色板使用三种相隔 120° 均匀分布的色相，在多样性中提供平衡。四等分调色板使用四种构成矩形的色相。这些规则源自 19 世纪的艺术家手册，但与感知研究此后所证实的内容相符。
一个典型的品牌系统大约需要五种颜色：一种主品牌色、一种强调色（通常是互补色）、一种中性灰，再加上一个成功绿和一个错误红。本网站的调色板生成器先选择和谐方案，然后为每种选定的颜色提供 10 级的浅色和深色刻度，这与 Tailwind、Material 和 Carbon 等设计系统所用的结构相同。无障碍调色板工具把生成限制在能在白色或深色背景上满足 WCAG AA 对比度的组合上。两个工具都完全在你的浏览器中运行，因此你为尚未发布的品牌所选的颜色绝不会被发送到任何地方。
常见问题
为什么同一种颜色在不同屏幕上看起来不一样？
大多数显示器以 sRGB 色域为目标，但每块面板都有略微不同的白点校准、亮度和伽马。两台刚开箱的显示器显示 #3b82f6 时可能存在可测量的色相和亮度差异。专业设计依靠经过色彩校准的显示器（X-Rite 或 Calibrite 的硬件探头）把差异控制在容差范围内。对于日常工作，选择一个 HSL 值能让你最有机会让你所设想的颜色关系（比如一个悬停态暗 10%）在不同屏幕之间得以保留。
4.5:1 的对比度对无障碍来说总是足够吗？
这是 AA 这条线，是大多数监管机构所参照的法定最低值（美国的 Section 508、欧洲的 EAA、安大略省的 AODA）。对于可读性至关重要的文本、低视力用户、需在阳光下可读的界面或面向较年长受众的内容，请以更严格的 AAA 7:1 比值为目标。对于不是文本的界面元素（图标、按钮边框），适用 WCAG 2.1 的非文本对比度 3:1 规则。
HSL 与 HSV/HSB 有什么区别？
两者共享色相和饱和度通道，但在第三个轴上不同。HSL 的亮度围绕 50% 对称：0% 是黑，50% 是纯色相，100% 是白。HSV/HSB 的明度是不对称的：0% 是黑，100% 是不含白色的纯色相。HSL 对于需要向两端混合的设计系统更顺手。HSV 在图像编辑中更常见，因为它符合艺术家的直觉。
十六进制代码和 Pantone 或 RAL 颜色一样吗？
不一样。十六进制代码描述的是由红、绿、蓝光混合而成的屏幕颜色（加色、投射）。Pantone、RAL 及类似系统描述的是印刷在纸上的实体颜料（减色、反射）。“Pantone 286”的十六进制等价物是一种屏幕近似，而不是完美匹配，因为色域并不完全重叠。对于横跨屏幕和印刷的品牌工作，设计师通常会同时指定两者：用于印刷的 Pantone 和用于数字的十六进制。
为什么要在设计上模拟色盲？
全球大约每 12 名男性中就有 1 人有某种形式的色觉缺陷，因此任何供普通受众使用的设计都会触及无法区分某些色相的用户。一个红对绿的状态指示对他们来说可能看起来相同。在发布前把一张屏幕截图放进模拟器，会揭示设计中哪些部分只依赖颜色，这样你就可以添加标签、图标或图案，让含义在没有颜色的情况下也能传达。
这些颜色工具会把我的图像或调色板上传到任何地方吗？
不会。这一分类中的每个工具都完全在你的浏览器中运行。上传的图像由 JavaScript 在一个本地的 canvas 元素上处理，调色板数据存放在 localStorage 中，没有任何内容被发送到服务器。你可以通过打开浏览器的开发者工具，在使用任何一个工具时观察“网络”标签页来验证。你会看到的唯一请求是针对静态资源和 Google Analytics 的，绝不是你的图像字节或颜色值。