All Tools About Blog MCP Server — Use tools from AI agents
Workflows Paste Anything — Smart Detector Tool Pipeline Builder Bulk / Batch Processor
JSON Tools JSON Formatter & Beautifier JSON Validator JSON to CSV Converter JSON to TypeScript Generator JSON to Python Converter JSON Flatten & Unflatten jq Playground — JSON Processor JSON Mock Data Generator JSON Schema Validator JSONPath Evaluator JSON Schema Generator JSON Patch / Diff Generator
Encoding Tools Base64 Encoder / Decoder URL Encoder / Decoder Hash Generator (MD5/SHA) JWT Decoder HTML Entity Encoder / Decoder Image to Base64 Converter String Escape / Unescape Tool ASCII / Binary / Hex Converter Protobuf Decoder — Wire Format Viewer Encoding Detective — Mojibake Repair
Formatters HTML Beautifier XML Formatter & Validator SQL Formatter & Beautifier CSS Minifier & Beautifier JavaScript Minifier & Beautifier TOML Formatter & Converter YAML Formatter, Validator & Minifier
Generators UUID Generator Password Generator QR Code Generator Lorem Ipsum Generator Cron Expression Generator chmod Calculator Slug / URL Generator .gitignore Generator
Testing Tools Regex Tester Regex Explainer — Plain English
Security Tools HMAC Generator Content Security Policy Generator SSH Key Generator SSL Certificate Decoder CORS Header Builder & Generator
Design Tools Color Picker & Converter Placeholder Image Generator SVG Path Editor & Visualizer
Comparison Tools Diff Checker / Text Compare .env Diff & Merge
Converters JSON-YAML Converter Epoch / Unix Timestamp Converter Markdown to HTML Preview Curl to Fetch/Axios Converter Tailwind CSS Converter OpenAPI to TypeScript Text Case Converter Number Base Converter CSV Viewer & Editor Date & Time Format Converter SQL to MongoDB & N1QL Converter Semver Calculator & Comparator Byte / Size Calculator URL Parser & Builder Glob to Regex Converter Math Expression Evaluator SQL DDL to TypeScript Converter Duration / Time Calculator CSS Unit Converter — px, rem, em, pt, vw, vh JSON to Go Struct Converter HTML to Markdown Converter CSV to SQL Converter SQL to ORM Converter
Reference HTTP Status Code Explorer Git Command Builder GraphQL Schema Explorer MIME Type Lookup
Text Tools Word & Character Counter Text Line Sorter, Deduplicator & Tools
Networking Tools Subnet / CIDR Calculator
DevOps Tools Nginx Config Generator Docker Compose Validator Robots.txt Generator & Validator GitHub Actions YAML Validator

Design Tools

Developer-focused design utilities. Pick and convert colors between formats, and generate placeholder images for your projects.

Color Picker & Converter

Pick colors and convert between HEX, RGB, and HSL formats.

Placeholder Image Generator

Generate placeholder images with custom dimensions, colors, and text. Download as SVG, PNG, or JPEG.

SVG Path Editor & Visualizer

Edit, visualize, and understand SVG path commands. Live preview with command breakdown, control points, and formatting.

Available Design Tools

Color Formats Explained

The same colour can be written several ways, and front-end work constantly moves between them. HEX (#3366ff) is compact and ubiquitous in CSS and design tools. RGB (rgb(51, 102, 255)) maps directly to how screens mix red, green, and blue and makes opacity easy with rgba(). HSL (hsl(225, 100%, 60%)) describes hue, saturation, and lightness, which is far more intuitive when you want a "slightly darker, less saturated" variant of a colour. Converting by hand is fiddly; a picker does it instantly and lets you copy whichever format your stylesheet needs.

When to Use Each Design Tool

  • Color Picker & Converter — sample a colour and convert it between HEX, RGB, and HSL, or fine-tune a shade for a design system or theme.
  • Placeholder Image Generator — create custom-sized placeholder images (SVG, PNG, or JPEG) with your own dimensions, colours, and label text while building layouts before the real assets exist.
  • SVG Path Editor & Visualizer — inspect, edit, and visualise the d attribute of an SVG path, making sense of icon and illustration path data without opening a full vector editor.

All three run entirely in your browser, so generated images and edited paths are produced locally with no uploads or watermarks.

Other Developer Tools

Paste Anything — Smart Detector Tool Pipeline Builder JSON Formatter & Beautifier Base64 Encoder / Decoder URL Encoder / Decoder JSON Validator HTML Beautifier UUID Generator

Frequently Asked Questions

What design tools are available on CodeTidy?
CodeTidy offers a color picker with HEX, RGB, and HSL conversion, plus a placeholder image generator that creates custom-sized images in SVG, PNG, or JPEG format. Both tools run entirely in your browser.
Can I use generated placeholder images in production?
The placeholder images are intended for development and prototyping. They are generated client-side and can be downloaded in multiple formats. For production, you should replace them with actual images.
Do the design tools work without an internet connection?
Once the page is loaded, all design tools work entirely offline. Color conversions and image generation happen in your browser with no server requests, so they work even without an active internet connection.
Drop file to load