FREE TOOLS

Free tools for UI design.

Small, free tools for the everyday parts of designing with Codex: picking colors, building a Tailwind or shadcn theme, checking contrast, writing a DESIGN.md and preparing images. Each one runs in your browser, with nothing uploaded and nothing to sign up for.

The tools

• Image converter: PNG, JPG and WebPConvert images between PNG, JPG and WebP, several at a time, and compare file sizes.
• Color palette from imageGet the main colors of any image as HEX codes, most common first.
• Contrast checker for WCAG 2.2Check a text and background color against AA and AAA.
• DESIGN.md generatorTurn your colors, fonts and spacing into a DESIGN.md for Codex.
• Color palette generatorMake five harmonious colors from any color, lock the ones you like and copy them as HEX, Tailwind or DESIGN.md.
• Tailwind color palette generatorTurn one color into a 50 to 950 scale, computed in OKLCH, as a Tailwind v4 @theme block.
• OKLCH color converterConvert HEX, rgb() and hsl() colors to OKLCH and back, with a warning outside sRGB.
• shadcn theme generatorMake a complete light and dark shadcn/ui theme from one color, with a live preview.

How they fit together

1. Pick your colors: generate a palette, or pull one from a photo, a screenshot or a mockup you like. Turn your main color into a full shadcn theme or a Tailwind scale.
2. Check that text stays readable on those colors with the contrast checker.
3. Write it all into a DESIGN.md with the generator, so Codex uses the same colors, type and spacing on every screen.
4. Convert the images for the finished pages to WebP, so they load faster.

Learn the workflow

• DESIGN.md for CodexThe DESIGN.md format, a complete example, and how to make Codex follow it.
• How to design UI with CodexA six-step workflow from design brief to production code, with prompts you can copy.