HTMLTools

Color Palette Explorer

Generate tonal gradients, complementary, triadic, and WCAG-accessible palettes from any hex color. One-click copy.

Typography Scale

Generate a modular type scale from any base size and ratio. Export as CSS variables, Tailwind config, or SCSS.

Spacing Calculator

Generate consistent spacing tokens from any base unit using Tailwind, linear, 8-point grid, Fibonacci, or custom scales. Export as CSS, Tailwind, or SCSS.

CSS Unit Converter

Convert between px, rem, em, %, vh, vw, and pt units instantly. Perfect for responsive design with real-time calculations.

Color Contrast Checker

Check WCAG 2.1 color contrast ratios for accessibility. Test foreground and background colors for AA and AAA compliance.

Base64 Encoder/Decoder

Encode and decode Base64 strings instantly. Convert text, images, and files to Base64 or data URIs for web development.

URL Encoder/Decoder

Encode and decode URLs and query strings instantly. Multiple encoding methods including encodeURIComponent and encodeURI.

CSS Gradient Builder

Visually build linear, radial, and conic CSS gradients with live preview. Export as CSS, CSS variable, or Tailwind.

CSS Animation Builder

Create CSS animations with visual keyframe generator and timeline. Set timing, easing, and export ready-to-use @keyframes CSS code.

JSON Formatter & Validator

Format, validate, and minify JSON instantly. Inspect structure, browse the tree, sort keys, and copy clean output.

Regex Tester

Build and test regular expressions with live match highlighting, capture groups, replace output, and a quick-reference cheat sheet.

Lorem Ipsum Generator

Generate placeholder text with paragraphs, sentences, or words. Choose from classic Lorem Ipsum or fun variants like Hipster Ipsum and Bacon Ipsum. HTML tag support included.

Meta Tag Generator

Generate SEO and social media meta tags with live previews. Create Open Graph and Twitter Card tags with visual previews showing how your content will appear when shared.

Box Shadow Builder

Visually create multi-layer CSS box-shadow effects with live preview. Choose from presets or build custom shadows with precise controls.

Border Radius Visualizer

Create simple rounded corners or complex organic shapes with visual controls. Generate perfect border-radius values with elliptical support.

CSS Flexbox Generator

Build flexbox layouts visually with live preview. Set justify-content, align-items, gap, and all flex properties. Export ready-to-use CSS.