Design tools
10 browser-based design and accessibility tools — check color contrast, simulate color blindness, preview font pairs, generate CSS code, optimize SVG, create favicons, resize icons, and more. No signup, no cloud, nothing leaves your device.
Design Tools
-
色盲仿真器
上传图片并查看绿色盲、红色盲或蓝色盲视角下的呈现,100% 在浏览器运行。
打开工具 →
-
颜色对比度检查器
检查前景与背景颜色的 WCAG 2.1 对比度比例,实时显示 AA/AAA 通过与否。
打开工具 →
-
字体配对预览
从 Google Fonts 挑选标题与正文字体,以实时示例文字一同预览搭配效果。
打开工具 →
-
CSS 阴影生成器
用实时滑杆可视化创建 box-shadow 与 text-shadow CSS,一键拷贝。
打开工具 →
-
CSS Clip Path 生成器
以交互式锚点编辑器创建 CSS clip-path 多边形,实时输出代码。
打开工具 →
-
SVG 优化
粘贴或上传 SVG 文件,移除中继数据、注解与空白以缩减文件大小。
打开工具 →
-
Emoji Favicon 生成器
将任意 emoji 转为 16、32、48、64、128、192px 的 favicon PNG,立即下载。
打开工具 →
-
图标尺寸调整
上传 PNG 或 SVG 图标,下载多种尺寸版本,适合制作 App 图标与 favicon。
打开工具 →
-
图片转图标组
将任意图片转换为完整 iOS 与 Android App 图标组,涵盖所有标准尺寸,全程在浏览器中完成。
打开工具 →
-
ASCII 艺术横幅
将文字转为 ASCII 艺术横幅,支持多种字体风格,可拷贝贴到代码或 README。
打开工具 →
Why browser-only design tools?
Design files, brand assets, and client icons are valuable intellectual property. Uploading them to a third-party service creates unnecessary risk. Every tool on this page runs entirely in your browser — paste freely, audit safely, share nothing.
From accessibility checks (color blindness simulation, WCAG contrast ratios) to code generation (CSS shadows, clip paths) to asset optimization (SVG minification, emoji favicons, icon resizing), every tool is built for the moments designers and developers need quick, private answers.
常见问题
- Do these tools upload my files anywhere?
- No. Every design tool on this page runs entirely in your browser. Your images, SVG files, and color choices never leave your device — not even temporarily.
- What is WCAG color contrast?
- WCAG (Web Content Accessibility Guidelines) defines contrast ratio thresholds for readable text. AA level requires a 4.5:1 ratio for normal text and 3:1 for large text. AAA level requires 7:1 and 4.5:1 respectively.
- Can I use generated favicons commercially?
- Yes. The Emoji Favicon Generator renders standard system emoji onto a canvas in your browser. The resulting PNG files are yours to use freely.