为什么这页值得收藏

新项目开工，配色、图标、字体、占位图总要临时找。这 25 款一次配齐，浏览器本地运行，随开随用。

上一篇讲了 CSS 效果怎么生成，这一篇讲素材本身：颜色从哪来、图形怎么画、字号行高怎么定、图片没到位时先拿什么顶上。25 款工具按四类场景分组，每一类都讲"什么时候用、怎么用出效果"。

配色：从色板到取色到规范

  • 调色板生成器：从一个主色出发，按单色、类比、互补、三角色等配色规则展开整套方案，品牌色定完，副色和点缀色顺手就有。
  • 专业取色器：屏幕取色，HEX/RGB/HSL/HSV 即时互转，带色彩历史记录，临摹别人页面配色时效率最高。
  • 色彩命名工具：给色值一个语义化名字，设计稿里"雾霭蓝"比"4A7A9B"好沟通得多。
  • Material Design色板：Material 3 官方色板参考，选组件配色时对着主色与强调色的取法直接抄。
  • Tailwind色板生成器：按 Tailwind 风格生成 50–900 色阶，接现成原子化类名体系最省事；体系本身的变化可以看《Tailwind CSS 4 新特性》。

无障碍：颜色好不好，数据说了算

SVG：路径、图标与装饰图形

  • SVG路径编辑器：可视化编辑 path 数据，弧线命令 A 的参数终于不用靠猜。
  • SVG代码编辑器：边改代码边预览，导出多种图片格式，手写的图标文件从这里出厂。
  • SVG图标库：常用图标浏览、定制、导出，改尺寸改颜色一步完成。
  • 图标字体生成器：把一组 SVG 转成 Web 字体使用，老项目想统一图标方案的可以试试，新项目建议仍优先内联 SVG。
  • SVG波浪分割线生成器：多层波浪可调波峰、波幅与颜色，两个色块区块之间的过渡装饰，一张 SVG 搞定。
  • Blob形状生成器：随机有机形状，可复现随机种子——看中的那个"不满意但好看"的形状，输入种子就能找回来，同时输出 CSS 与 SVG。

字体与排印：字号、行高、字距的节奏

  • 字体配对工具：标题体与正文体的组合预览与推荐，“思源宋配 Inter"这类搭配先看效果再落地。
  • 字体比例系统：从正文反推大标题、标题、小字的和谐字号阶，一套比例全站受用。
  • 黄金比例计算器：版面分割按 1:1.618 取值，卡片、侧栏、图文比例的分界线有了依据。
  • 行高计算器：按字号算行高，保持垂直节奏一致——行高 1.5 还是 1.7，取决于字号与行长，这里能算而不是拍。
  • 字间距工具：标题收紧、正文放开，letter-spacing 调整即时预览中文与西文的差异。

图像素材：开工第一天就该备好的图

  • 占位图生成器：按尺寸出图、可加文字，前端不用等设计稿，demo 与联调先跑起来。
  • Favicon生成器：上传一张图，产出各尺寸 favicon 与图标套件，浏览器、桌面、移动端一次覆盖。
  • OG分享卡片生成器：1200×630 社交分享卡片，模板配色本地合成导出 PNG，文章被转发时不再是一张空白卡。
  • Logo制作器：几何图形组合起稿，个人项目与小程序先有个像样的标识。
  • 图案生成器：可重复的背景图案，自定义参数，导出即用。
  • 背景图案生成器：纯 CSS 的网格、点阵、斜线底纹，不引图片也能铺出纹理背景。

彩蛋：给露脸创作者的提词器

  • 在线提词器：滚动速度、字号、镜像模式、背景色全可调，配合手机前置录制，短视频不再背稿。设计工具间里混进一位"出镜选手”，但它服务的正是做设计讲解、教程录制的你。

常见问题

配色方案和色板能保存复用吗？

本页工具以"即取即用"为主：取色器带历史记录，Blob 形状支持随机种子复现——记下种子就等于收藏了那个图形。整套品牌色建议落地为设计令牌（token）文件，Material 与 Tailwind 两款色板工具正好提供两套成熟的组织方式。

对比度检查过了 WCAG，是否就无障碍了？

颜色对比只是其中一项。色彩之外还要看焦点顺序、键盘可达、文本替代等信息层设计，两款检查工具管得住"看不看得见"，管不住"用不用得顺"，交付前建议做一次完整的走查。

小结

色板（规则生成、取色、命名、两套体系参考）、无障碍（对比度、色盲模拟）、SVG（路径、图标、波浪、Blob）、排印（配对、比例、行距、字距）、素材（占位图、favicon、OG 卡、Logo、图案）——25 款加上一个提词器彩蛋，和 CSS 篇的 25 款生成器正好合成站内设计工具间的两页总目录。开新项目的第一个下午，把这两页各开一个标签页，基本不用再搜别的了。