Composition Rules Ref
About Composition
What this tool does
Design tools calculate aspect ratios, convert between pixels and physical units (cm, mm, inches), adjust color opacity, generate tint-and-shade scales, preview font stacks, and fine-tune letter spacing and line height.
Why use this tool
Pixel-perfect design requires precise unit math. Knowing the exact cm dimensions of a 1920x1080 image at 300 DPI, or generating a 10-step tint scale from a brand color, are tasks that come up constantly in print and digital design workflows.
How it works
Unit converters apply DPI-based ratios (1 inch = 96 CSS pixels at screen resolution, 300 pixels at print resolution). Color tools manipulate HSL lightness to produce tints (add white) and shades (add black). Font previewers render sample text with the specified stack.
Pro tip
When designing for print, always work at 300 DPI and convert to pixels last. Starting at screen resolution (72 or 96 DPI) and scaling up produces blurry prints.
Love this tool? Explore 5050+ more
Free online tools for images, PDFs, text, code, and more. All running in your browser.
Explore All Tools