Preview a heading + body Google Fonts pairing with weight and line-height controls, and copy a ready-to-paste CSS @import + variables snippet. Curated 22-face registry plus 7 proven pairing presets.

Design

Tailwind Arbitrary Value Playground

Paste Tailwind classes that use arbitrary values (w-[137px], text-[#bada55], grid-cols-[1fr_2fr], [mask-type:luminance]) and inspect the generated CSS, with a live visual preview, data-type hint detection, and an explanation of each translation. Useful for debugging calc(), CSS variables, and one-off values that escape the design token scale.

Design

VP8 Image Analyzer

Analyze a WebP/VP8 image with Sharp, generate a grayscale displacement map, and render it as an interactive Three.js 3D relief surface

Design

CSS Transform Generator

Generate CSS transform properties

Design

QR Code Decoder

Decode QR codes from images and extract the contained text or URLs

Design

QR Code Generator

Generate QR codes from URLs or text with customizable size and colors

Design

RGB to HEX Converter

Convert RGB color values to HEX format for web design

Design

RGB to HSL Converter

Convert RGB color values to HSL for screen display

Design

RGB to HSV Converter

Convert RGB color values to HSV/HSB for color manipulation

Design

OKLCH Color Converter

Convert bidirectionally between HEX, RGB, HSL, OKLCH and Display-P3 using CSS Color 4 math, with gamut checks and out-of-gamut clipping suggestions