颜色与设计

转换 HEX、RGB 和 HSL，检查颜色对比度，制作调色板、渐变、阴影、圆角、SVG 图案与响应式 CSS。预览后复制样式。

工具分类

HEX、RGB、HSL，换种写法还是同一种色。

比较文字和背景的颜色对比度。

调出喜欢的渐变，直接复制 CSS。

按色彩规则生成调色板，或比较两个 RGB 颜色的比例混合。

调整多层阴影，并可同时输出独立角的圆角样式。

并排比较图表或界面配色在三类色觉模拟及灰度下的变化。

按两组字号和视口宽度生成 CSS clamp()；使用 rem 上下界，并可设定根字号假设。

下载用于网页背景平铺的圆点、网格或斜线 SVG 单元。

按容器宽度生成自适应卡片网格，预览窄容器并复制 CSS。

叠加 CSS 图片滤镜，实时对比前后效果并复制生成的规则。

如何选择合适的工具

从实际使用界面出发。颜色要对照真实背景检查，流式字号要测试窄宽屏，网格要放入长内容。色觉预览或一对颜色通过对比度要求，只是无障碍检查的一部分。