Free Design Tools for Colour, Proportion and Typography Work
These free design tools handle the fiddly jobs that interrupt real work: picking a colour palette, testing text contrast against WCAG, scaling to a new aspect ratio, building a type scale, pairing fonts, sketching a brand kit and turning a picture into halftone dots or a vintage ad. Each runs in the browser and needs no account.
What the free design tools cover
A designer in 1960 kept a proportional scale wheel, a pica ruler and a printed colour guide on the desk. The same jobs still exist, only now they live in a browser tab. These free design tools cover nine of them, chosen because they come up every week in print, screen and presentation work alike.
Three tools deal with colour, two with proportion, two with typography and two with print effects. None of them asks for an account, an email address or a download. Each one shows the rule behind its answer as well as the answer, so you can check the arithmetic or repeat it by hand when a laptop is not available.
The tools also connect to the rest of the site. The palette presets come from the same research as the decade pages, and the contrast thresholds follow the published W3C standard rather than a rule of thumb. If a result looks surprising, the explanation underneath is the first place to look, and it usually names its source.
Colour tools: a palette generator and a contrast checker
The color palette generator starts from one colour and builds four companions using harmony rules such as complementary, analogous or triadic. You can keep the swatches you like and generate again. Era presets load documented colour schemes, from Swiss posters of the 1950s to the soft white Pantone named for 2026.
The color contrast checker answers a narrower question. Given text and background colours, it calculates the contrast ratio defined in WCAG 2.2 and reports whether the pair passes 4.5:1 for normal text, 3:1 for large text and interface parts, and 7:1 for the stricter AAA level, one result for each threshold.
The two are designed to be used together. A palette that looks lovely as five swatches can still produce unreadable buttons, and the only way to know is to test each text pairing. If colour theory itself is new to you, the guide to colour theory covers the wheel, value and temperature before you touch any sliders.
Proportion tools: aspect ratio and the golden ratio
The aspect ratio calculator reduces any width and height to a simple ratio, such as 16:9 or 4:3, and resizes one side while keeping the shape. It handles common screen and social formats, including vertical 9:16 video and the 4:5 portrait post, so a crop decided once can be repeated across every version of a file.
The golden ratio calculator divides a length by roughly 1.618 or multiplies it by the same number. That proportion has been claimed for everything from the Parthenon to famous logos, and many of those claims are exaggerated. It remains a useful starting point for column widths, margins and image crops, which is reason enough to have it close at hand.
A quiet relative of both is the ISO 216 paper system, in which every A size has sides in the ratio of 1 to the square root of 2, about 1.414. Fold an A4 sheet in half and you get A5 with the same shape. That clever property is why the standard spread from Germany to most of the world.
Typography tools: type scale and font pairing
The type scale calculator takes a base size, usually 16 pixels on screen, and multiplies it by a fixed ratio to produce a ladder of heading sizes. Ratios carry musical names such as major third, at 1.25, and perfect fourth, at about 1.333. The output is a short list of sizes, ready for a stylesheet or a layout grid.
The font pairing tool suggests typefaces that work together, usually by contrast: a serif for headings with a sans serif for text, or the reverse. It pays attention to x-height, the height of a lowercase x, because two fonts with very different x-heights look mismatched even at the same nominal size. Pairs favour widely available families.
Both tools assume a little background in typography, and the guide to typography basics supplies it, from leading and tracking to the difference between a typeface and a font. One aside: the word font comes from the French fonte, something melted, a reminder that type was once cast in hot metal.
Layout tool: a vintage ad maker for nine eras
The vintage ad maker takes a headline, one line of copy and a brand name and draws them as nine period ads at once, from 1950s starbursts and Swiss grids to Memphis confetti and Y2K chrome. Each proof has its own typefaces, inks and print texture, and downloads as a poster, square or story PNG.
Brand tool: a brand kit generator with a style guide
The brand kit generator joins several of these tools into one flow. A name and a mood give a five-colour palette with every text pairing checked for contrast, a font pairing and a type scale. Previews show the kit on a card, a web header and a poster, and it exports as CSS, tokens or a PNG.
Print tool: a halftone generator with a riso effect
The halftone generator turns any picture into printed dots on your own device, without uploading anything. It offers a one-ink halftone, a four-colour CMYK separation and a two-ink riso effect with grain and misregistration, with controls for dot size, screen angle, dot shape, inks and paper, and it downloads a full-size PNG.
How to use the free design tools together
A typical sequence runs from colour to type. Generate or load a palette, then send each planned text and background pairing through the contrast checker. Next, set the type scale with the base size you expect readers to see. Finally, test a font pair at those sizes, since a pairing that works at 40 pixels can fail at 14.
Proportion comes last, or whenever images arrive. An image delivered at 3:2 may need a 16:9 version for a slide and a 9:16 version for a vertical story; the aspect ratio calculator gives exact pixel sizes. Among the free design tools, the golden ratio one is optional, a way to settle where a margin belongs.
None of the free design tools replaces judgement. A palette that passes every contrast test can still look dull, and a perfectly scaled set of headings can still feel cramped on a small phone. The numbers narrow the choices, while your eye makes the decision, preferably after printing a test page or checking it on a real screen.
Where the rules behind each tool come from
Each calculator rests on a published source rather than taste. The contrast formula comes from the W3C’s Web Content Accessibility Guidelines, version 2.2, published as a Recommendation in October 2023. Colour notations such as hex, HSL and the newer OKLCH model are defined in the W3C’s CSS Color Module Level 4.
Paper proportions come from ISO 216, and the type scale ratios borrow names from musical intervals that typographers adopted in the twentieth century. The era palettes cite their own origins, from 1970s appliance colours to Pantone’s annual announcements. Few tools on the web show their workings, which is a shame, since checking a number is half of trusting it.
Questions about the free design tools
Are these design tools really free?
Yes. Every tool on this page is free to use, with no account, no trial period and no limit on how many times you run a calculation. You can copy the results, such as hex codes, ratios or pixel sizes, straight into your own files, slides or stylesheets without crediting the source.
What is the best free color palette generator?
The best one is the one that explains its choices. A good generator lets you start from one colour, apply a harmony rule such as complementary or triadic, lock the swatches you like and check contrast before export. The palette generator here also offers era presets drawn from documented design history.
What contrast ratio does WCAG require for text?
WCAG 2.2 Level AA asks for a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text, meaning roughly 24 pixels regular or about 19 pixels bold. Level AAA raises those figures to 7:1 and 4.5:1. User interface parts and graphics need at least 3:1.
How do I calculate an aspect ratio?
Divide the width and height by their greatest common divisor. A 1920 by 1080 pixel image reduces to 16:9, because both numbers divide by 120. To resize, keep the ratio fixed: a new width of 1280 pixels at 16:9 gives a height of 720. The calculator does both steps automatically.
What is a type scale in typography?
A type scale is a set of font sizes that grow by a fixed ratio, such as 1.25 or 1.333, from a base size. Starting at 16 pixels with a ratio of 1.25 gives 20, 25 and roughly 31 pixels. The fixed ratio keeps headings, body text and captions visually related.
Do I need design software to use these tools?
No. The tools run in an ordinary web browser on a laptop, tablet or phone. Results are plain values, such as hex codes, ratios and pixel or rem sizes, so they paste into whatever you already use, whether that is a slide deck, a word processor, a code editor or a professional layout program.