Design
Convert XYZ color values to HSV/HSB for color manipulation
xyz-to-hsv-converterDesign
Convert XYZ color values to HSL for screen display
xyz-to-hsl-converterDesign
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.
webfont-pairing-labDesign
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.
tailwind-arbitrary-value-playgroundDesign
Analyze a WebP/VP8 image with Sharp, generate a grayscale displacement map, and render it as an interactive Three.js 3D relief surface
vp8-image-analyzerDesign
Generate CSS transform properties
transform-generatorDesign
Decode QR codes from images and extract the contained text or URLs
qr-code-decoderDesign
Generate QR codes from URLs or text with customizable size and colors
qr-code-generatorDesign
Convert RGB color values to HEX format for web design
rgb-to-hex-converterDesign
Convert RGB color values to HSL for screen display
rgb-to-hsl-converterDesign
Convert RGB color values to HSV/HSB for color manipulation
rgb-to-hsv-converterDesign
Convert bidirectionally between HEX, RGB, HSL, OKLCH and Display-P3 using CSS Color 4 math, with gamut checks and out-of-gamut clipping suggestions
oklch-color-converter