设计配色

在浏览器本地将文本或链接生成二维码，支持调整尺寸并导出图片，适合活动入口、落地页分享、海报印刷与线下物料扫码，内容不上传服务器。

在浏览器本地解析二维码内容，支持上传图片、粘贴图片 URL 或打开相机扫描，适合读取截图二维码、校验远程二维码链接与现场扫码场景。

在浏览器本地将颜色在 HEX、RGB、HSL、HWB、CMYK 与 CSS 变量之间转换，支持取色器与随机色，适合设计稿取色、写样式和对齐品牌色。

可视化调节偏移、模糊、扩散、颜色、透明度和内阴影，实时预览并生成 box-shadow CSS，适合卡片、按钮和浮层阴影调试。

按 WCAG 2.0 计算前景色与背景色的对比度，检查正文与大字在 AA/AAA 下是否达标，适合无障碍配色与前端可读性验收。

可视化生成线性、径向与锥形 CSS 渐变，可调节角度、色标位置并添加多个色标，适合背景、按钮和品牌色过渡设计。

在 px、rem、em、pt、vw、vh、% 之间换算，可自定义根字号、父元素字号与视口宽高，适合响应式与设计稿转代码。

按单色、类似色、互补色、三角色或完全随机规则生成调色板，可锁定个别色块后继续随机，适合 UI 探索与品牌色衍生。

可视化调节模糊、透明度、背景色与边框透明度，生成带 webkit 前缀的毛玻璃 CSS，适合卡片、导航栏与模态层样式。

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

根据最小/最大视口宽度与目标尺寸范围，计算 clamp() 公式，用于字号、间距等随视口线性缩放的响应式排版。

将英文与数字转为终端可用的 ASCII 字符画，适合 CLI 启动横幅、MOTD 与 README 纯文本标题，生成后可直接复制。

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

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

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

可视化生成卡片四角倾斜丝带角标 CSS，可改文案、颜色、偏移、宽度与字号，适合商品卡热卖、缺货等状态标记。

按 RGB 通道计算 255 减值得反相色，支持对比预览、示例图层与 CSS 变量片段导出，适合评估暗色方案与反色映射。

在浏览器本地生成低饱和粉彩与莫兰迪风格调色板，可选数量与风格并导出 HEX 列表或 CSS 变量，适合图表、背景与柔和 UI。

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

在浏览器本地调整图片尺寸与质量并导出，基于 Canvas 处理，不上传原图，适合压缩封面、缩略图与上传前体积控制。

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

可视化设置行列数与间距，生成 display:grid 基础样式，适合后台布局、卡片栅格与等分轨道草稿，可直接复制到项目中调整。

枚举常见 CSS cursor 关键字，悬停预览、搜索筛选并复制 cursor 声明，适合拖拽、缩放与禁用态光标选型。

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

将单块 CSS 声明尽量映射为 Tailwind 工具类，常见布局、间距与颜色可匹配到标准类，复杂值会退回任意值写法，适合把样例样式迁到 utility-first。

在线将 HTML 转为 React JSX，自动把 class、for 改为 className、htmlFor，补齐自闭合标签，并尽量把内联 style 转为对象写法，转换在浏览器本地完成。

检索并复制开发文档、提交说明与 Changelog 常用的 Emoji，按关键词快速定位警示、进度与状态类符号，减少在系统面板中翻找。

查阅常见 HTML 实体与数字编码对照，覆盖空格、货币、数学与版式符号，适合在源码中安全写入特殊字符并避免直接粘贴异常符号。

按生日悖论近似公式估算给定哈希位数与样本量下至少发生一次碰撞的概率，用于评估短 ID、校验截断等场景的空间是否够用，计算在浏览器本地完成。

查阅 W3C/CSS 标准具名颜色与对应色值，可按关键词筛选 Tomato、Cyan 等可直接用于样式的颜色名，适合原生 CSS 快速取色。

粘贴 SVG 代码后提取 fill/stroke 色值形成可编辑色盘，改色即时预览并输出新 SVG，适合图标换色与简单矢量改色。

选定基准色后，按互补、类似、三角、四角、分裂互补或单色系规则生成配色方案，提供 UI 预览与 CSS 变量，适合品牌与组件配色。

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

在页面内绘制可切换方向的像素刻度标尺，可调长度与刻度间距，并显示窗口尺寸与设备像素比，适合核对 CSS 像素尺寸。

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

在浏览器本地匹配最接近的 CSS 标准命名色，按色差排序展示候选色名与色值，适合写样式时对齐关键字、查找近似命名色与学习 CSS 颜色名。

在浏览器本地对两张图片做像素级对比，用红色高亮差异区域并统计差异像素与占比，适合 UI 回归截图比对、设计稿版本核对和修改前后对比。

一次检查多组前景色与背景色的 WCAG 对比度，显示 AA/AAA 等级与文本预览，适合设计系统配色验收、品牌色批量核验和无障碍审核。

用四个角控制点颜色叠加径向渐变并调节模糊，生成柔和网格渐变背景并输出 CSS，适合落地页背景、品牌视觉和柔和多色过渡实验。

调节颜色、透明度、模糊与描边参数，预览并生成毛玻璃卡片 CSS，适合调试 backdrop-filter、半透明面板与导航层视觉，浏览器本地完成。

按背景色、距离与模糊生成新拟态内外阴影 CSS，可预览凸起与凹陷效果，适合按钮、卡片和浅色界面控件的视觉调试与样式实验。

可视化调节 cubic-bezier 四个控制点并预览缓动曲线，生成可直接用于 transition 与 animation 的缓动函数，适合按钮动效与页面转场。

按列数、间距与项目数量生成 Tailwind Grid class 并实时预览，适合快速搭建卡片网格、原型布局与响应式列数实验。

通过预设与关键参数生成 CSS clip-path 裁剪形状并实时预览，适合斜切卡片、徽章、图片裁剪等异形布局与装饰形状。

在浏览器本地将字体文件编码为 Base64，并生成可嵌入的 @font-face 片段，适合 Demo、邮件模板和单文件页面临时内联字体。

在浏览器本地从图片提取主色并生成可复制的 HEX 调色板，图片不会上传，适合海报取色、品牌色参考以及素材主色分析等场景。

在线 css triangle 生成器：按方向、尺寸与颜色输出 border 三角形 CSS 并实时预览，适合气泡箭头与角标装饰，代码可直接复制使用。

生成点阵、条纹、棋盘格、网格等纯 CSS 背景图案，可调节颜色与尺寸并复制代码，适合页面装饰、占位纹理以及视觉设计实验。

在浏览器本地清理 SVG 中的注释、编辑器元数据与多余空白，输出更短代码，适合压缩图标、清理导出冗余和准备内联 SVG。

按宽高、背景色、文字和字号生成轻量 SVG 占位图，适合原型图片位、列表骨架与加载占位，可直接复制 SVG 代码后使用。