设计配色

输入文本或链接，快速生成二维码并导出图片。

快速在 HEX、RGB、HSL 之间互转，适合设计与前端开发场景。

快速生成线性渐变 CSS 代码，适合设计稿和落地页开发。

快速可视化生成 CSS box-shadow 代码，支持外阴影、内阴影及多层次调整。

基于 WCAG 2.0 标准计算前景色和背景色的对比度，检查 AA/AAA 合规性。

可视化生成线性、径向、锥形 CSS 渐变，支持多色标和角度调节。

在 px、rem、em、pt、vw、vh、% 之间互转，支持自定义基准值。

生成拉丁文或中文占位文本，支持按段落、句子或词数控制数量。

通过算法和色彩理论快速生成单色、类似色、互补色和三角色调色板。

可视化调节模态背景的模糊度、透明度、边框等参数，一键生成毛玻璃（Glassmorphism）CSS 代码。

通过直接拖拽或输入参数，可视化生成 CSS 的 8 点不规则圆角（Fancy Border Radius）代码。

输入视口和期望尺寸范围，自动计算基于纯 CSS 的最佳 clamp() 响应式视口动态适应函数。

重返纯粹黑客复古美学。在前端基于自带映射库强行将英文文本组装成可以在 bash 控制台输出的大号字符文字，自带数款艺术流派风格映射。

别再到处存大量零碎小 SVG 图片文件了！将代码扔进来，采用最极致安全的 URL 编码或是传统 B64，瞬间转换为 `background-image: url(...)` 安全挂载字符串。

当老项目有一长串 `d="M10 20 L... Z"` 你完全无法理解那是根什么线。把它复制出来贴到这，它会立马用可视化网格坐标与边框解析原图状态。

极速拖拽拉伸产生出诸如 `filter: blur(2px) grayscale(100%);` 等极其复杂的复式视觉效果组合。配备实时覆盖原图的热响应。支持自由组合发现意想不到的滤镜效果。

电商高频组件：给你的卡片左上角或者右上角加一个红底白字的倾斜挂饰。本工具通过计算绝对定位与 `rotate` 交织算出无需图片的一比一角标。

想知道你的网站色调做暗黑模式的反演对比是什么样子？数学上的全逆色（255-x）不仅能推导出黑夜模式的安全色，还能快速获得对冲撞击美学的反置色谱。

针对现代极简界面设计的颜色渲染法，只需一键即可持续获取温和低饱和度的柔和配色方案，适用于背景图与图标设计。

通过专业的色彩变换矩阵滤镜，在您的图片或组件视图上盖一层模拟网。一键体验典型的诸如红绿或蓝黄患者看到的世界，审阅你的设计是否有关键颜色信息丢失阻碍操作

把单反传来的 18MB 图片瞬间压成 400KB 大小的 WEBP，所有动作全靠 `FileReader` 与原力级 Canvas Blob 处理引擎在浏览器内部瞬间抹平。绝不传去他人的网络服务器。

无需脑膜炎发作的查 MDN。直观拖拽选择 Flex direction 与 Justify Content 系列属性对抗。实时在右侧 Canvas 看到你的积木是如何排列、挤压或环绕堆叠的。包含 `gap` 测试。

用最粗暴直白的方式划分横竖行列，并设置沟槽（Gap）。迅速拿到能够直接构建如管理后台 Layout 或电商橱窗画廊的 `display: grid` 参数。自带 Holy Grail 三栏布局等快速挡位。

提供了 CSS 标准库定义的所有光标（Cursor）状态！无需查文档，把你的鼠标在卡片上划过去即可亲自体验在浏览器上到底是 `not-allowed` 还是 `no-drop` 更符合此刻拖拽失败的语境。

一张表看完！极其丝滑宏大的 Tailwind CSS 全线色彩面板（由 Slate 一直到 Rose，含 950 黑阶）。不再每次都需要跑回官网查 "emerald-400 的对撞色是多少"。

复制一段别人的远古 `.class { display: flex; margin-top: 16px; }`，它将会使用正则探针嗅探尽量匹配还原成 Tailwind 的 `flex mt-4` 紧凑类。

将诸如 `class=`、`for=` 以及没有闭合短标签的灾难级原生大段 HTML，自动重整为完美的 `className`、`htmlFor` 及全部自闭合就位等待提交的 React 标准 JSX。

不需要在冗长的系统颜文字列表里翻找了！精读全网 Web Dev 仓库里那些写 Commit、写提示语必备的高级/科技类核心图案池（火、火箭、修马桶、禁止、勾勾...）点即拷。

空格用怎么拼？版权号 `©` 怎么写代码里？涵盖数学符号、货币与控制版面的常见 HTML 安全脱逃 Entity （`&...;` 与其 `&#...;` 版）超大平铺总览图册。

通过著名数学「生日悖论」逼近法则，演算你给出的短随机数（如 32Bits）、在业务发行巨大发行数量并逼近时产生冲突“撞车”而酿灾的极限物理概率。

W3C 规范级 CSS 万维网颜色字典速查表。无需使用复杂的 RGB，即刻检索诸如 Tomato、Cyan 等可直接内嵌于浏览器样式的极简颜色名。

作为开发，你拿到了一个蓝色的 `<svg>` 图标但你需要它变红，却又不会用 Illustrator？这个工具利用 DOM 虚拟树直接抓取并暴露所有图层颜色的十六进制调色板。改完直接吐出完美新代码！

选定基准色后，按互补色、类似色、三角配色等经典色彩理论自动生成和谐配色方案，并提供实时 UI 预览。

交互式调节 margin、padding、border 和内容尺寸，实时展示盒模型结构和实际占用空间，并生成对应 CSS 代码。

在页面上展示精确的像素刻度标尺，可切换水平和垂直方向，同时显示窗口尺寸和设备像素比等屏幕信息。

实时显示当前窗口宽度对应的 CSS 框架断点，支持 Tailwind CSS、Bootstrap 和 Material UI 预设。

选择任意颜色后，自动匹配最接近的 CSS 标准命名颜色，展示色差距离排序的候选列表。

上传两张图片后进行像素级对比，用红色高亮标记差异区域，显示差异度百分比和差异像素数量。

同时检查多组前景色/背景色的 WCAG 对比度比值，显示 AA/AAA 等级评定和实时文本预览。

通过四个角的控制点颜色生成柔和的渐变网格背景效果，可调节模糊程度，输出 CSS 代码。