颜色设计

HEX ⇄ RGB ⇄ HSL ⇄ HSV ⇄ CMYK 五种互转:实时色板 + 对比度,浏览器本地

HTML 颜色代码表:147 个 CSS 命名颜色,含 hex/RGB/HSL,可搜可排。

字体搭配生成器,50+ 套精选 Google Fonts 标题 + 正文搭配,实时预览,分类筛选,导出 CSS。

WCAG 颜色对比度修复器, 输入前景/背景色, 看当前对比度 + 自动给 4 个既保留色相又达到 AA/AAA 的修复方案, 不再瞎猜。

渐变网格生成器, 4-12 个控制点双线性混合, 输出 SVG / PNG / CSS 多重 radial-gradient 兜底 (旧浏览器), 一键随机出 marketing 级背景图。

可视化 CSS 渐变生成器:线性 / 径向 / 圆锥 / 多色断点,实时预览,一键复制 CSS,导出 PNG。

可视化 CSS 投影生成器:多层、内阴影、颜色 / 模糊度调节,实时预览。

颜色混合器:任意两色按比例混合,可选 RGB / HSL / LAB 色彩空间,预测结果颜色,一键复制 hex。

圆角生成器,8 个角独立调,含 blob 不规则形状,实时预览,一键复制 CSS / SVG path。

CSS transform 生成器,rotate/scale/skew/translate (含 3D) 实时预览,一键复制 CSS,12 个预设组合。

Emoji 合成器,两个 emoji 拼一个新的,纯 Unicode 不调外部 API。内嵌 500+ 经典组合。

颜色对比度检测器,按 WCAG 2.2 标准实时判定 AA/AAA 是否过(普通文本 / 大文本)。

色盲模拟器,粘贴 hex 或上传图,看红色盲/绿色盲/蓝色盲/全色盲眼里是什么样。

CSS Grid 生成器,可视化设计网格 (行列/间距/区域),一键复制 CSS,响应式。

CSS Grid 可视化生成器, 拖动配置列/行, 用 grid-area 命名区域 (header/sidebar/main 等), 一键复制 CSS + HTML, 含 12 套常用模板。

CSS clamp() 流式字号生成器, 最小/最大字号+视口范围 自动算 clamp 公式, 一键生成完整 h1-h6+body 排版字号表, 复制 CSS / Tailwind。

CSS 系统字体栈生成器, 跨 Win/Mac/Linux/Android/iOS 完整 fallback 链, 含 CJK 中日韩兜底, 一键复制 CSS / Tailwind / SwiftUI 代码。

CSS 阴影生成器 Pro 版, 支持多层 box-shadow / text-shadow / filter:drop-shadow 三合一, 内置 Material/Tailwind/Apple/极光 4 套预设, 含暗色模式预览。

CSS 加载动画：40+ 个纯 CSS spinner/骨架屏，可调颜色、大小、速度，复制代码就能用。

可视化 CSS clip-path 生成器：polygon / circle / ellipse / inset，可拖拽控点。

Tailwind CSS 速查表,100+ 工具类(间距/颜色/flex/grid/排版/响应式),带实时预览。

社交平台视频/图片尺寸大全,小红书/B 站/抖音/微博/Instagram/YouTube 各位置精确像素和比例。

钢琴和弦查询器,输入和弦 (C / Dm / G7 / Bdim) 在键盘上高亮显示,带音名和转位。

输入一个基色,生成 Tailwind 风格 50–950 明暗色阶:逐档复制 HEX,一键导出 Tailwind / CSS / SCSS / JSON,浏览器本地

把开尔文色温换成近似 RGB 和 HEX，配实时色块和常见照明参考，全程在浏览器本地完成

一个基准色 → 互补、分裂互补、三角、四角、类比、单色六套配色,基于 HSL 色轮,逐色复制 HEX,浏览器本地

做出"真能按下去"的按钮:3D 凸起 / 拟物 / 玻璃质感,实时预览可悬停可按压,导出完整 :hover/:active CSS

拖滑块调 blur / brightness / contrast / grayscale / sepia / hue-rotate / saturate / invert / opacity + drop-shadow,实时预览,一键复制 filter 字符串

可视化编排 @keyframes:增删关键帧、设 transform/opacity/颜色、实时预览、一键复制可上线 CSS,浏览器本地

CSS @media 查询 + 响应式断点生成器:Tailwind / Bootstrap / Material 预设,移动优先 vs 桌面优先,暗色模式、hover、降低动态、宽高比一站搞定。

纯 CSS 几何背景:点阵 / 网格 / 条纹 / 棋盘 / 斜纹 / 十字,实时预览, 一键复制, 零图片

可视化定制滚动条:一次导出 WebKit + Firefox 标准两套 CSS,实时预览,一键复制,纯浏览器本地

把任意 CSS 选择器算成 (a, b, c) 三元组,对比哪条规则在层叠中胜出,并指出是哪一位分出的胜负,浏览器本地

用 background-clip: text 把渐变填进文字本身,实时预览,可调字号字重,一键复制带 -webkit- 前缀的跨浏览器 CSS。

用 border 技巧生成纯 CSS 三角形:8 个方向、实时预览、border 与 clip-path 两种写法一键复制,浏览器本地

找出重复项并保留干净的CSS 变量，支持粘贴文本或上传本地文件。

提取、去重并导出CSS 变量，支持粘贴文本或上传本地文件。

转换CSS 变量，支持粘贴文本或上传本地文件。

校验并解释CSS 变量，支持粘贴文本或上传本地文件。

规范化、排序并整理CSS 变量，支持粘贴文本或上传本地文件。

填两个 HEX 颜色, 算出感知色差 ΔE。CIE76 / CIE94 / CIEDE2000 三种公式, 还给出大白话解读, 浏览器本地运算

Flexbox 实战 Playground:在真实 flex 容器上调每一个容器/子项属性, 直接复制对应 CSS。flex-direction、justify-content、align-items、gap、order、flex-grow/shrink/basis、align-self 全覆盖。100% 浏览器本地。

用 φ = 1.618 切分任意长度：长短两段、黄金序列、字号阶、布局分栏、黄金矩形，纯浏览器本地

找出重复项并保留干净的十六进制颜色，支持粘贴文本或上传本地文件。

提取、去重并导出十六进制颜色，支持粘贴文本或上传本地文件。

转换十六进制颜色，支持粘贴文本或上传本地文件。

校验并解释十六进制颜色，支持粘贴文本或上传本地文件。

规范化、排序并整理十六进制颜色，支持粘贴文本或上传本地文件。

解析、编辑并生成 Google Fonts CSS2 链接、HTML preconnect 标签、@import、CSS 变量与 Tailwind 字体配置。

图片裁剪工具,拖框裁剪,固定比例 (1:1/16:9/9:16/4:3) 切换,缩放、旋转,完全本地处理。

图片格式转换,JPG ↔ PNG ↔ WebP ↔ AVIF 互转,批量处理,透明背景智能填充,完全本地。

图片改尺寸,JPG/PNG/WebP 按像素/百分比/预设比例缩放,完全本地处理不上传。

图片加水印,文字或图片水印,9 宫格位置、透明度、平铺模式,支持批量。

OKLCH ⇄ HEX、RGB、HSL,跑完整 sRGB → OKLab → OKLCH 管线,带实时色块和 sRGB 色域提示,浏览器本地

RGB 和 HEX 转 CMYK 印刷色值，也能 CMYK 反算回 RGB，实时色块加一键复制，全程在浏览器里跑

生成圆润有机的 blob 形状,复杂度 / 随机度 / 种子可调,导出 SVG 与 CSS clip-path,100% 浏览器本地

为落地页生成平滑的 SVG 波浪分隔,波浪数 / 振幅 / 层数 / 种子可调,上下翻转,导出 SVG 与 CSS,浏览器本地

选基准字号 + 比例(纯四度、黄金比例…)即得整套模块化字号阶,px / rem 双单位、实时大字预览,一键导出 CSS / Tailwind / SCSS,全程浏览器本地