设计
面向界面实现的一组工具：颜色格式互转与调色板生成、WCAG 对比度检查、渐变与阴影、SVG 背景图案、Flexbox 与 Grid 布局、缓动曲线与 CSS 动画，以及 px 与 rem 换算。
10 个工具
设计
-
颜色转换器
在 HEX、RGB、HSL 及其他色彩格式之间进行转换，便于设计、前端开发和保持视觉一致性。
打开工具 -
渐变生成器
可视化创建 CSS 渐变，调整类型、角度、中心点、颜色停靠点和透明度，用于 UI 背景、组件状态和品牌视觉。
打开工具 -
阴影生成器
可视化调节 CSS box-shadow 的偏移、模糊、扩散、颜色和透明度，支持多层阴影、内阴影与发光，实时预览并复制可上线代码。
打开工具 -
对比度检查
检查文字、图标、按钮和 UI 组件在背景上的对比度，判断是否符合 WCAG AA / AAA 可访问性要求。
打开工具 -
调色板生成器
从一个主色生成 OKLCH 色阶、配色方案、中性色、推荐文字色、CSS 变量和 JSON 色板数据。
打开工具 -
SVG 背景图案生成器
可视化生成可平铺的 SVG 背景图案，支持圆点、网格、斜线、三角、波浪等图形，复制 CSS 或下载独立 SVG。
打开工具 -
Flexbox 与 Grid 布局生成器
可视化搭建 Flexbox 弹性盒和 CSS Grid 网格布局，实时预览排列效果并复制可直接使用的 CSS。
打开工具 -
三次贝塞尔曲线生成器
拖动控制点可视化绘制 CSS 三次贝塞尔缓动曲线，实时预览动效并复制 transition 缓动函数。
打开工具 -
CSS 动画生成器
从淡入、滑入、缩放、引起注意和旋转等效果库中挑选 CSS 关键帧动画，实时预览并复制 @keyframes 关键帧与 animation 简写。
打开工具 -
px 转 rem 换算器
在可调根字号下换算 px、rem、em、pt、%，生成模块化字号阶梯与流式 clamp()，还能一键把整段 CSS 里的 px 批量转为 rem。
打开工具
关于这个分类
现代 UI 工作处在设计 Token 与真实 CSS 之间的来回切换中。设计稿用 HEX 给到、设计师习惯看 HSL、代码里又改用了 OKLCH，与此同时无障碍审查还要看对比度——而这些可能都指向同一种颜色。颜色之外，间距、层级、缓动和字号同样要从设计稿翻译成能跑起来的 CSS。
这些工具把转换、生成与审查放在一起。你可以在不同颜色格式之间转换、按 WCAG 阈值检查对比度、从单一品牌色生成一套感知上均匀的调色板，也可以拼渐变和多层阴影、试 Flexbox 与 Grid 的各项属性、用贝塞尔曲线调缓动、把关键帧动画搭出来，再按根字号把 px 换算成 rem。每一步都能直接复制出可用的 CSS。
在这里你可以做什么
-
颜色、调色板与对比度
在 HEX、RGB(A)、HSL(A)、HSV、OKLCH 之间互转，从一个品牌主色推出感知均匀的色阶，并按 WCAG 的 AA、AAA 阈值校验前景与背景。
-
渐变、阴影与图案
可视化调线性、径向和锥形渐变与多层阴影，生成可平铺的 SVG 背景图案，直接复制可用于生产的 CSS。
-
布局与动画
Flexbox 与 Grid 的各项属性都能边调边看效果，用三次贝塞尔曲线调缓动，再把关键帧动画拼出来并复制 CSS。
-
px 与 rem 换算
按根字号在 px、rem、em 之间换算，生成字号阶梯和 clamp() 流体尺寸，批量转换整段 CSS，并给出无障碍缩放下的实际表现。