Front-End Developer Tools
Free, practical utilities for everyday web work — convert CSS units and colours, work out aspect ratios, check WCAG contrast, translate viewport units, and generate fluid clamp() values. Client-side tools that run in your browser, built to save you a tab and a mental round-trip.
PX to REM & EM Converter
Convert a length between px, rem, and em with the root and parent font-sizes made explicit — so a design handed to you in pixels ships as clean, scalable CSS
HEX, RGB & HSL Colour Converter
Pick a colour or paste a hex code and read the matching rgb() and hsl() at once, with a live swatch — no more hunting for the right notation mid-stylesheet
Aspect Ratio Calculator
Reduce any width×height to its simplest ratio, or lock a ratio and solve for the missing side — for images, video embeds, and CSS aspect-ratio boxes that never distort
WCAG Contrast Ratio Checker
Pair a text and background colour and see the exact contrast ratio with pass/fail for WCAG AA and AAA, normal and large text — a legibility check before it reaches a screen
Viewport Units Calculator
Translate between px, vw, and vh at any viewport size, with device presets — so you know exactly what a vw or vh rule resolves to before you commit it
CSS clamp() Generator
Turn a min size, a max size, and a viewport range into a ready-to-copy fluid clamp() value — smooth responsive scaling between breakpoints, no media queries required
Want every number on one page?
The CSS reference cheat sheet collects the unit conversions, color values, breakpoints, aspect ratios, contrast thresholds, and clamp() formula from all six tools above in one scannable page — no calculator needed for the common cases.
Open the cheat sheet →