NETROOM
Excalidraw is a virtual whiteboard for diagrams in a hand-drawn style: architecture sketches, user flows, wireframes and anything else that is quicker to draw than to describe. It runs in the browser with no sign-up - open a tab and start drawing. There are libraries of ready-made shapes, export to PNG and SVG, collaboration over a link with end-to-end encrypted rooms, and files you can keep locally or in your own storage. Open source, with a self-hosted option for teams.
Squoosh compresses images in the browser: drop a file in, pick a format and a quality, download the result. A slider puts the original and the compressed version side by side, so you can see exactly where artefacts start and stop just before them. It handles a range of formats, each with its own controls - from a single quality dial to the codec's own parameters. Nothing is uploaded: the work happens on your device, and it runs offline once installed as an app. Built by Google Chrome Labs, open source, no sign-up.
The Cyber Swiss Army Knife, built by the UK's GCHQ. You chain operations into a "recipe" and push text or a file through it: base64, XOR, AES, DES, Blowfish, hashes, hexdumps, X.509 and IPv6 parsing, archive extraction, charset conversion. Everything runs in the browser - nothing is sent to a server, and you can download the page and use it offline. Apache 2.0 plus Crown Copyright. Invaluable for picking apart logs, dumps and suspicious payloads.
A Swiss army knife for PDFs in the browser, running on your own server: merge and split, rotate, compress, convert to and from office formats, OCR, sign, redact, and chain operations through a REST API - over fifty tools in all. The point is that files never reach someone else's cloud. One docker run gets you going, and a desktop client and Kubernetes charts exist too. It is open core: the base is open source while some capabilities sit behind paid Server and Enterprise plans.
Feed it one colour and get a dozen ready-made combinations around it, plus gradients including three-stop ones that are tedious to build by hand. The logic is simple: you already have a brand colour and need a background, an accent and something to pair with it - not a palette from scratch. Free, no signup, hex copies in a click, gradients come out as CSS. Pointedly disposable: pick, copy, leave. No accounts, no collections, no subscription.
A generator of colour scales rather than palettes: set the number of steps and the curves for hue, saturation and lightness, and out comes an even ramp where each step differs predictably from the last. Exactly what design-system tokens need, where 100 and 900 must follow one rule. Exports to Tailwind, OKLCH and Swift, has a Figma plugin, and the algorithm is documented. Free. For a quick pretty foursome use Color Hunt - different job.
Drop a font file on the big circle and find out what it can actually do: OpenType features, ligatures, alternate glyphs, variable axes, supported languages, color layers. It also hands you the CSS to switch a feature on in the browser, and shows the full character set. The font is parsed locally and never uploaded, so checking licensed typefaces is safe. Free, made by Roel Nieskens. Hard to beat before you buy a font.
Drop a font file into the browser window and see what is inside: the full glyph set, supported languages, kerning, OpenType features, metrics and the metadata from its tables. It reads OTF, TTF, WOFF and WOFF2. Everything is parsed locally in the browser - the file never leaves your machine, which matters when the font is licensed and cannot be uploaded to someone else's server. Free, no account. The fastest answer to “does this cover Cyrillic?” and “what weights are actually in here?”
A tool against layout shift when a webfont loads. It overlays the fallback and the target face, lets you tune the fallback's font-size, line-height, letter-spacing and word-spacing, and shows exactly how far the text will jump once the real font arrives. Below it sits the CSS for the swap. Fonts come from Google Fonts or your own upload. Built by Monica Dinculescu, free, source on GitHub. A proven way to knock down CLS without giving up custom typography.
A site about what the modern web is actually set in. Every day it breaks down one site with the exact typefaces named, plus curated lists: what to use instead of Helvetica, which Google Fonts hold up, which pairings work. Not a generator and not a shop - you come here to train your eye and to identify a face that caught you. Run by one person, Jeremiah Shoaf, and updated without a break for years. Free, apart from a $399 typography checklist course.
A modular type scale calculator: choose a base size and a ratio - minor second, major third, perfect fifth - and see the whole ladder from caption to h1 rendered as live text in your own typeface. It previews mobile and desktop sizes, exports CSS with custom properties, and saves boards. Its edge is showing the scale on actual sentences rather than a table of numbers. The core is free; a few modes, the golden ratio among them, sit behind Pro.
Sixteen font stacks built from typefaces already installed on the user's system: Transitional, Old Style, Humanist, Neo-Grotesque, Didone, Monospace and more. The point is to ship no web fonts at all: zero requests, no FOIT, no layout shift, text paints immediately. For content sites and admin panels it's the cheapest LCP win available. You copy one font-family line and you're done. Released under CC0, so use it anywhere without crediting anyone.
Open-source fonts packaged as npm modules - roughly 2,100 families including Inter, Roboto, Geist and JetBrains Mono. The point is self-hosting: install the package, import the weights you need, and the font ships from your own domain. No request to a third-party CDN, which means better privacy, one fewer network hop on the critical path, and version pinning like any other dependency. Beyond npm there are direct downloads, a configurable CDN and a free API. Licences come from the fonts.
A free font library from Indian Type Foundry - around a hundred families, and this is not a dump but a working foundry's output, with recognisable faces like Satoshi, General Sans and Clash Display, many of them variable. The ITF Free Font License covers both personal and commercial use - client work, products you sell, print and web, no fees; the only bar is reselling or redistributing the files themselves. Some families ship under SIL OFL instead. Curated pairings are included.
An independent typography archive: 34,000-plus documented cases of type in the wild - books, packaging, identities, posters, websites. Filters cut by topic, format or specific typeface, so you can come at it from the “what has been done with this face” angle across five hundred-odd catalogued families. Free, no subscription, community-contributed. It is the best way to judge a typeface's character before buying a licence - not from a specimen sheet, but from how it behaves in real layouts.
Over a thousand hand-picked font pairings from Google Fonts and Fontshare - all free and commercially usable under the fonts' own licences. There is a playground for trying a pair on your own copy, favourites and collections, plus a brand-kit builder covering type, colours and icons that exports to PDF or DESIGN.md. The difference from Fontjoy: this is a curated list, not a generator - fewer options, but every one was checked by a human. Pro runs $4-8 a month for extras.
Font pairing by neural net: hit space and you get a trio for heading, subheading and body. A contrast slider controls how different the faces should be, and you can lock any of the three and reshuffle the rest around it. It runs on Google Fonts, so whatever you find plugs straight in and costs nothing. Free, no account, and the write-up on how the model works is on GitHub. Good when you want a fast non-obvious option rather than yet another Inter and Roboto.
A tool that turns one brand color into a whole set of Tailwind palettes: the main scale plus neutral and status colors. It then tries the palette on real layouts - dashboard, landing page, cards - so you immediately see where the grey turns muddy and the accent disappears. Around it sit a contrast checker, a shadcn/ui theme generator and a Figma plugin. The basics are free; Pro adds saved palettes and extra modes. Actively maintained.
The UI Colors generator page: feed it one hex value and it builds a full Tailwind scale from 50 to 950. You get eleven steps with lightness evened out, plus a config snippet ready to paste into the project. A live preview shows the scale on buttons, cards and text, so contrast holes surface before you write any markup. Free and no signup needed; the paid Pro tier adds saved palettes and finer controls.
Palettes are usually judged as five circles in a row, which lies to you: swatches say nothing about how the colours behave once one of them covers 60% of a page. Realtime Colors paints a full demo landing page - nav, buttons, cards, body copy - so you see real proportions. Set text, background, primary, secondary and accent, check contrast, swap fonts. Exports to CSS, SCSS, Tailwind and PNG. Completely free with no pro tier, and there is a Figma plugin.
Thirty colour scales of twelve steps each, where every step has a fixed job: background, hover, border, text. This isn't a bag of pretty shades but a system - text-on-background contrast is already worked out against WCAG, and dark mode flips with a single class because the paired scales keep those roles aligned. Separate alpha scales handle overlays. MIT licensed and free, installed as an npm package or pulled in as a plain CSS file.
A colour ramp editor for people who've outgrown shade generators: it plots hue, saturation and brightness curves so you can see exactly where a scale sags or turns muddy. Nudge the points and the palette evens out across its whole length. Free, runs in the browser. One caveat: palettte.app now redirects to a tool hosted inside the BairesDev agency site. The editor still works, but it no longer lives with its author, and nothing promises it won't move again.
Adobe's tool for color systems where a palette is built from contrast rather than by eye: you set key colors and target ratios, and the tone is derived so text passes WCAG. A dark theme comes out of shifting lightness and saturation instead of hand-repainting every token. There are scales for data visualisation and a color-blindness check. Exports to SVG, CSS custom properties and design tokens. Adobe open source, free, no account.
A machine-learning palette generator that thinks in roles, not swatches: which color is background, which is text, which is accent. You pick a template - landing page, logo, cover - and the model colors that specific thing. Three modes: transformer by default, diffusion slower but more precise for gradients, random for wild combinations. Lock a color and regenerate the rest, or steer it with a target contrast matrix. Free, no account.
A palette shown on a real layout. Ordinary generators hand you five swatches; here you scroll a finished page and the whole thing repaints - background, headline, button, illustration - with a hex labelled for every role. You immediately see when five 'beautiful' colors fall apart on a button. There is also a short primer on color psychology. Free, made by Mackenzie Child. Updated rarely: the copyright in the footer still says 2021.
The workhorse palette generator: hit space for a new set of five, lock the one that works and keep spinning the rest. Beyond the generator there's a whole kit - extracting colours from a photo, contrast checking, colour-blindness simulation, collections and community palettes. It works without an account, but the free tier stores only 10 palettes, 1 project and 5 favourite colours. Pro at around $3/month lifts the limits and the ads. iOS app, Figma plugin.
Describe the site in a sentence and get a sitemap, wireframes and an assembled page. It builds from a library of 1,000+ hand-made components rather than raw generated code, so the markup stays predictable and responsive, accessible and SEO-ready by default. Export to Figma with auto-layout and variables, to Webflow with client-first classes, or to React with Tailwind; hosting on Relume is also an option. The domain moved from relume.io to relume.ai. Free to start, then paid.
Curated four-colour palettes - that's the whole product, no wheels, curves or settings. Scroll popular, new or a tag like pastel, retro or winter, click, and the hex is in your clipboard. No login, no paid tier, and you can submit your own. Use it when you need a starting point fast and don't want to think about harmony; for generating systematic scales for a design system it's the wrong tool - reach for ColorBox or Coolors instead.
Editors' picks