颜色预览

功能说明

颜色预览工具可快速查看多种颜色值的视觉效果，支持 HEX、RGB、颜色名等格式输入，每行一个颜色，点击色值即可复制，适用于设计配色参考与前端开发调色。

对比度检测基于 WCAG 2.1 标准，输入前景色与背景色即可计算对比度比值，并判断是否满足 AA（普通文本 ≥4.5、大文本 ≥3.0）与 AAA（普通文本 ≥7.0、大文本 ≥4.5）可读性标准，帮助设计师确保文字在背景上清晰可读、符合无障碍规范。

颜色历史会自动记录你预览过的颜色（本地保存），常用色板提供一组精选配色，点击即可快速填入。所有处理均在浏览器本地完成，不上传任何数据。

使用步骤

1. 在"颜色预览"框中输入颜色值（每行一个），点击"预览颜色"。

2. 在"对比度检测"中选择或输入前景/背景色，实时查看 WCAG 合规结果。

3. 点击任意色块或历史记录，可快速复制或回填颜色值。

常见问题

什么是 WCAG 对比度？

WCAG（Web 内容无障碍指南）定义了文字与背景的对比度门槛，确保弱视用户也能阅读。对比度 = (较亮颜色相对亮度 + 0.05) ÷ (较暗颜色相对亮度 + 0.05)。

支持哪些颜色格式？

支持十六进制（#1890ff）、RGB（rgb(24,144,255)）以及 140+ 种 CSS 颜色名（如 orange、rebeccapurple），由浏览器内核统一解析。

你可能还想问

在屏幕上看到的颜色和打印出来一样吗？

不一样。屏幕是加色（RGB、自发光的），印刷是减色（CMYK、反射的），鲜艳的荧光色通常印不出来；设计印刷品前先按 CMYK 预览并接受色域损失。

为什么两台显示器的同一色值不同观感？

面板类型、色域覆盖与出厂校准都会影响；涉及品牌色交付时提供色值而非截图，必要时用色卡比对，避免跨设备扯皮。

深色背景上颜色会显灰吗？

会。同一色值在不同明度背景上的感知差异很大，深底上的颜色显得更亮更饱和；做主题配色时要在实际底色上预览并成对定义色板。

相关工具

相关内容