从颜色输入到可复制的 CSS
1. 转换颜色。打开「颜色转换」,在 color 输入 #176b50,把 target 选为 all 并运行。结果会给出 #176b50、rgb(23, 107, 80) 与 hsl(160.7, 64.6%, 25.5%),以及记录下来的误差阈值。
2. 检查对比度。打开「对比度检查」,前景填 #000000、背景填 #ffffff、alpha 填 50。工具会先按你选定的不透明背景把半透明前景合成为 #808080,再计算约 3.98:1。普通文字 AA 要求 ≥4.5:1,大字(≥18pt/24px 常规或 ≥14pt/~18.66px 粗体)AA 要求 ≥3:1;结论前提是纯色不透明文字放在纯色不透明背景上,图片、渐变与半透明叠层不在适用范围内。
3. 生成渐变。angle 只接受 0、90、180;依次填写 color0/position0、color1/position1(最多 5 组,位置必须严格递增)。例如 #176b50 0% 与 #e8f3ec 100% 在 90 度下得到 background-image: linear-gradient(90deg, #176b50 0%, #e8f3ec 100%);。
4. 生成阴影。勾选 inset,填入偏移、模糊、扩散和颜色,得到 box-shadow: inset 2px 4px 8px 0px #17211c;。预览与复制的文本来自同一个受控序列化函数,且有快照与解析验证测试。
5. 分享色板。分享按钮只把公开颜色值写进 URL(?lang=&tool=&palette=),不会放入文档正文。粘贴整段 CSS 或含 url(、</style>、expression(、@import 的字符串会被明确拒绝。