Design
Convert XYZ color values to HEX for screen display
xyz-to-hex-converterDesign
Convert XYZ color values to HSL for screen display
xyz-to-hsl-converterDesign
Convert XYZ color values to LAB for color management
xyz-to-lab-converterDesign
Convert XYZ color values to RGB for screen display
xyz-to-rgb-converterDesign
Convert XYZ color values to HSV/HSB for color manipulation
xyz-to-hsv-converterDesign
Capture a public web page and export observed colors, typography, spacing and components with a screenshot.
website-design-style-extractorDesign
Upload a variable font (TTF/OTF/WOFF/WOFF2) to inspect its fvar axes and named instances, preview interpolation live in the browser, and generate ready-to-paste font-variation-settings CSS plus the equivalent high-level properties and a variable @font-face block.
variable-font-axis-instance-and-css-font-variation-settings-builderDesign
Generate CSS transform properties
transform-generatorDesign
Generate CSS text-shadow properties
text-shadow-generatorDesign
Walk an SVG path command by command (M/L/H/V/C/S/Q/T/A/Z) — per-segment arc lengths, cumulative stroke-dashoffset distances, subpath bounding boxes, cubic handle vectors, arc flag solving, and path-vs-viewBox alignment.
svg-path-data-cubic-quadratic-and-arc-command-length-walkerDesign
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
Design, preview and export a self-hosted wheel, scratch card or mystery box. Local demos or merchant API results; no hosted prize service.
store-promotion-giveaway-widget-generator