免费工具
免费的 UI 设计工具。
用 Codex 做设计时那些日常小事的免费工具：挑选颜色、生成 Tailwind 或 shadcn 主题、检查对比度、写 DESIGN.md、准备图片。每个工具都在浏览器里运行，不上传内容，也不用注册。
工具
- 图片格式转换：PNG、JPG、WebP 互转PNG、JPG 和 WebP 互相转换，一次可以转多张，还能对比文件大小。
- 从图片提取配色把任意图片的主色提取成 HEX 色值，按占比从高到低排列。
- 颜色对比度检测按 WCAG 2.2 的 AA 和 AAA 标准检查文字颜色和背景颜色。
- DESIGN.md 生成器把颜色、字体和间距变成给 Codex 用的 DESIGN.md。
- 配色生成器从任意颜色生成五个和谐的颜色，锁定喜欢的，复制为 HEX、Tailwind 或 DESIGN.md。
- Tailwind 色阶生成器把一个颜色变成 50 到 950 的色阶，在 OKLCH 里计算，复制为 Tailwind v4 的 @theme。
- OKLCH 颜色转换HEX、rgb()、hsl() 和 OKLCH 互相转换，超出 sRGB 时给出提示。
- shadcn 主题生成器从一个颜色生成完整的浅色和深色 shadcn/ui 主题，实时预览。
它们怎么配合使用
- 选定颜色：生成一组配色，或者从你喜欢的照片、截图、设计稿里提取。再把主色做成完整的 shadcn 主题或 Tailwind 色阶。
- 检查文字是否看得清：用对比度检测确认这些颜色上的文字够清楚。
- 全部写进 DESIGN.md：用生成器把颜色、字体和间距写成文件，让 Codex 的每个界面都用同一套规范。
- 转换图片格式：把成品页面用到的图片转成 WebP，加载更快。