Every converter, generator and calculator we have built, gathered in one place: pixels into rem, RGB into CMYK, 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, so a conversion gives you the nearest printable match rather than an identical colour. Treat every print result here as a starting point and check a printed proof before a run goes out.
Converters change notation. These three change the colour itself: build a palette from one seed colour or expand a single hue into a ramp of tints and shades for your UI states. 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 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 toolBuild color-coded Minecraft text with § or & formatting codes, preview it in a pixel font and export it as a PNG.
Open toolTurn plain text into cute, rounded lettering for bios, captions and usernames.
Open toolTurn plain text into gothic, glitch and scene-style lettering for bios and usernames.
Open toolTurn plain text into Unicode serif italic lettering, with bold italic, sans italic and script variants alongside it.
Open toolType text in a JJK style brush font, turn your name into katakana and download it as a PNG or JPG.
Open toolWrite your name in a hand-drawn Stussy-style script, drop it on a tee, hoodie or sticker and download a PNG.
Open toolWrite any name or line in the scratchy Death Note handwriting on a notebook cover, rules page or lined paper.
Open toolType a band name and grow thorns, roots and mirrored wings around it to make a black metal logo.
Open toolTurn text into a glowing neon sign and save it as a PNG, a video loop or CSS code.
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”, “hex”, “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