前端与设计
配色、阴影、字体与尺寸规范：前端与设计师的日常小工具。
前端与设计
CSS 圆角生成
可视化调整 border-radius 并生成代码。
打开工具 →
前端与设计
盒子阴影调试
可视化调试 box-shadow 效果。
打开工具 →
前端与设计
文本阴影调试
可视化调试 text-shadow 效果。
打开工具 →
前端与设计
CMYK 对照表
CMYK 与 RGB 颜色对照表。
打开工具 →
前端与设计
中间色计算
计算两种颜色的渐变中间色。
打开工具 →
前端与设计
相反色计算
计算颜色的反色与补色。
打开工具 →
前端与设计
中国传统色
中国传统色彩名称与色值大全。
打开工具 →
前端与设计
头像生成器
挑部件配色捏卡通头像，导出 PNG 与矢量 SVG。
打开工具 →
前端与设计
网页字体测试
预览 font-family 在不同系统下的渲染效果。
打开工具 →
前端与设计
屏幕 PPI 计算
按分辨率与尺寸计算屏幕 PPI。
打开工具 →
前端与设计
Web 尺寸规范
常见浏览器可视区域与设计尺寸规范。
打开工具 →
前端与设计
KeyCode 对照
键盘按键与 KeyCode 码值对照，支持按键实测。
打开工具 →
前端与设计
前端快捷键
常用编辑器与浏览器调试快捷键速查。
打开工具 →
前端与设计
px 与 rem 转换
按根字号实时互转，支持整段 CSS 批量转换与 1px 边框保留。
打开工具 →
前端与设计
代码转图片
代码转带语法高亮的图片，十余种语言、明暗主题与窗口装饰，导出 PNG。
打开工具 →
前端与设计
徽章生成器
shields.io 风格 SVG 徽章，自定义左右文字、配色与 flat/plastic 样式。
打开工具 →
前端与设计
条形码生成
Code 128、EAN-13、UPC、Code 39、ITF-14 等 15 种码制，导出 SVG/PNG。
打开工具 →
前端与设计
App 图标生成
一张方图出 iOS、Android、PWA 与 favicon 全套尺寸，打包 zip 下载。
打开工具 →
前端与设计
CSS 渐变生成
可视化调线性、径向、锥形渐变，多色标拖拽，附 24 组现成配色。
打开工具 →
前端与设计
颜色名对照与配色
CSS 148 个颜色名与日本传统色对照，并由一个基色推出整套配色方案。
打开工具 →
前端与设计
色盲模拟器
上传图片，对照常见色觉缺陷下的近似视觉效果。
打开工具 →
前端与设计
颜色对比度检测
WCAG 2.2 前景背景对比度计算，检查文字与控件 AA / AAA 标准，实时预览并推荐达标文字色。
打开工具 →
前端与设计
SVG 清理与优化
移除 SVG 注释、编辑器元数据、脚本和外部引用，保留矢量图形并导出清理结果。
打开工具 →
前端与设计
图片主色提取
分析图片主要颜色与占比，生成 HEX / RGB 色板和 CSS 变量，可下载色板数据。
打开工具 →