颜色工具
共 16 个工具。调色、取色、配色与 CSS 视觉效果的生成与校对，直接产出可复制的色值与代码。
输入关键词即可筛选下面的工具
#
颜色格式转换
HEX / RGB / HSL 颜色互转与预览
RGB
图片取色器
从图片中吸取像素颜色
渐
CSS 渐变生成器
可视化生成线性/径向渐变，可导出 PNG
◐
颜色对比度检测
按 WCAG 算对比度，判定 AA / AAA 是否达标
配
配色方案生成器
一键生成单色、类似色、互补、三角与分裂互补配色
CBD
色盲色觉模拟
模拟色觉障碍下的配色显示效果
CN
颜色名称查询
十六进制颜色反查最接近的 CSS 颜色名
BS
CSS 阴影生成器
可视化调节并生成 box-shadow
FLT
CSS filter 生成器
可视化调节 CSS 滤镜并生成代码
THM
主题色导出
主题色令牌导出为 CSS/Tailwind/SCSS/JSON
BRD
圆角生成器
可视化生成 CSS 圆角并输出代码
CLP
CSS clip-path 生成器
可视化调节裁剪形状，实时预览并复制 clip-path
CGR
CSS Grid 生成器
可视化设置行列、间距与对齐，复制 grid 代码
FLX
Flexbox 演练场
调节主轴/交叉轴与项目属性，看图理解弹性布局
TSH
文字阴影生成器
调节偏移/模糊/颜色，实时预览并复制 text-shadow
CBZ
贝塞尔曲线生成器
拖拽控制点设计缓动曲线，复制 cubic-bezier
使用说明
颜色工具模块：调色、取色、配色与 CSS 视觉效果生成，产出可直接复制的色值与代码片段。
- 在搜索框按需要筛选（如 渐变、对比度、取色、阴影、圆角）。
- 输入或选取颜色，实时预览效果。
- 复制生成的色值（HEX/RGB/HSL）或 CSS 代码，贴进项目即可。
常见问题
- 对比度检测有什么用？
- 用于判断文字与背景的对比是否达到无障碍（WCAG）标准，避免低对比度影响可读性。
- 取色器支持图片吗？
- 支持：上传图片后可在图上取色，部分工具还能自动提取主色调。
- 生成的 CSS 兼容性如何？
- 生成的属性（渐变、阴影、clip-path 等）为主流浏览器通用写法，老旧浏览器可能需要加前缀。