颜色格式转换
转换 HEX、RGB、HSL 与透明度，实时查看色样，并复制可直接使用的 CSS 颜色。
配色方案生成器
从基色生成互补色、邻近色、三色配色或单色深浅方案，复制 HEX 并导出 CSS 变量与 JSON。
点击色块复制 HEX。文字自动选择黑色或白色中 WCAG 对比度较高的一种，配色结果不含透明度。
工具介绍
围绕主色探索界面配色，再把选定颜色带入项目样式表。
使用说明
输入 HEX、RGB、HSL 色值或使用取色器，再选择配色模式。点击任意色块复制 HEX，整组颜色可导出为 CSS 变量或 JSON 数组。
配色按 HSL 色相偏移生成，单色模式调整明度，结果均不透明。色块文字从黑白中选择 WCAG 对比度较高者并显示比值。整组配色不代表任意两色搭配都满足无障碍要求，实际文字与背景请使用颜色对比度工具检查。
常见问题
生成的颜色组合都符合无障碍对比度吗？
不保证。色卡展示的是该背景与所选黑色或白色文字的对比度；实际设计中的前景、背景组合需要分别检查。
为什么换了配色模式，还是几乎一样的灰色？
灰色没有饱和度，仅改变色相不会产生可见的颜色差别。尝试选用饱和度更高的基色，再生成互补色、邻近色或三色方案。单色模式会调整明度，仍能得到不同深浅的灰色；导出的配色均不透明。
相关工具
在新标签页打开
评论
0