Design Tools

Extract colors, fonts, and design assets.

Design work is full of repetitive conversions — pulling a palette from an image, matching a color across HEX, RGB, and HSL, or generating gradient and shadow CSS. These tools turn those tasks into one-click actions with live previews and copy-ready output. Everything is computed locally, so your design assets never leave your device.

12 free tools · processed in your browser

Font Finder

Detect which fonts are installed on your system. Test font rendering with custom sample text.

Open

SVG Optimizer

Batch

Minify and optimize SVG files by removing comments, unnecessary whitespace, and redundant attributes.

Open

Color Palette Extractor

Extract dominant colors from any image as a color palette with hex and RGB values. Copy CSS variables instantly.

Open

Color Converter

Convert colors between HEX, RGB, and HSL instantly with a live preview swatch.

Open

Favicon Generator

Create favicon PNGs in every size from a letter, color, and shape. Includes ready-to-paste HTML snippet.

Open

Color Shades Generator

Generate tints, shades, and tones of any color with copyable HEX, RGB, and HSL values.

Open

Gradient Generator

Create beautiful CSS gradients with a visual editor. Pick colors, angles, and stops, then copy the CSS.

Open

Border Radius Generator

Design rounded corners with a live preview and copy pixel-perfect border-radius CSS for any element.

Open

Box Shadow Generator

Create layered box-shadow CSS with an interactive preview. Fine-tune offset, blur, spread, and color.

Open

Color Contrast Checker

Check the contrast ratio between two colors against WCAG AA and AAA guidelines for text of any size.

Open

CSS Units Converter

Convert between px, rem, em, %, vw, and vh with a configurable base font size. Perfect for responsive design.

Open

Aspect Ratio Calculator

Calculate the aspect ratio of any dimensions, find missing width or height, and get standard ratios instantly.

Open

FAQ

Design Tools — frequently asked questions

Can I check color contrast for accessibility?

Yes. The contrast checker computes the ratio between any two colors and grades it against WCAG AA and AAA thresholds for normal and large text.

How do I get CSS out of these tools?

Gradient, box-shadow, border-radius, and color tools all output copy-ready CSS. The palette extractor outputs CSS variables as well as individual hex values.

Can I generate favicons?

Yes. The favicon generator creates every standard PNG size from a letter, color, and shape, and includes a ready-to-paste HTML snippet.