Every converter, generator and calculator we have built, gathered in one place: pixels into rem, hex into Pantone, a palette out of one colour, a grid that finally adds up. All free, all in the browser, built alongside the blog by Bogdan Sandu.
A pixel is an absolute unit, em and rem are relative ones, and print units answer to resolution rather than to the screen. These converters handle the arithmetic in both directions: rem measured against the root font size, em against whatever the parent element inherits, and physical units at the CSS standard of 96 pixels to the inch. If you are still deciding which unit to reach for rather than converting one you already have, the background on pixels and DPI is the place to start.
Hex and RGB describe the same additive colour in different notation, so converting between them loses nothing. Everything else here is an approximation. CMYK mixes ink subtractively and cannot reach every colour a screen can show, and Pantone references are physical spot inks, so a conversion gives you the nearest available match rather than an identical colour. Treat the result as a starting point and check a printed proof before a run goes out.
Converters change notation. These four change the colour itself: build a palette from one seed colour, expand a single hue into a ramp of tints and shades for your UI states, or pull a set of Pantone references out of a photograph. The contrast checker is the one to run before you ship anything, since WCAG asks for a ratio of at least 4.5:1 on body text and 3:1 on large text, and plenty of brand palettes quietly fail it. More on the reasoning in color theory.
Build a full palette out of a single starting colour.
Open toolGenerate the lighter tints and darker shades of any colour.
Open toolTest text and background pairs against WCAG contrast levels.
Open toolUpload an image and pull the Pantone colours out of it.
Open toolTwo of these generate something new and two show you what already works, which is the distinction worth keeping straight. The pairing and scale generators build a fresh combination or a full set of sizes from a ratio you pick. Font Combinations and Canva Font Pairings are galleries: finished examples to browse and copy, the second one limited to typefaces available inside Canva. If you want the reasoning behind a good pair rather than a shortcut to one, start with how to pair fonts.
Generate your own font pairing instantly, then keep the ones that work.
Open toolBuild a typographic scale for your project, from caption to display.
Open toolBrowse curated font pairing examples, ready to borrow.
Open toolFont pairing examples chosen specifically for Canva users.
Open toolThese take text you type and hand back styled lettering. Most of them work with Unicode characters rather than font files, which is why the result survives being pasted into a bio, a username or a caption, where formatting is normally stripped out. The trade-off is that the output stays text: selectable and searchable, but rendered with whatever each device has available rather than with a typeface you control. When the letterforms have to be exact, reach for a real font file instead.
Convert any number from 1 to 3999 into styled roman numerals, then export as PNG, SVG or an HTML snippet.
Open toolTurn plain text into 25 Unicode styles, from bold and fraktur to glitch, ready to paste anywhere.
Open toolTurn plain text into cute, rounded lettering for bios, captions and usernames.
Open toolTwo calculations that come up on almost every layout. The aspect ratio calculator gives you the second dimension once you have fixed the first, which is what you need when an image has to fit a slot without distortion. The grid calculator works out column widths from a container width, a column count and a gutter, and hands you the CSS. The thinking behind both is covered in grid systems.
Try a unit or a colour format instead: “rem”, “pantone”, “cmyk”, “grid”.
Printable references for the software the tools above feed into.
Design Your Way has been publishing design resources since 2008. The tools are part of that: free to use, no accounts, no limits.
About Design Your Way