← 返回开发者工具
取色 PICK
支持 #rgb / #rrggbb / #rrggbbaa，# 可省略
支持 rgb(r, g, b) 或直接 r, g, b
支持 hsl(h, s%, l%) 或直接 h, s%, l%
预设调色板 PRESETS
渐变设置 GRADIENT
支持拖拽调整色标顺序（拖动左侧 ⠿ 手柄），每个色标可单独设置颜色与位置百分比，至少保留 2 个色标
阴影层 LAYERS
多层 box-shadow 用逗号分隔，从上到下排列即渲染层叠顺序（列表首项最先渲染，即视觉上最靠上层）
配色输入 WCAG
--: 1
AA · 普通文本（≥ 4.5:1）
AA · 大字体（≥ 3:1）
AAA · 普通文本（≥ 7:1）
AAA · 大字体（≥ 4.5:1）
示例大标题文字 Sample Text
这是一段示例正文文字，用于直观查看该配色下的可读性 The quick brown fox jumps.
相对亮度按 WCAG 2.x 公式计算：先做 sRGB 通道线性化，再加权求和 0.2126R + 0.7152G + 0.0722B；对比度 = (L1+0.05)/(L2+0.05)，L1 为较亮色的相对亮度
SHIJINZE DEVTOOLS · 纯前端离线运行，所有内容均不发往服务器