Design Tools — Color Palette, Aspect Ratio, DPI Calculator & Favicon Generator

Designers and developers constantly need quick answers to visual questions. What colors go well together? What's the aspect ratio of this image? What DPI is this screen? These four tools give you instant answers without opening Figma or Photoshop.

Color Palette Generator

You're starting a new project and need a color scheme. You have one brand color — say, a nice blue — but you need complementary colors, accent colors, and a full palette that works together. The color palette generator takes your base color and generates harmonious palettes using color theory.

Pick a color using the color picker or enter a hex code. The tool generates complementary, analogous, triadic, split-complementary, and tetradic color schemes. Each palette shows you the exact hex codes, and you can also see lighter and darker shades of each color. It's like having a color theory textbook condensed into a single interactive tool.

Whether you're designing a website, picking paint colors, or choosing a theme for a presentation, this tool gives you palettes that are mathematically harmonious — not just "colors that kind of look nice together."

Aspect Ratio Calculator

You're resizing an image from 1920×1080 to fit a 400px wide container. What should the height be to maintain the aspect ratio? The aspect ratio calculator figures it out instantly.

Enter any two dimensions and it calculates the simplified ratio (16:9 in this case) and lets you lock the ratio while changing one dimension. It includes presets for common aspect ratios — 16:9 for video, 4:3 for classic displays, 1:1 for social media squares, 9:16 for phone vertical video, and more. There's also a visual preview so you can see the shape of the resulting rectangle.

It's essential for responsive design, video production, print layout, and anywhere you need to resize content without distortion.

Screen DPI Calculator

Your client asks you to design for a "Retina display." But what does that actually mean in pixels? How dense are the pixels on a 27-inch 4K monitor versus a 15-inch laptop? The screen DPI calculator computes pixels per inch from the screen's resolution and physical size.

Enter the screen width in pixels, height in pixels, and diagonal size in inches. The tool calculates PPI (pixels per inch) and tells you where it falls on the density scale — from standard displays (~100 PPI) to high-density Retina screens (200+ PPI) to phone displays that pack 400+ PPI. It includes presets for popular devices so you can compare.

Useful for designers deciding on asset sizes, developers implementing responsive images, or anyone comparing displays.

Favicon Generator

Every website needs a favicon — that tiny icon in the browser tab. Creating one shouldn't require a graphic design tool. The favicon generator creates favicons directly in your browser using a simple visual editor.

Choose a background color, enter 1-2 letters (your brand initials), pick a font color, and adjust the corner radius from square to circular. The tool renders a preview and lets you download the favicon as SVG or as PNG in multiple sizes (16×16, 32×32, 48×48, 180×180, 192×192, 512×512). You get all the sizes you need for browser tabs, bookmarks, mobile home screens, and web app manifests in a single click.

No design skills required. If you can pick two colors and type two letters, you can have a professional-looking favicon in 30 seconds.

All four tools work in your browser without sending any data to a server. Your design work stays on your device.