免费设计工具

无需注册。使用这些工具检查无障碍性、预览 Lottie 动画、生成渐变、转换单位和创建配色方案。

工具分类

颜色工具

1. **Contrast Checker** \
   Free WCAG 2.1 color contrast checker. Test your text and background colors against AA and AAA accessibility standards. Get contrast ratio and fix suggestions instantly. \

2. **Color Converter** \
   Convert colors between HEX, RGB, HSL, and OKLCH. Generate complementary, analogous, and triadic palettes. Export as CSS variables or Tailwind config. \

3. **Gradient Generator** \
   Free CSS gradient generator with live preview. Create beautiful linear, radial, and conic gradients visually. Adjust colors, stops, and angles, then copy production-ready CSS code instantly. \

4. **Color Info** \
   Look up any hex color code for detailed conversions (RGB, HSL, OKLCH), WCAG contrast ratios, shades, tints, and the closest CSS named color. \

Lottie 动画工具

1. **Lottie Preview** \
   Free online Lottie preview tool. Upload .json or .lottie files to view, test, and check animations. Inspect frame rate, dimensions, and duration. Works as a Lottie viewer, checker, tester, and JSON animation player. \

2. **Lottie to GIF** \
   Convert Lottie JSON animations to GIF or WebM (VP9) right in your browser. Set resolution, frame rate, and quality — then download. No upload to servers, fully private. \

3. **Lottie to dotLottie** \
   Convert Lottie JSON files to the optimized dotLottie (.lottie) format. Smaller file size, same quality. Works entirely in your browser — no upload required. \

CSS 工具

1. **Unit Converter** \
   Free CSS unit converter. Convert between px, rem, em, vw, vh, %, and pt with configurable base font size and viewport dimensions. Essential for responsive web design. \

使用这些工具的好处

1. 轻松无障碍检测

2. 高效的设计预览

3. 多样的配色方案生成

立即开始使用这些工具

立即前往 Chrome 商店 了解更多功能