颜色与 CSS 手册：对比度、渐变和响应式样式
选择颜色格式、检查对比度和色觉差异，生成渐变、阴影、圆角、网格及流式字号。把生成的样式放回实际页面检查。
按任务选择操作
选择颜色格式、检查对比度和色觉差异，生成渐变、阴影、圆角、网格及流式字号。把生成的样式放回实际页面检查。
| 你要完成的事 | 建议从这里开始 |
|---|---|
| 检查文字可读性 | 检查实际前景色与背景色的对比度 |
| 检查图表颜色能否区分 | 把 2–12 个配色 HEX 值输入色觉差异预览，按编号比较三类模拟和灰度 |
| 生成组件外观 | 在实际背景上预览渐变、阴影和圆角 |
| 制作可平铺的网页背景 | 选择圆点、网格或斜线，下载单个 SVG 单元并按原生像素尺寸平铺 |
| 适配不同屏幕 | 输入字号和视口宽度的两组端点，设置根字号假设，再复制 rem/vw 的 clamp |
| 为宽度不确定的容器排列卡片 | 设定最小卡片宽度与间距，比较 280px 和当前宽度预览，再用真实卡片测试 |
| 同时调整多项图片滤镜 | 拖动亮度、对比度、饱和度、灰度和模糊滑块，在示例或本地图片上比较前后效果 |
按顺序执行并保留原件
先比较文字前景色与背景色组合，再放进浅色和深色情境检查。图表或界面配色应作为一组输入色觉差异预览，按顺序比较各颜色。此工具仅近似预览配色，不能检查完整图表、认证无障碍或替代文字、形状和用户测试。流式字号应设置两组字号/视口端点和根字号假设，在目标页面核对中点、窄屏换行与 200% 浏览器缩放。
制作图案背景时，先检查 SVG 平铺预览，再下载单个单元，以原生像素尺寸设置 background-repeat。百分比或非整数背景缩放可能产生接缝；最终页面还须检查文字对比度。
卡片网格使用 auto-fit 随容器宽度改变等宽列数，min(100%, 所设宽度) 可使单列适应窄容器。预览卡片只是示例；行数和内容断行仍须在目标组件核对。
CSS 滤镜要在同一图片上比较前后效果，再复制完整滤镜组合。可选本地图片只用于预览；导出的 CSS 不修改图片字节。滤镜应用于父元素时也影响子内容；此手动调整工具不反求目标 HEX 颜色。
黑对白的对比度为 21:1；实际组件仍需要清晰焦点、不只依靠颜色的提示和合适文字尺寸。区分处理成功与交付通过
在目标组件中预览 CSS 或 SVG，检查焦点、悬停和禁用状态；静态色块不能代表全部交互。
完成前检查清单
下面列出本分类各工具的具体步骤、选项和限制。展开需要的工具即可查看，不必按顺序使用全部工具。
- 在目标组件中预览 CSS 或 SVG，检查焦点、悬停和禁用状态；静态色块不能代表全部交互。
- 下载后重新打开，确认结果与示例和输入语义一致。
- 超出边界时保留原稿，拆分任务或使用适合规模的处理方式，不通过改扩展名绕过检查。
参考资料
- 颜色与设计 — 格式与实现参考
用于核对格式与处理边界；本站的具体支持范围以工具操作手册为准。
- WCAG 2.2 对颜色使用的说明
信息不能仅靠颜色传达。
- Machado 等人色觉模拟矩阵
三类严重程度 1 模拟矩阵的原始来源。
- MDN clamp() 与可访问性
说明 clamp 语法及流式文字放大的限制。
- MDN grid-template-columns
用于核对 auto-fit、repeat 和 minmax 语法。
- MDN CSS filter
用于核对滤镜函数语法和渲染行为。
本分类工具使用说明
展开工具，查看操作步骤、可调选项和支持范围，再直接进入工作区。
颜色格式转换HEX、RGB、HSL，换种写法还是同一种色。
粘贴一个 HEX、RGB(A) 或 HSL(A) 颜色，逐项复制对应的 HEX、RGB(A) 或 HSL(A) 值。支持 HEX 简写与透明度；显示的小数经过舍入。
操作步骤
- 在“HEX / RGB / HSL”中粘贴内容，也可以先填入示例试用。
- 确认输入后，点击“转换颜色”。
- 从结果行复制所需格式，或下载完整 JSON。
能力与限制
- 粘贴文本最多 1 MiB；处理后请核对结果。
颜色对比度检查比较文字和背景的颜色对比度。
先在明确的不透明底色上进行透明度合成，再计算 WCAG sRGB 对比度。阈值只适用于这对颜色，不代表整站无障碍合规。
操作步骤
- 分别输入文字色和背景色，也可以填入示例试用。
- 核对“透明颜色合成底色”，再选择“检查对比度”。
- 核对比例、合成后的颜色与 AA/AAA 文字阈值；可复制颜色或下载 JSON。
可调选项
- 透明颜色合成底色
- #ffffff
能力与限制
- 粘贴文本最多 1 MiB；处理后请核对结果。
渐变生成器调出喜欢的渐变，直接复制 CSS。
按校验后的颜色及位置生成线性或径向渐变。色标按位置排序，预览与复制的 CSS 使用同一个生成值。
操作步骤
- 调整已有色标的颜色和位置，至少保留两个；需要时可继续添加，也可在 JSON 编辑框精确调整。
- 选择线性或径向渐变。线性渐变还可设置角度，然后点击“生成渐变 CSS”。
- 核对预览，再复制或下载 CSS。
可调选项
- 渐变类型
- 线性 · 径向
- 角度
- 90
能力与限制
- 粘贴文本最多 1 MiB；处理后请核对结果。
调色板与混色按色彩规则生成调色板，或比较两个 RGB 颜色的比例混合。
用一个 HEX、RGB(A) 或 HSL(A) 种子色按规则生成可复现调色板，或按比例混合两种六位 HEX 颜色的 sRGB 通道。在目标设计中核对后，可逐项复制颜色。
操作步骤
- 在“设置”中选择生成调色板或 RGB 混色；界面只显示当前任务的参数。
- 输入基础颜色；混色时再填写第二种颜色与比例，调色板则选择配色规则。
- 核对色块后逐项复制 HEX 值，或下载完整结果。
可调选项
- 处理任务
- 生成调色板 · RGB 混色
- 配色规则
- 类似色 · 互补色 · 三等分配色 · 单色明暗
- 颜色数量
- 5
- 第二种颜色
- #ffffff
- 第二种颜色占比
- 50
能力与限制
- 粘贴文本最多 1 MiB；处理后请核对结果。
- 调色板可输入 HEX、RGB(A) 或 HSL(A)；混色需要两种六位 HEX 颜色。结果需在目标界面核对。
- 低饱和度种子色改用亮度变化，否则旋转色相难以产生可区分的颜色。
- 文件和输入仅在此浏览器中处理，无需注册。
CSS 阴影与圆角调整多层阴影，并可同时输出独立角的圆角样式。
调整多层阴影，并可同时输出独立角的圆角样式。依据 x、y、模糊、扩展、颜色和内阴影参数生成最多五层阴影。预览使用与复制结果相同的 CSS。
操作步骤
- 设置已有阴影层的颜色、偏移、模糊和扩展；需要时可再添加阴影，最多五层。
- 按需开启圆角并设置关联或独立的四个角，再生成 CSS。阴影层下方的 JSON 编辑框可选用。
- 查看 CSS 结果，确认无误后使用结果区提供的复制或下载操作。
可调选项
- 同时生成圆角
- 默认关闭
- 关联四个圆角
- 默认开启
- 单位
- 像素 · 百分比
- 左上
- 16
- 右上
- 16
- 右下
- 16
- 左下
- 16
能力与限制
- 粘贴文本最多 1 MiB；处理后请核对结果。
色觉差异预览并排比较图表或界面配色在三类色觉模拟及灰度下的变化。
粘贴图表、图例、地图或界面中的 2–12 个 HEX 颜色，同时查看红、绿、蓝色觉缺失模拟，并保存颜色对照表。
操作步骤
- 输入同一设计中的 2–12 个六位 HEX 颜色，可换行、空格或逗号分隔。
- 按相同编号顺序并排查看三类模拟及灰度参考。
- 找出可能难以区分的颜色，在设计中补充非颜色线索，并另行检查文字对比度。需要时复制或下载 CSV。
能力与限制
- 使用 Machado 等人（2009）严重程度 1 矩阵，应用于线性光 sRGB；不同设备和个人的视觉体验会有差异。
- 配色预览无法模拟完整图片，也不代表通过无障碍验收或替代真实用户测试。除颜色外，还应使用文字、形状或图案。
- 输入仅在浏览器处理。可下载包含原色和模拟 HEX 值的 CSV。
流式字号 clamp 生成器按两组字号和视口宽度生成 CSS clamp()；使用 rem 上下界，并可设定根字号假设。
输入字号开始和结束变化时的视口宽度，生成 CSS 并核对两端字号。px 转 rem 采用你填写的根字号。
操作步骤
- 输入小屏和大屏字号及其视口宽度；设计采用非 16px 根字号时修改根字号假设。
- 生成 CSS，核对起点、中点和终点的字号。
- 复制或下载 CSS，在目标页面的窄屏、宽屏及浏览器缩放状态下测试。
可调选项
- 小屏字号，px
- 16
- 大屏字号，px
- 32
- 起点视口，px
- 375
- 终点视口，px
- 1440
- 假设根字号，px
- 16
能力与限制
- px 转 rem 使用固定根字号假设；若网站根字号随视口变化，实际断点也可能移动。
- rem/vw 的 clamp 不等于无障碍通过；请在目标页面检查浏览器缩放、文字放大与重排。
- 输入仅在此浏览器中处理，无需注册。
SVG 背景图案生成下载用于网页背景平铺的圆点、网格或斜线 SVG 单元。
选择图案、尺寸和颜色，在大面积平铺预览中检查重复效果，再下载精确的单单元 SVG，并按原生像素尺寸用作 CSS 背景。
操作步骤
- 选择圆点、网格或斜线，并设置单元尺寸、圆点半径或线宽、前景色和背景色。
- 生成图案，在较大的平铺预览中检查密度与单元边界。
- 下载 result.svg，或复制 SVG 与 CSS 示例；实际使用时保持文件路径和单元的原生尺寸。
可调选项
- 图案
- 圆点 · 网格 · 斜线
- 单元尺寸，px
- 24
- 圆点半径／线宽，px
- 2
- 前景 HEX
- #0b876f
- 背景 HEX
- #f3f7f5
能力与限制
- 仅支持圆点、网格和斜线；单元为 4–200px 整数，圆点半径或线宽为 0.5px 至单元尺寸的一半，颜色须为六位 HEX。
- 保持原生尺寸平铺可使单元对齐。百分比背景尺寸或非整数缩放可能出现浏览器接缝；文字对比度需在最终页面核对。
CSS 网格生成按容器宽度生成自适应卡片网格，预览窄容器并复制 CSS。
设置卡片最小宽度与间距，在窄容器和当前可用宽度中查看有内容的卡片，再复制自动排布等宽列的 CSS。
操作步骤
- 填写卡片最小宽度、间距和预览卡片数。
- 比较 280px 窄容器与当前可用宽度下带内容的卡片。
- 生成 CSS，复制或下载，再放进目标容器核对。
可调选项
- 卡片最小宽度，px
- 220
- 间距，px
- 16
- 预览卡片数
- 4
能力与限制
- 卡片最小宽度 120–600px，间距 0–64px。预览卡片数 1–12，仅影响示例，不改变 CSS。
- auto-fit 会拉伸剩余卡片，行数由内容决定。请在最终容器里测试连续长文本。
- CSS 在此浏览器生成，无需注册。
CSS 滤镜生成叠加 CSS 图片滤镜，实时对比前后效果并复制生成的规则。
用滑块同时调整亮度、对比度、饱和度、灰度、褐色和模糊。在示例或自己的本地图片上对比前后效果，再复制 CSS。
操作步骤
- 选择快速效果，或用滑块和数字输入调整各个滤镜。
- 在示例上对比前后效果，或选择自己的本地图片用于预览。
- 生成并复制或下载 CSS，再放到目标元素上核对。
可调选项
- 亮度，%
- 100
- 对比度，%
- 100
- 饱和度，%
- 100
- 灰度，%
- 0
- 褐色，%
- 0
- 模糊，px
- 0
能力与限制
- 亮度与对比度 0–200%，饱和度 0–300%，灰度 0–100%（均为整数）；模糊 0–20px，最多一位小数。 褐色滤镜 0–100%，整数百分比；次序固定为亮度、对比度、饱和度、灰度、褐色、模糊。
- 可选最大 10 MB 的本地 PNG、JPG 或 WebP 图片，仅用于预览；输出为 CSS，不是处理后的图片。
- 滤镜顺序与目标内容会影响渲染。本工具不反求匹配目标 HEX 颜色的滤镜。