An aspect ratio describes the proportional relationship between width and height. It is written as two numbers separated by a colon — 16:9 means the width is 16 units for every 9 units of height. Getting the ratio right prevents stretched images and broken layouts.
Enter your width and height, or pick a preset. With ratio lock enabled, changing one dimension automatically scales the other to preserve proportions. The preview draws your ratio to scale, and common resolutions give you instant starting points for video, web, and print.
Frequently Asked Questions
Q: What are the most common aspect ratios?
What are the most common aspect ratios? 16:9 for video and screens, 4:3 for older TVs and presentations, 1:1 for social media posts, 9:16 for vertical video, and 3:2 for photography.
Q: How do I calculate an aspect ratio from dimensions?
How do I calculate an aspect ratio from dimensions? Divide both numbers by their greatest common divisor. For 1920x1080, both divide by 120, giving 16:9.
Q: What aspect ratio should I use for YouTube?
What aspect ratio should I use for YouTube? 16:9 is the standard. For Shorts and TikTok-style vertical video, use 9:16.
Q: Can I use aspect-ratio in CSS?
Can I use aspect-ratio in CSS? Yes, the aspect-ratio property is supported in all modern browsers since 2021. It replaces the old padding-top hack.
Q: Why do my images look stretched?
Why do my images look stretched? The container size does not match the image ratio. Either crop the image to the container ratio or use object-fit: cover to fill without distortion.
CSS Named Colors & Color Psychology
The web has 148 named colors built into CSS, from Coral to Goldenrod. Beyond the code, color psychology shapes how users feel about interfaces — warm tones energize, cool tones calm, and neutrals build trust. This palette mixes CSS classics with the psychology behind them.
Coral #FF7F50Warm and friendly — popular for CTAs in lifestyle brands
Tomato #FF6347Energetic red-orange, great for urgent accents
Goldenrod #DAA520Earthy gold associated with quality and heritage
Teal #008080Balanced blue-green — calm, trustworthy, professional
Indigo #4B0082Deep violet tied to wisdom and premium brands
Crimson #DC143CBold red for passion, alerts, and strong emphasis
SlateBlue #6A5ACDSoft purple-blue common in SaaS dashboards
ForestGreen #228B22Nature and growth — the color of eco and finance brands
HotPink #FF69B4Playful and bold, the signature of youth-oriented design
Navy #000080Authority and stability — the suit-and-tie of colors
Q: What are CSS named colors?
What are CSS named colors? CSS defines 148 named colors like Coral and Goldenrod that work in any stylesheet without hex codes. They are great for prototyping but designers usually switch to hex or HSL for precise brand colors.
Q: How does color psychology affect design?
How does color psychology affect design? Warm colors (red, orange, yellow) create energy and urgency; cool colors (blue, green, teal) create calm and trust. CTAs often use warm tones while financial and health brands prefer blues and greens.