2022 年面向 Web 设计师的 50 个基于 Web 的微型工具

色调工具
用于处理颜色的简单开源工具箱。 它包括，颜色混合、混合、转换、修改、详细信息等等。

薄荷
该工具使用机器学习来创建独特的配色方案。

颜色名称生成器
输入十六进制代码，此应用程序将为它命名，并生成 CSS 变量。

阿尔弗雷多
使用此在线 alpha 生成器创建完美的色阶。

网状·y
这个基于浏览器的工具将帮助您创建可以导出为 PNG 图像的网格渐变。

渐变
使用此在线工具创建可以多种格式导出的复杂渐变。

CSS 阴影渐变
使用此基于网络的工具复制并粘贴彩色阴影渐变或设计您自己的阴影。

鼠兔
这个基于 Web 的工具将帮助您制作漂亮的屏幕截图，您可以在社交媒体或博客文章中分享这些屏幕截图。

微博
一个免费工具，用于生成可共享的推文图像。

kod.so
此浏览器应用程序将帮助您创建漂亮的代码片段屏幕截图。

美图
另一个用于创建自定义屏幕截图的免费浏览器应用程序。

故障图像生成器
一个有用的工具，可让您创建和保存独特的故障图像。

调色板
使用这款 AI 驱动的应用程序为您的复古照片着色。

魔术橡皮擦
使用此免费工具从图像中删除不需要的项目。

装载机
为您的下一个项目准备各种加载器和旋转器。

动画师
在您的项目中使用这组现成的 CSS 动画。

盒子阴影
用于 Tailwind CSS 的精美复制和粘贴框阴影的精选集合。

香草微风
将 Tailwind CSS 元素转换为语义 CSS 的在线工具。

CSS 回旋角
这个在线工具将使用 CSS clip-path生成圆角。

设计令牌生成器
使用此工具可以快速启动您的 CSS 项目。

金属CSS
这个开源 JavaScript 库为任何设计元素增添了金属质感。

界面填充
用于您的设计项目的小型复制和粘贴占位符库。

按钮生成器
从一系列有吸引力的点击复制按钮中为您的项目选择。

用户界面按钮
在您的项目中使用的复制和粘贴 CSS 按钮样式的集合。

100 个按钮
免费收集 100 个现代 CSS 按钮设计，供您在项目中使用。

CSS检查器
使用此工具来识别冗余的 CSS 类。

在线 CSS 代码质量分析器
该工具根据一系列质量保证对您的 CSS 进行评分。

CSS 压缩器
将您的 CSS 粘贴到此应用程序中，它会缩小您的代码。

后备字体生成器
该工具将帮助您避免布局中令人讨厌的 Cumulative Layout Shift (CLS)。

排版比例计算器
使用此工具创建和谐的字体比例。

兔子字体
查看这个开源、隐私至上的网络字体平台。

无障碍网页清单
使用此清单创建可访问的网站和 Web 应用程序。

A11Y 项目清单
此清单提示您检查的问题涵盖范围广泛的残疾状况。

对比网格
此工具将帮助您测试各种颜色组合是否符合 WCAG 2.0。

可访问性非清单
在评估您网站的可访问性时，使用此列表作为参考。

了解辅助功能
一门常青的无障碍课程和参考资料，可提升您的 Web 开发水平。

随机性
使用此工具生成可随机访问的调色板。

偶像
搜索 36 个免费图标库，找到最适合您的项目的图标。

基本图标
下载这个用于产品设计和开发的基本图标集。

复制符号
寻找符号？ 该搜索引擎将提供图标、键盘快捷键和用于复制和粘贴的 CSS 内容代码。

字形应用程序
一个方便的复制和粘贴符号库，可用于您的项目。

图标
通过此搜索工具为您的项目找到完美的图标集。

马克文档
用于创建自定义文档网站的基于 markdown 的编辑器。

降价网
看看这个开源的、协作的 Markdown 编辑器，它可以直接在你的浏览器上运行。

作家
markdown 的粉丝会想要尝试一下这个最小的编辑器。

代码片段搜索
该搜索引擎将为您的查询返回相关的代码片段。

抄书
这个方便的资源包含 Web 应用程序中常用的文本。

道德设计资源
促进设计伦理的文章、组织、工具等的集合。

Heazy SVG 创作者
借助此基于浏览器的工具制作自定义 SVG。

进步
通过这个猜语言游戏测试您的编程知识。

正则表达式的类型
通过这款益智游戏测试您的 RegEx 技能。

动感
基于浏览器的自由运动图形编辑器。

元搜索引擎优化
一个免费的基于网络的工具，用于为您的网站或内容快速生成元标记。

JavaScript游乐场
使用此在线工具学习和提高您的技能。