设计师 · 颜色设计
精选 49 个颜色设计工具,专为设计师日常工作精选。
-
CSS 圆角生成器
圆角生成器,8 个角独立调,含 blob 不规则形状,实时预览,一键复制 CSS / SVG path。
-
CSS 投影生成器
可视化 CSS 投影生成器 —— 多层、内阴影、颜色 / 模糊度调节,实时预览。
-
CSS clip-path 生成器
可视化 CSS clip-path 生成器 —— polygon / circle / ellipse / inset，可拖拽控点。
-
色盲模拟器
色盲模拟器,粘贴 hex 或上传图,看红色盲/绿色盲/蓝色盲/全色盲眼里是什么样。
-
颜色对比度检测器
颜色对比度检测器,按 WCAG 2.2 标准实时判定 AA/AAA 是否过(普通文本 / 大文本)。
-
颜色格式转换
HEX ⇄ RGB ⇄ HSL ⇄ HSV ⇄ CMYK 五种互转 —— 实时色板 + 对比度 —— 浏览器本地
-
颜色混合器
颜色混合器 —— 任意两色按比例混合,可选 RGB / HSL / LAB 色彩空间,预测结果颜色,一键复制 hex。
-
颜色色阶生成器
输入一个基色,生成 Tailwind 风格 50–950 明暗色阶 —— 逐档复制 HEX,一键导出 Tailwind / CSS / SCSS / JSON —— 浏览器本地
-
色温转 RGB
把开尔文色温换成近似 RGB 和 HEX，配实时色块和常见照明参考，全程在浏览器本地完成
-
CSS 按钮生成器
做出"真能按下去"的按钮 —— 3D 凸起 / 拟物 / 玻璃质感,实时预览可悬停可按压,导出完整 :hover/:active CSS
-
CSS 滤镜生成器
拖滑块调 blur / brightness / contrast / grayscale / sepia / hue-rotate / saturate / invert / opacity + drop-shadow,实时预览,一键复制 filter 字符串
-
CSS Grid 网格生成器
CSS Grid 生成器,可视化设计网格 (行列/间距/区域),一键复制 CSS,响应式。
-
CSS Keyframes 动画生成器
可视化编排 @keyframes —— 增删关键帧、设 transform/opacity/颜色、实时预览、一键复制可上线 CSS —— 浏览器本地
-
CSS 加载动画生成器
CSS 加载动画 —— 40+ 个纯 CSS spinner/骨架屏，可调颜色、大小、速度，复制代码就能用。
-
CSS 媒体查询生成器
CSS @media 查询 + 响应式断点生成器 —— Tailwind / Bootstrap / Material 预设,移动优先 vs 桌面优先,暗色模式、hover、降低动态、宽高比一站搞定。
-
CSS 图案生成器
纯 CSS 几何背景 —— 点阵 / 网格 / 条纹 / 棋盘 / 斜纹 / 十字 —— 实时预览, 一键复制, 零图片
-
CSS 滚动条生成器
可视化定制滚动条 —— 一次导出 WebKit + Firefox 标准两套 CSS,实时预览,一键复制 —— 纯浏览器本地
-
CSS 优先级计算器
把任意 CSS 选择器算成 (a, b, c) 三元组,对比哪条规则在层叠中胜出,并指出是哪一位分出的胜负 —— 浏览器本地
-
CSS 文字渐变生成器
用 background-clip: text 把渐变填进文字本身 —— 实时预览,可调字号字重,一键复制带 -webkit- 前缀的跨浏览器 CSS。
-
CSS transform 生成器
CSS transform 生成器,rotate/scale/skew/translate (含 3D) 实时预览,一键复制 CSS,12 个预设组合。
-
CSS 三角形生成器
用 border 技巧生成纯 CSS 三角形 —— 8 个方向、实时预览、border 与 clip-path 两种写法一键复制 —— 浏览器本地
-
CSS 变量去重工具
找出重复项并保留干净的CSS 变量，支持粘贴文本或上传本地文件。
-
CSS 变量提取器
提取、去重并导出CSS 变量，支持粘贴文本或上传本地文件。
-
CSS 变量列表转换器
转换CSS 变量，支持粘贴文本或上传本地文件。
-
CSS 变量列表校验器
校验并解释CSS 变量，支持粘贴文本或上传本地文件。
-
CSS 变量规范化工具
规范化、排序并整理CSS 变量，支持粘贴文本或上传本地文件。
-
Emoji 合成器
Emoji 合成器,两个 emoji 拼一个新的,纯 Unicode 不调外部 API。内嵌 500+ 经典组合。
-
Flexbox 可视化 Playground 与 CSS 生成器
Flexbox 实战 Playground —— 在真实 flex 容器上调每一个容器/子项属性, 直接复制对应 CSS。flex-direction、justify-content、align-items、gap、order、flex-grow/shrink/basis、align-self 全覆盖。100% 浏览器本地。
-
字体搭配生成器
字体搭配生成器,50+ 套精选 Google Fonts 标题 + 正文搭配,实时预览,分类筛选,导出 CSS。
-
黄金比例计算器
用 φ = 1.618 切分任意长度 —— 长短两段、黄金序列、字号阶、布局分栏、黄金矩形 —— 纯浏览器本地
-
CSS 渐变生成器
可视化 CSS 渐变生成器 —— 线性 / 径向 / 圆锥 / 多色断点,实时预览,一键复制 CSS,导出 PNG。
-
渐变网格生成器
渐变网格生成器, 4-12 个控制点双线性混合, 输出 SVG / PNG / CSS 多重 radial-gradient 兜底 (旧浏览器), 一键随机出 marketing 级背景图。
-
十六进制颜色去重工具
找出重复项并保留干净的十六进制颜色，支持粘贴文本或上传本地文件。
-
十六进制颜色提取器
提取、去重并导出十六进制颜色，支持粘贴文本或上传本地文件。
-
十六进制颜色列表转换器
转换十六进制颜色，支持粘贴文本或上传本地文件。
-
十六进制颜色列表校验器
校验并解释十六进制颜色，支持粘贴文本或上传本地文件。
-
十六进制颜色规范化工具
规范化、排序并整理十六进制颜色，支持粘贴文本或上传本地文件。
-
HTML 颜色代码表
HTML 颜色代码表 —— 147 个 CSS 命名颜色,含 hex/RGB/HSL,可搜可排。
-
图片裁剪
图片裁剪工具,拖框裁剪,固定比例 (1:1/16:9/9:16/4:3) 切换,缩放、旋转,完全本地处理。
-
图片格式转换器
图片格式转换,JPG ↔ PNG ↔ WebP ↔ AVIF 互转,批量处理,透明背景智能填充,完全本地。
-
图片改尺寸
图片改尺寸,JPG/PNG/WebP 按像素/百分比/预设比例缩放,完全本地处理不上传。
-
图片加水印
图片加水印,文字或图片水印,9 宫格位置、透明度、平铺模式,支持批量。
-
RGB 转 CMYK 转换器
RGB 和 HEX 转 CMYK 印刷色值，也能 CMYK 反算回 RGB，实时色块加一键复制，全程在浏览器里跑
-
社交平台尺寸大全
社交平台视频/图片尺寸大全,小红书/B 站/抖音/微博/Instagram/YouTube 各位置精确像素和比例。
-
SVG Blob 有机形状生成器
生成圆润有机的 blob 形状 —— 复杂度 / 随机度 / 种子可调 —— 导出 SVG 与 CSS clip-path —— 100% 浏览器本地
-
SVG 波浪分隔生成器
为落地页生成平滑的 SVG 波浪分隔 —— 波浪数 / 振幅 / 层数 / 种子可调 —— 上下翻转 —— 导出 SVG 与 CSS —— 浏览器本地
-
Tailwind CSS 速查表
Tailwind CSS 速查表,100+ 工具类(间距/颜色/flex/grid/排版/响应式),带实时预览。
-
字号比例阶生成器
选基准字号 + 比例(纯四度、黄金比例…)即得整套模块化字号阶,px / rem 双单位、实时大字预览,一键导出 CSS / Tailwind / SCSS —— 浏览器本地
-
WCAG 颜色对比度修复器
WCAG 颜色对比度修复器, 输入前景/背景色, 看当前对比度 + 自动给 4 个既保留色相又达到 AA/AAA 的修复方案, 不再瞎猜。