Skip to main content

Design studioThe collection

8 focused questions.
One transparent collection.

Search the collection, replace the sample values and read each method. No live data is retrieved.

Find a toolCategory

8 of 8 tools shown

Color Contrast RatioCalculate WCAG contrast from normalized relative luminance values.

Responsive Grid ColumnsFind column width after gutters.

Image Aspect ResizeKeep aspect ratio when changing image width.

Print Resolution PlannerTranslate pixel dimensions to print size.

Type Scale StepsGenerate a small modular typography scale.

Pixels to RemConvert pixel values to CSS rem units.

Canvas Safe AreaCalculate the inside dimensions after uniform margins.

Card Layout FitFind how many fixed-width cards fit in a row.