Tools tagged #design
Every ecech. tool tagged design: 30 free calculators and utilities across Design & Color, Developer & Code. No signup, runs in your browser.
Aspect Ratio
1280×800 reduces to 8:5, and a modern phone is 422:195 — a ratio with no name. Get the exact ratio, the nearest standard one, and the error between them.
Design🎨Bleed mm to Pixels
Translate physical bleed and trim size into pixel dimensions at a chosen PPI.
Design🎨Booklet Creep
Estimate the cumulative outward shift in a saddle-stitched stack from measured sheet caliper.
Design🎨Border Radius
The slash syntax gives each corner a separate horizontal and vertical radius, which is how organic shapes are made in CSS without touching SVG.
Design🎨Border Style Generator
Build both declarations, calculate outer footprint and keep keyboard focus visible.
Design🎨Box Shadow Generator
Real objects cast a tight contact shadow and a soft ambient one. Stack two box-shadow values and the result stops looking like CSS.
Design🎨Chart Palette Generator
Distribute hues, preview labeled swatches and expose the closest RGB pair.
Design🎨Color Swatch Sheet
Validate CSS hex colors and create a deterministic proof-sheet manifest.
Design🎨Colour Blind Check
Red-for-bad and green-for-good is the most common convention in software and the exact pair that collapses. Paste your palette and see which colours merge.
Design🎨Colour Palette Generator
Press space for a new palette, lock the ones you like, keep going. Spaced by lightness rather than randomly, so the result is actually usable in an interface.
Design🎨Colour Palette Harmony
HSL says the complement of blue is a much brighter yellow. Your eye disagrees. This rotates in OKLCH and shows both, so you can see the difference.
Design💻CSS Gradient Generator
Linear, radial and conic gradients with as many stops as you like — plus the fix for the muddy grey band that appears between complementary colours.
Developer🎨Dark Mode Palette
Transform light tokens into editable dark candidates and report WCAG contrast for text pairs.
Design🎨Greyscale Weights
All three average to exactly 85. Weighted by luminance they are 54, 182 and 18 — which is roughly how the eye sees them.
Design🎨Hex Opacity Calculator
Convert between hex alpha and percentage, and see the flat colour a semi-transparent layer actually produces over your background.
Design🎨Hex Shorthand
Shorthand doubles each digit, so #f61 is #ff6611 — not #ff6601. Shortening by truncation changes the colour.
Design🎨HEX to RGB
Paste any hex — 3, 4, 6 or 8 digits — and get RGB, RGBA, HSL, HSV and OKLCH at once, plus a tint and shade scale you can drop straight into a design system.
Design🎨HSL / HSV Converter
HSV at 100% saturation and 100% value is a vivid colour. HSL at 100% and 100% is white. Design tools show HSV, CSS wants HSL, and nothing warns you.
Design🖼️Image Colour Extractor
Averaging the pixels of a red flower on green leaves gives brown. This groups pixels into real clusters, in linear light, so every colour you get is one you can see.
Image🎨Ink Coverage Cost
Scale a cartridge's rated-page yield to the coverage of the planned job.
Design🎨Label Sheet Yield
Fit labels inside explicit margins and gaps, then compare portrait and rotated layouts.
Design💻Lorem Ipsum Generator
Classic lorem ipsum, plus placeholder data that behaves like the real thing — long names, awkward emails and prices that actually break your layout.
Developer🎨Named Colour Finder
148 names with a century of accumulated history. Finding the closest one needs a perceptual distance, because RGB distance picks a different answer.
Design🖼️Placeholder Image
Every placeholder service sees the URL of every page that uses it. This makes the file in your browser instead, so nothing is requested and nothing breaks.
Image🖼️PNG to JPG
Every transparent pixel has to become something. Choose the colour instead of letting the canvas default decide.
Image🎨px to rem
em multiplies with each nested level, so four levels of 0.9em is 10.5px, not 14.4. Convert between all three and see the compounding.
Design🎨RGB to CMYK
A vivid screen green has no CMYK equivalent. Converters return the nearest printable colour and say nothing. This shows you the gap before it surprises you.
Design🖼️SVG to PNG
An SVG has no resolution until you pick one. Export at 1x and it is soft on every modern screen. Set a scale or an exact width and see the result before saving.
Image🎨Tiled Poster Pages
Tile a finished poster across printable sheets with an explicit overlap allowance.
Design🎥YouTube Thumbnail
Paste a link and see all six thumbnail sizes YouTube stores, at their real dimensions, with a direct download for each — plus the frame grabs most tools never show you.
YouTube