Design Tools
Free design utilities for CSS unit conversion, aspect ratio calculation, and AI-powered color palette generation with WCAG contrast checking. Built for responsive web work.
Designers and front-end developers constantly need to convert between units, check proportions, and pick accessible colors. These tools handle the math so you can focus on creative decisions. Convert px to rem for responsive typography, calculate exact dimensions for 16:9 video embeds, and generate harmonious color palettes with built-in WCAG AA/AAA contrast checking — all without leaving your browser or installing plugins.
CSS Unit Converter
Convert between px, rem, em, vw, vh, %, and pt.
DesignAspect Ratio Calculator
Calculate width, height, and ratios for video and responsive design.
DesignColor Palette Generator AI
Generate harmonious color palettes from any base color with WCAG contrast checking.
DesignSocial Media Image Resizer
Resize images to exact dimensions for Instagram, Facebook, X, LinkedIn, YouTube, TikTok, and Pinterest.
DesignCSS Gradient Generator
Create linear, radial, and conic CSS gradients with a visual editor.
DesignCSS Shadow Generator
Create multi-layer box shadows with a visual editor and live preview.
DesignCSS Flexbox Generator
Build flex layouts visually and copy both raw CSS and Tailwind-ready utility output.
DesignCSS Animation Generator
Create keyframe animations visually with presets, live preview, and copy-ready CSS.
DesignPlaceholder Image Generator
Create custom placeholder images for mockups and prototypes.
DesignFavicon Generator
Create favicons from text, images, or emoji with all sizes included.
DesignColor Contrast Checker
Check foreground/background color contrast against WCAG 2.1 standards.
DesignCSS Grid Generator
Build CSS Grid layouts visually and copy the code.
DesignFrequently Asked Questions
- Who are these tools designed for?
- Web designers, UI/UX designers, front-end developers, content creators, and marketing teams working on responsive layouts, brand identity, video sizing, and social media graphics.
- Do I need design software installed?
- No. All tools run in your browser. They complement tools like Figma, Sketch, and VS Code by handling quick calculations without switching context.
- How does the Color Palette Generator ensure accessibility?
- It checks every generated color against both white and black backgrounds using WCAG contrast ratio formulas. Colors are tagged with AA (4.5:1 for normal text) and AAA (7:1) compliance levels so you can choose accessible combinations confidently.
- Can I export design values?
- Yes. The color palette tool exports as CSS variables, Tailwind config, or hex lists. Other tools let you copy individual values with one click.
Related Guides
View allAspect Ratios for Video and Web: A Complete Reference
A comprehensive reference for choosing the right aspect ratio for video content, social media posts, and responsive web design. Covers 16:9, 4:3, 9:16, 1:1, and more.
SVG Optimization: Why It Matters and How to Do It
A practical guide to understanding why SVG files exported from design tools contain unnecessary data, and how to optimize them for better web performance.
CSS Design Systems: Building Layouts, Effects, and Branding Assets in the Browser
Learn how to build a complete CSS design system using browser-based tools for flexbox layouts, visual effects, and branding assets — all without leaving your browser.
When to Use These Tools
Design work involves constant unit conversions and proportion checks. Use the CSS Unit Converter when translating pixel-based designs into responsive rem values. Use the Aspect Ratio Calculator when cropping images for social media or embedding responsive video.
The Color Palette Generator is particularly useful during branding work — enter your primary brand color and instantly generate complementary, analogous, and triadic harmonies, each with WCAG contrast ratings so you can maintain accessibility standards without manual calculations.
Explore Other Categories
Business Tools
Free business tools for pricing, profitability analysis, invoicing, ROI measurement, and team planning. Replace spreadsheet formulas with focused calculators built for real decisions.
Finance Tools
Free financial calculators for VAT across 30+ countries, profit margins, compound interest projections, loan amortization, and salary conversions. Accurate results using standard financial formulas.
Text & Data Tools
Free text utilities for word counting, case conversion, password generation, Markdown preview, email subject scoring, SEO meta analysis, and headline optimization. Many include AI-powered insights.
File & Image Tools
Compress JPEG, PNG, and WebP images, generate QR codes for URLs/Wi-Fi/contacts, and optimize SVG markup — all processed locally in your browser with zero uploads.
Date & Time Tools
Calculate exact differences between dates (in years, months, days, and weeks) and convert times between global time zones with automatic daylight saving handling.
Developer Tools
Free developer utilities for JSON formatting, Base64 encoding, JWT decoding, regex testing, UUID generation, hash computation, cron building, and more. Paste, convert, copy — all client-side.
Productivity Tools
Free productivity tools for focused work sessions, habit tracking, and quick note-taking. Build better routines and stay organized — all running privately in your browser.