Every developer ends up doing small image jobs: shrinking a hero image, converting a color from the design tool into the notation your CSS uses, checking whether a text color is accessible, or generating a QR code for a demo. Most online tools for these tasks ask you to upload your file to a server first.
We built the Image & Design category on Utility Tools Lab with the opposite approach. It has 25 free tools that run in your browser, with no sign-up. Here's a tour of what's in it and why a few of them work the way they do.
Image optimization
Image Compressor
Compress JPEG, PNG and WebP files, with control over quality and max dimensions. No server upload is involved.
Image Resizer
Resize JPEG, PNG, WebP or GIF files to exact pixels or a percentage. It locks the aspect ratio, steps down smoothly, and re-encodes in your tab.
Format Converter
Re-encode PNG, JPEG, WebP, GIF, AVIF and BMP files into any of four output formats, up to 20 files per run, with a matte color behind transparency.
Image Cropper
Drag-to-select cropping with seven aspect-ratio presets, a rule-of-thirds grid, and adjustable output quality.
Flip & Rotate
Rotate by 90°, 180° or 270°, or flip horizontally and vertically, with an instant preview.
Color and CSS tools
HEX ↔ RGB Converter
Convert between HEX, RGB, RGBA and HSL with a live preview. CSS wants one notation while your design tool hands you another, and this closes that gap.
Contrast Checker
Check WCAG 2.1 contrast ratios between foreground and background colors, with AA/AAA pass/fail results for normal and large text.
Color Palette Generator
Generate palettes from any base color using complementary, triadic, analogous or monochromatic schemes.
Gradient Generator
Build linear, radial and conic CSS gradients visually, with unlimited color stops, angle control and presets. Copy the CSS when you're done.
Color Mixer
Blend two hex colors across 7 linear-RGB midpoints. You can copy individual swatches or export everything as CSS custom properties.
CSS Formatter
Beautify minified CSS with 2-space, 4-space or tab indentation, or minify it to a single line. It preserves string values and data URIs.
Photo effects and editing
- Grayscale Converter: grayscale, sepia, high-contrast B&W or inverted colors
- Brightness & Contrast: adjust brightness, contrast and saturation, then copy the matching CSS filter or save the full-resolution result
- Duotone Generator: two-color duotone with adjustable intensity and blend mode
- Image Pixelator: square tiles, scanline bars or halftone dots, with a 2 to 64 px slider
- Image Border: solid bands, double rules, Polaroid lips or floating shadows
- Watermark Tool: overlay your own text in any corner or tiled across the frame, with opacity and rotation controls
- Image Annotator: arrows, shapes, freehand drawing, highlights and text labels on screenshots, with undo/redo and clipboard paste
Utilities worth knowing about
Metadata Viewer
Read the EXIF data hidden in a photo, including camera, lens, shutter speed, ISO, capture date and GPS coordinates. The file is parsed in your browser and never uploaded, which is useful before you share a photo publicly.
QR Code Generator
Generate QR codes from a URL, text, email or phone number and download them as PNG.
SVG Optimizer
Shrink SVG files by stripping editor metadata, rounding path data, shortening colors and dropping unused IDs, with a pixel check that the render is unchanged.
YouTube Thumbnail Grabber
Pull every thumbnail size a video publishes, from 1280x720 down, as JPG or WebP.
Images → PDF and PDF to Images
Combine JPG/PNG files into a single PDF, or export PDF pages as PNG or JPEG at 72, 150 or 300 dpi, rendered client-side with PDF.js.
Wallet QR
Generate a BIP-21 / EIP-681 payment QR for an Ethereum, Bitcoin or Solana address. It auto-detects the chain and supports an optional amount and label.
Design decisions behind the tools
Two choices shaped this category.
One file at a time for heavy operations. A browser will only decode an image so large before the tab gives up. That's why the Image Compressor and Image Resizer each work on a single file rather than a whole folder. Both re-encode through a <canvas> element, so the pixels never leave your machine.
Tools that exist because of a real frustration. The Contrast Checker exists because WCAG 2.1 asks for a 4.5:1 ratio on body text, and nobody can judge that by eye. The HEX to RGB converter exists because the notation your CSS needs often isn't the one your design tool gives you.
Try them out
Browse the full Image & Design category. If a tool is missing or something breaks, tell us in the comments. We read them.
Which image or design task do you find yourself repeating most often?
Top comments (0)