Frontend work mixes two things that are easy to confuse: the design decisions — type, colour, spacing, imagery — and the asset pipeline that delivers them. The listings above lean into the first half, and they are the right tools when you are still deciding.

The DevToolBox utilities below handle the second half, plus the colour conversion that comes up constantly when moving between a design file and a stylesheet. Nothing is uploaded, so your images never leave your machine.

🧰 Free DevToolBox Tools

Client-side and free — nothing you paste leaves your browser:

Color Picker & Converter — Convert between HEX, RGB, HSL and HSV with a live preview, and build palettes.
Image Compressor — Shrink PNG, JPEG and WebP files in the browser before shipping.
HTML Minifier — Minify markup while protecting pre, textarea and inline whitespace semantics.
Markdown Preview — Render README, docs and changelog content before it goes live.
QR Code Tools — Generate and decode QR codes for print and share assets.
AI Cover Generator — Create cover images for articles and social posts.
Diff Checker — Compare two stylesheets to find the rule that changed.

❓ Frequently Asked Questions

HEX, RGB or HSL — which should I use in CSS?

HEX and RGB are fine for flat values. Reach for HSL when you want to derive related colours: lightening or darkening becomes one lightness value instead of arithmetic across three channels. Modern CSS supports alpha on all of them, so the real question is readability.

How much should I compress an image?

Aim for the point where you can no longer see a difference at the size it will actually be displayed. A hero image at 1600px wide rarely needs more than a few hundred kilobytes, and a thumbnail can drop far lower than that.

Does minifying HTML actually improve performance?

It reduces transfer size, so yes for high-traffic pages. Most servers gzip HTML anyway, which already removes much of the redundancy — minify, but do not expect a dramatic speed change on its own.

Why check contrast ratio?

Because a palette that looks fine in a mockup can fail accessibility guidelines in production. The colour tools report the ratio between two colours so you can see whether body text clears the WCAG AA threshold before it ships.