CSS Variable Architect
An interactive CSS Variable Architect, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Open toolTools for the parts of design that are arithmetic
A CSS unit converter, an aspect ratio calculator, a contrast checker and a variable naming tool, each built to answer one specific question quickly. Every one can give you a wrong answer if you feed it the wrong numbers, so treat what it returns as a starting point.
Name your design tokens with the CSS Variable Architect Check a palette's contrast in the True-Contrast Smart PaletteSmall tools for the calculations designers do every week
These are small, single-purpose tools for the arithmetic and conversions that come up in ordinary design work: contrast checks, unit conversions, aspect ratios, and CSS variable naming. Each one solves a specific, recurring problem.
True-Contrast Smart Palette
An interactive True-Contrast Smart Palette, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Open tool
CSS Unit Converter (px / rem / em / vw / vh)
An interactive CSS Unit Converter (px / rem / em / vw / vh), free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Open tool
Aspect Ratio Calculator
An interactive Aspect Ratio Calculator, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Open toolTwo tools built for the work you're already doing
Both are free to use, and both can produce a wrong or misleading result. Treat what they give you as a starting point, not a final answer, and check it against the screen in front of you.