Design & Color

Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.

Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.

Scores a foreground and background pair against WCAG 2 and APCA and suggests the nearest passing colour.

Builds a harmonious palette from a base colour using complementary, triadic and analogous rules.

Works out the missing dimension for a target ratio and lists the standard sizes it matches.

Composes layered box and text shadows with a live preview and emits the CSS.

Builds linear, radial and conic gradients with draggable stops and emits the CSS, in sRGB or OKLCH.

Lays out a grid visually with named areas and emits the grid-template CSS.

Builds a 50–950 ramp from one colour and mirrors it into a dark one, so each token pair keeps its contrast.

Places a screenshot inside a phone, tablet, laptop or browser frame with a background and shadow.

Toggles every flex property on a live example and shows the CSS and what each property changed.

Computes a clamp() expression that scales a size smoothly between two viewport widths.

Converts TTF and OTF to WOFF and back in the browser and emits the matching @font-face rule; WOFF2 needs Brotli and is refused with a pointer to desktop tools.

Suggests heading and body font pairs from system font stacks, previewed with your own Korean and English text, and hands you the CSS.

Cuts a TrueType font down to the glyphs your text actually uses and can wrap the result as WOFF — the difference between a 4 MB and a 90 KB Korean webfont.

Finds the closest Tailwind palette entry to any colour and shows the perceptual distance.

Composes a 1200×630 share image from a title, subtitle, brand line and optional logo on a chosen template, and writes the meta tags to go with it.

Edits an SVG next to its live render and explains the file: viewBox and scaling, transforms, every path command, inherited paint, wasted bytes, and what breaks in an <img>, a data URI or inlined.

Generates a 50–950 lightness scale from one colour with perceptually even steps, ready as design tokens.

Generates tileable SVG patterns — stripes, dots, grids, noise — with colour and scale controls.

Shapes each corner independently, including the two-value squircle syntax, and emits the CSS.

Stacks blur, brightness, saturation, hue and drop-shadow filters on a sample and emits the CSS.

Pulls colours, spacings, radii and fonts out of a stylesheet and proposes a custom-property set.

Edits a cubic-bezier or spring curve against an animated preview and emits the CSS timing function.

Opens a font file to show its glyph coverage by block, Korean syllable count, weight, variable axes, embedding permission and licence name records.

Converts RGB to CMYK with the plain formula (no ICC or paper profile) and flags saturated colours a four-ink press will dull.

Converts path data between absolute and relative commands, moves, scales, rotates and reverses it, and shows the bounding box with a live preview.

Encodes an SVG as a CSS background data URI, escaping only what needs escaping to keep it small.

Builds a modular type and spacing scale from a base size and ratio, exported as CSS or tokens.