免费设计工具大全
本合集收录 8 款设计类免费在线工具，全部在浏览器本地运行，无需上传、无需注册、无需安装。
本分类全部工具 (8)
取色器
在线拾取颜色，HEX、RGB、HSL 互转并生成色板。
立即使用配色方案生成器
基于主色自动生成和谐配色方案，一键复制色值。
立即使用CSS 渐变生成器
可视化生成线性/径向渐变，实时预览并复制 CSS 代码。
立即使用颜色对比度检查
检查前景与背景色对比度是否符合 WCAG AA/AAA 标准。
立即使用颜色格式转换
HEX、RGB、HSL、HSV、CMYK、OKLCH 实时互转，保留透明度并一键复制。
立即使用CSS 圆角生成器
四角滑杆与花瓣 blob 模式调节圆角，实时预览并复制 CSS
立即使用CSS 阴影生成器
双层 box-shadow 可视化调节，实时预览并一键复制 CSS
立即使用毛玻璃效果生成器
调节模糊、饱和与背景渐变，实时预览毛玻璃卡片并复制 CSS
立即使用关于设计工具
设计工具面向前端与视觉工作：取色、配色、CSS 渐变、对比度检查、favicon 生成。共同点是所见即所得，代码实时更新。调整渐变角度时 CSS 同步变化，取色直接给出 HEX、RGB、HSL 三种写法，对比度检查按 WCAG 标准给出 AA/AAA 结论。
一个渐变、一组色板或一个网站图标，往往只是几行 CSS 或一张小图。本地生成即时预览，满意后复制代码或下载文件，省掉打开设计软件再导出的往返。对比度检查还能在开发阶段拦住浅灰字配白底这类可读性问题。
怎么挑选适合的设计工具
- 配色从主色出发
从一个品牌色出发，用色板生成器按单色、近似、互补、三色关系扩散，比凭空挑五个颜色更协调。色板可一键复制 HEX 值。
- 对比度认 WCAG 等级
WCAG 要求正文对比至少 4.5:1，大字号至少 3:1。达不到就加深或提亮一方，不要靠肉眼估计。
- 渐变直接复制代码
工具给出的 CSS 可直接粘贴使用，Chrome、Edge、Firefox 等现代浏览器无需前缀。预览与代码严格一致。
- favicon 多尺寸生成
不同场景请求的尺寸不同：标签页用 16 或 32 像素，触屏设备用更大尺寸。一次生成多档 PNG，避免图标模糊。
设计的常见误区
- 对比度只看深浅
对比度是亮度比，不是颜色深浅。两个饱和色可能不足 3:1，两个灰阶反而达标。用工具按 WCAG 比值核对。
- 配色越多越丰富
同一页面超过三四种主色就开始互相打架。先用一个主色加一个强调色，确有需要再扩展。
- 渐变色标随意加
色标位置决定过渡是否自然。等距色标常在中段发灰，错开位置或用 OKLCH 插值更顺。