Design Tools
10 tools
Design helpers for colors, fonts, CSS, aspect ratios, mockups, and visual materials. Useful when testing UI ideas, preparing assets, or checking layout details.
How to choose a tool
Start with the tool closest to your task, then use the related tools near the bottom of each page when the workflow continues. Each tool page includes features, usage steps, and FAQs so users can understand what the tool does before relying on the result.
Design Tools
Color Palette Extractor
Automatically extract dominant colors from images. Copy HEX/RGB values.
Font Comparison
Compare fonts side by side. Adjust size, weight, and line height.
SVG Previewer
Instant SVG code preview. PNG export supported.
CSS Gradient Generator
Generate gradient CSS with a visual editor.
CSS Flexbox Playground
Visualize Flexbox property effects. CSS code output.
Unix Timestamp Converter
Convert between Unix timestamps and date/time. Current time display.
Radix Converter
Convert between binary, octal, decimal, and hexadecimal. Real-time conversion.
Sitemap Generator
Generate XML sitemaps from URL lists. Download supported.
Meta Tag Generator
Generate OGP, Twitter Card, and other meta tags via form input.
Lorem Ipsum生成
ダミーテキストを単語・文・段落単位で生成。日本語対応。