CSS 32 💻 aspect-ratio and color media features - KandZ

These two media features let you adapt styles based on the shape of the viewport and the color capabilities of the output device — useful for responsive design and print optimization.

Overview of Features

Feature	Description	Values
`aspect-ratio`	Ratio of viewport width to height	`16/9`, `4/3`, `1/1`
`color`	Bits per color component (RGB)	Integer (e.g., `8`, `32`)

1. aspect-ratio

The aspect-ratio media feature applies styles based on the ratio of the viewport’s width to its height.

@media (aspect-ratio: 16/9) {
    .box {
        width: 500px;
        height: auto;
        background-color: #ffcccc;
    }
}

Syntax

aspect-ratio: <width> / <height>

Variations

Feature	Description	Example
`aspect-ratio`	Exact ratio	`@media (aspect-ratio: 16/9)`
`min-aspect-ratio`	Minimum ratio	`@media (min-aspect-ratio: 4/3)`
`max-aspect-ratio`	Maximum ratio	`@media (max-aspect-ratio: 3/2)`

Common Aspect Ratios

Ratio	Description	Typical Use
`16/9`	Widescreen	Modern monitors, TVs
`4/3`	Traditional	Older monitors, tablets
`21/9`	Ultra-wide	Cinematic displays
`1/1`	Square	Mobile portrait
`9/16`	Vertical	Mobile landscape

Key Points:

The viewport’s aspect ratio changes when the user rotates their device or resizes their browser
Useful for adapting layouts to portrait vs. landscape orientations
You can use min-aspect-ratio and max-aspect-ratio for range-based queries

2. color

The color media feature applies styles based on the number of bits per color component (red, green, blue) of the output device.

@media (color) {
    p {
        color: blue;
    }
}

@media (min-color: 32) {
    p {
        color: red;
    }
}

Syntax

color: <integer>
color: < 12
color: >= 24

Variations

Feature	Description	Example
`color`	Device has color	`@media (color)`
`min-color`	Minimum bits per component	`@media (min-color: 8)`
`max-color`	Maximum bits per component	`@media (max-color: 32)`

Common Color Depths

Bits per Component	Total Colors	Description
`0`	Monochrome	No color (e.g., e-ink)
`8`	16.7 million	Standard color (24-bit total)
`10`	1.07 billion	HDR displays
`12`	68.7 billion	Professional displays
`16`	—	High-end displays

Key Points:

color: 0 means the device is monochrome (no color)
color without a value applies if the device has any color capability
min-color: 8 means at least 8 bits per component (24-bit color)
The value is per component (red, green, or blue), not total bits

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>aspect-ratio and color Media Features</title>
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f8f9fa;
            line-height: 1.6;
            min-height: 100vh;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        h3 {
            color: #333;
            margin-top: 20px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .note {
            font-size: 0.9rem;
            color: #6c757d;
            margin-top: 5px;
        }

        .highlight {
            background: #ffc107;
            color: #333;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: bold;
        }

        /* ====== ASPECT RATIO DEMO ====== */
        .container {
            width: 100%;
            min-height: 50vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #e9ecef;
            border-radius: 8px;
            margin: 15px 0;
            padding: 20px;
            transition: background 0.3s;
        }

        .box {
            width: 300px;
            height: 200px;
            background-color: #dc3545;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            text-align: center;
            padding: 20px;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .box .ratio-label {
            font-size: 0.8rem;
            opacity: 0.8;
            margin-top: 5px;
        }

        /* Aspect ratio: 16/9 */
        @media (aspect-ratio: 16/9) {
            .box {
                width: 500px;
                height: auto;
                background-color: #ffcccc;
                color: #333;
            }
            .box .ratio-label::after {
                content: " (16:9 detected!)";
                font-weight: bold;
            }
        }

        /* Aspect ratio: 4/3 */
        @media (aspect-ratio: 4/3) {
            .box {
                width: 400px;
                height: 300px;
                background-color: #ffc107;
                color: #333;
            }
            .box .ratio-label::after {
                content: " (4:3 detected!)";
                font-weight: bold;
            }
        }

        /* Aspect ratio: 1/1 (square) */
        @media (aspect-ratio: 1/1) {
            .box {
                width: 300px;
                height: 300px;
                background-color: #6c5ce7;
                border-radius: 50%;
            }
            .box .ratio-label::after {
                content: " (1:1 square detected!)";
                font-weight: bold;
            }
        }

        /* Portrait orientation */
        @media (max-aspect-ratio: 1/1) {
            .container {
                background: #d4edda;
            }
        }

        /* Landscape orientation */
        @media (min-aspect-ratio: 1/1) {
            .container {
                background: #cce5ff;
            }
        }

        /* ====== COLOR DEMO ====== */
        .color-demo {
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
            font-size: 1.2rem;
            background: #e9ecef;
            margin: 15px 0;
            border: 2px solid #ddd;
        }

        /* Monochrome device */
        @media (color: 0) {
            .color-demo {
                background: #000;
                color: #fff;
                border-color: #fff;
            }
            .color-demo::after {
                content: " (monochrome device detected)";
                font-weight: normal;
                font-size: 0.85rem;
            }
        }

        /* Any color device */
        @media (color) {
            .color-demo {
                background: linear-gradient(135deg, #007bff, #6c5ce7);
                color: white;
                border-color: #007bff;
            }
            .color-demo::after {
                content: " (color device detected)";
                font-weight: normal;
                font-size: 0.85rem;
            }
        }

        /* High color depth */
        @media (min-color: 32) {
            .color-demo {
                background: linear-gradient(135deg, #ff6b6b, #ffc107, #28a745);
                border-color: #ffc107;
            }
            .color-demo::after {
                content: " (high color depth ≥ 32 bits)";
                font-weight: normal;
                font-size: 0.85rem;
            }
        }

        /* ====== COLOR DETECTION GRID ====== */
        .color-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }

        .color-card {
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            border: 2px solid #ddd;
            background: #f8f9fa;
        }

        .color-card .label {
            font-size: 0.85rem;
            color: #666;
            display: block;
            margin-bottom: 5px;
        }

        .color-card .value {
            font-size: 1.2rem;
            font-weight: bold;
            color: #007bff;
        }

        /* Color depth indicators */
        .color-card.depth-0 {
            background: #000;
            color: #fff;
            border-color: #333;
        }
        .color-card.depth-0 .value { color: #fff; }

        .color-card.depth-8 {
            background: #cce5ff;
            border-color: #007bff;
        }
        .color-card.depth-8 .value { color: #007bff; }

        .color-card.depth-16 {
            background: #d4edda;
            border-color: #28a745;
        }
        .color-card.depth-16 .value { color: #28a745; }

        .color-card.depth-32 {
            background: #fff3cd;
            border-color: #ffc107;
        }
        .color-card.depth-32 .value { color: #856404; }

        /* ====== LIVE INDICATOR ====== */
        .live-indicator {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: #007bff;
            color: white;
            padding: 12px 20px;
            border-radius: 50px;
            font-weight: bold;
            font-size: 0.85rem;
            box-shadow: 0 4px 15px rgba(0,123,255,0.4);
            z-index: 1000;
            transition: all 0.3s;
        }

        .live-indicator::before {
            content: "📐 Aspect Ratio: ";
        }

        /* ====== PRACTICAL EXAMPLE ====== */
        .video-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            margin: 20px auto;
            background: #000;
            border-radius: 8px;
            overflow: hidden;
        }

        .video-container .video-placeholder {
            aspect-ratio: 16/9;
            background: linear-gradient(135deg, #1e1e1e, #2d2d2d);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .video-container .video-placeholder .play-icon {
            font-size: 3rem;
            margin-bottom: 10px;
        }

        @media (max-aspect-ratio: 4/3) {
            .video-container .video-placeholder {
                aspect-ratio: 4/3;
                background: linear-gradient(135deg, #2d1b4e, #1e1e1e);
            }
            .video-container .video-placeholder::after {
                content: " (4:3 mode)";
                font-weight: normal;
                font-size: 0.85rem;
            }
        }
    </style>
</head>
<body>

    <h1>aspect-ratio and color Media Features</h1>

    <!-- ====== 1. ASPECT-RATIO DEMO ====== -->
    <section>
        <h2>1. aspect-ratio</h2>
        <p>Applies styles based on the <strong>viewport's width-to-height ratio</strong>.</p>
        <p>Resize your browser or rotate your device to see the changes!</p>

        <div class="container">
            <div class="box">
                <span>Aspect Ratio Demo</span>
                <span class="ratio-label">Default (no ratio matched)</span>
            </div>
        </div>

        <div class="code-block">
            /* Default state */
            .box {
                width: 300px;
                height: 200px;
                background-color: #dc3545;
            }

            /* 16:9 widescreen */
            @media (aspect-ratio: 16/9) {
                .box {
                    width: 500px;
                    height: auto;
                    background-color: #ffcccc;
                }
            }

            /* 4:3 traditional */
            @media (aspect-ratio: 4/3) {
                .box {
                    width: 400px;
                    height: 300px;
                    background-color: #ffc107;
                }
            }

            /* 1:1 square */
            @media (aspect-ratio: 1/1) {
                .box {
                    width: 300px;
                    height: 300px;
                    background-color: #6c5ce7;
                    border-radius: 50%;
                }
            }

            /* Portrait orientation */
            @media (max-aspect-ratio: 1/1) {
                .container { background: #d4edda; }
            }

            /* Landscape orientation */
            @media (min-aspect-ratio: 1/1) {
                .container { background: #cce5ff; }
            }
        </div>
    </section>

    <!-- ====== 2. COLOR DEMO ====== -->
    <section>
        <h2>2. color</h2>
        <p>Applies styles based on the <strong>number of bits per color component</strong>.</p>

        <div class="color-demo">
            Color Device Detection
        </div>

        <div class="code-block">
            /* Monochrome device (no color) */
            @media (color: 0) {
                .color-demo {
                    background: #000;
                    color: #fff;
                }
            }

            /* Any color device */
            @media (color) {
                .color-demo {
                    background: linear-gradient(135deg, #007bff, #6c5ce7);
                    color: white;
                }
            }

            /* High color depth (≥ 32 bits) */
            @media (min-color: 32) {
                .color-demo {
                    background: linear-gradient(135deg, #ff6b6b, #ffc107, #28a745);
                }
            }
        </div>
    </section>

    <!-- ====== 3. COLOR DEPTH DETECTION ====== -->
    <section>
        <h2>3. Color Depth Detection</h2>
        <p>Your device's color capabilities are detected below.</p>

        <div class="color-grid">
            <div class="color-card" id="color-monochrome">
                <span class="label">color: 0</span>
                <span class="value">Monochrome</span>
            </div>
            <div class="color-card" id="color-any">
                <span class="label">color (any)</span>
                <span class="value">Color</span>
            </div>
            <div class="color-card" id="color-8">
                <span class="label">min-color: 8</span>
                <span class="value">Standard</span>
            </div>
            <div class="color-card" id="color-16">
                <span class="label">min-color: 16</span>
                <span class="value">High</span>
            </div>
            <div class="color-card" id="color-32">
                <span class="label">min-color: 32</span>
                <span class="value">Ultra</span>
            </div>
        </div>

        <div class="code-block">
            /* Detect monochrome */
            @media (color: 0) { /* No color */ }

            /* Detect any color */
            @media (color) { /* Has color */ }

            /* Detect color depth */
            @media (min-color: 8) { /* At least 8 bits per component */ }
            @media (min-color: 16) { /* At least 16 bits per component */ }
            @media (min-color: 32) { /* At least 32 bits per component */ }
        </div>
    </section>

    <!-- ====== 4. PRACTICAL EXAMPLE ====== -->
    <section>
        <h2>4. Practical Example: Responsive Video Container</h2>
        <p>A video container that adapts to different aspect ratios.</p>

        <div class="video-container">
            <div class="video-placeholder">
                <span class="play-icon">▶️</span>
                <span>Video Player</span>
            </div>
        </div>

        <div class="code-block">
            /* 16:9 aspect ratio (widescreen) */
            .video-placeholder {
                aspect-ratio: 16/9;
            }

            /* 4:3 aspect ratio (traditional) */
            @media (max-aspect-ratio: 4/3) {
                .video-placeholder {
                    aspect-ratio: 4/3;
                }
            }
        </div>
    </section>

    <!-- ====== 5. REFERENCE TABLES ====== -->
    <section>
        <h2>5. Reference Tables</h2>

        <h3>aspect-ratio Values</h3>
        <table class="reference-table">
            <tr>
                <th>Feature</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>aspect-ratio</code></td>
                <td>Exact aspect ratio</td>
                <td><code>@media (aspect-ratio: 16/9)</code></td>
            </tr>
            <tr>
                <td><code>min-aspect-ratio</code></td>
                <td>Minimum aspect ratio</td>
                <td><code>@media (min-aspect-ratio: 4/3)</code></td>
            </tr>
            <tr>
                <td><code>max-aspect-ratio</code></td>
                <td>Maximum aspect ratio</td>
                <td><code>@media (max-aspect-ratio: 3/2)</code></td>
            </tr>
        </table>

        <h3>Common Aspect Ratios</h3>
        <table class="reference-table">
            <tr>
                <th>Ratio</th>
                <th>Description</th>
                <th>Typical Use</th>
            </tr>
            <tr>
                <td><code>16/9</code></td>
                <td>Widescreen</td>
                <td>Modern monitors, TVs, video</td>
            </tr>
            <tr>
                <td><code>4/3</code></td>
                <td>Traditional</td>
                <td>Older monitors, tablets</td>
            </tr>
            <tr>
                <td><code>21/9</code></td>
                <td>Ultra-wide</td>
                <td>Cinematic displays</td>
            </tr>
            <tr>
                <td><code>1/1</code></td>
                <td>Square</td>
                <td>Mobile portrait, avatars</td>
            </tr>
            <tr>
                <td><code>9/16</code></td>
                <td>Vertical</td>
                <td>Mobile landscape, stories</td>
            </tr>
        </table>

        <h3>color Values</h3>
        <table class="reference-table">
            <tr>
                <th>Feature</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>color</code></td>
                <td>Device has color</td>
                <td><code>@media (color)</code></td>
            </tr>
            <tr>
                <td><code>min-color</code></td>
                <td>Minimum bits per component</td>
                <td><code>@media (min-color: 8)</code></td>
            </tr>
            <tr>
                <td><code>max-color</code></td>
                <td>Maximum bits per component</td>
                <td><code>@media (max-color: 32)</code></td>
            </tr>
            <tr>
                <td><code>color: 0</code></td>
                <td>Monochrome device</td>
                <td><code>@media (color: 0)</code></td>
            </tr>
        </table>

        <h3>Common Color Depths</h3>
        <table class="reference-table">
            <tr>
                <th>Bits per Component</th>
                <th>Total Colors</th>
                <th>Description</th>
            </tr>
            <tr>
                <td><code>0</code></td>
                <td>Monochrome</td>
                <td>No color (e-ink, braille)</td>
            </tr>
            <tr>
                <td><code>8</code></td>
                <td>16.7 million</td>
                <td>Standard color (24-bit total)</td>
            </tr>
            <tr>
                <td><code>10</code></td>
                <td>1.07 billion</td>
                <td>HDR displays</td>
            </tr>
            <tr>
                <td><code>12</code></td>
                <td>68.7 billion</td>
                <td>Professional displays</td>
            </tr>
            <tr>
                <td><code>16</code></td>
                <td>—</td>
                <td>High-end displays</td>
            </tr>
        </table>
    </section>

    <!-- ====== 6. BEST PRACTICES ====== -->
    <section>
        <h2>6. Best Practices</h2>

        <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
            <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
            <ul>
                <li>Use <code>aspect-ratio</code> to adapt layouts to different screen shapes</li>
                <li>Use <code>max-aspect-ratio</code> and <code>min-aspect-ratio</code> for range queries</li>
                <li>Use <code>color</code> to detect monochrome devices and provide fallbacks</li>
                <li>Use <code>min-color</code> to detect high color depth displays</li>
                <li>Test on different devices and orientations</li>
                <li>Combine with <code>orientation</code> for comprehensive device detection</li>
            </ul>
        </div>

        <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
            <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
            <ul>
                <li>Don't rely solely on aspect-ratio for responsive design</li>
                <li>Don't forget that aspect-ratio changes with orientation</li>
                <li>Don't assume all devices have color (e-ink readers exist)</li>
                <li>Don't use <code>color</code> for critical functionality — use it for enhancements</li>
                <li>Don't confuse bits per component with total bits</li>
            </ul>
        </div>
    </section>

    <!-- ====== LIVE INDICATOR ====== -->
    <div class="live-indicator" id="live-indicator">Detecting...</div>

    <!-- ====== SCRIPT FOR DETECTION ====== -->
    <script>
        function updateIndicators() {
            // Aspect ratio indicator
            const indicator = document.getElementById('live-indicator');
            const w = window.innerWidth;
            const h = window.innerHeight;
            const ratio = (w / h).toFixed(2);
            let ratioName = '';
            const exactRatio = w / h;

            if (Math.abs(exactRatio - 16/9) < 0.05) ratioName = '16:9';
            else if (Math.abs(exactRatio - 4/3) < 0.05) ratioName = '4:3';
            else if (Math.abs(exactRatio - 1) < 0.05) ratioName = '1:1';
            else if (exactRatio > 1) ratioName = 'Landscape';
            else ratioName = 'Portrait';

            indicator.textContent = '📐 ' + ratioName + ' (' + w + '×' + h + ' = ' + ratio + ')';

            // Color depth detection
            const colorCards = {
                monochrome: document.getElementById('color-monochrome'),
                any: document.getElementById('color-any'),
                c8: document.getElementById('color-8'),
                c16: document.getElementById('color-16'),
                c32: document.getElementById('color-32')
            };

            // Reset classes
            Object.values(colorCards).forEach(card => {
                if (card) card.className = 'color-card';
            });

            // Check color: 0 (monochrome)
            if (window.matchMedia('(color: 0)').matches) {
                colorCards.monochrome.className = 'color-card depth-0';
                colorCards.monochrome.querySelector('.value').textContent = 'Detected ✅';
            } else {
                colorCards.monochrome.querySelector('.value').textContent = 'Not monochrome';
            }

            // Check any color
            if (window.matchMedia('(color)').matches) {
                colorCards.any.className = 'color-card depth-8';
                colorCards.any.querySelector('.value').textContent = 'Detected ✅';
            }

            // Check min-color: 8
            if (window.matchMedia('(min-color: 8)').matches) {
                colorCards.c8.className = 'color-card depth-8';
                colorCards.c8.querySelector('.value').textContent = '≥ 8 bits ✅';
            }

            // Check min-color: 16
            if (window.matchMedia('(min-color: 16)').matches) {
                colorCards.c16.className = 'color-card depth-16';
                colorCards.c16.querySelector('.value').textContent = '≥ 16 bits ✅';
            }

            // Check min-color: 32
            if (window.matchMedia('(min-color: 32)').matches) {
                colorCards.c32.className = 'color-card depth-32';
                colorCards.c32.querySelector('.value').textContent = '≥ 32 bits ✅';
            }
        }

        window.addEventListener('resize', updateIndicators);
        window.addEventListener('load', updateIndicators);
        updateIndicators();
    </script>

</body>
</html>

Quick Reference

Feature	Description	Values
`aspect-ratio`	Viewport width-to-height ratio	`16/9`, `4/3`, `1/1`
`color`	Bits per color component	Integer (0, 8, 16, 32)

aspect-ratio Variations

Feature	Description	Example
`aspect-ratio`	Exact ratio	`@media (aspect-ratio: 16/9)`
`min-aspect-ratio`	Minimum ratio	`@media (min-aspect-ratio: 4/3)`
`max-aspect-ratio`	Maximum ratio	`@media (max-aspect-ratio: 3/2)`

Common Aspect Ratios

Ratio	Description	Typical Use
`16/9`	Widescreen	Modern monitors, TVs
`4/3`	Traditional	Older monitors, tablets
`21/9`	Ultra-wide	Cinematic displays
`1/1`	Square	Mobile portrait
`9/16`	Vertical	Mobile landscape

color Variations

Feature	Description	Example
`color`	Device has color	`@media (color)`
`min-color`	Minimum bits per component	`@media (min-color: 8)`
`max-color`	Maximum bits per component	`@media (max-color: 32)`
`color: 0`	Monochrome device	`@media (color: 0)`

Common Color Depths

Bits per Component	Total Colors	Description
`0`	Monochrome	No color (e-ink)
`8`	16.7 million	Standard color
`10`	1.07 billion	HDR displays
`12`	68.7 billion	Professional displays
`16`	—	High-end displays

Best Practices

✅ Do This:

/* Adapt layout to different aspect ratios */
@media (aspect-ratio: 16/9) {
    .video-container {
        aspect-ratio: 16/9;
    }
}

@media (max-aspect-ratio: 4/3) {
    .video-container {
        aspect-ratio: 4/3;
    }
}

/* Provide fallbacks for monochrome devices */
@media (color: 0) {
    .chart {
        /* Use patterns instead of colors */
        background-image: repeating-linear-gradient(...);
    }
}

/* Enhance for high color depth */
@media (min-color: 32) {
    .hero {
        background: linear-gradient(135deg, #ff6b6b, #ffc107, #28a745);
    }
}

❌ Don’t Do This:

/* Don't rely solely on aspect-ratio for responsiveness */
@media (aspect-ratio: 16/9) {
    /* This won't catch all widescreen devices */
}

/* Don't assume all devices have color */
.chart {
    color: #ff0000; /* May not be visible on monochrome */
}

/* Don't forget that aspect-ratio changes with orientation */
/* A 16:9 landscape device becomes 9:16 in portrait */

Pro Tip: aspect-ratio is great for adapting to device orientation and screen shape. Use it to switch between portrait and landscape layouts or to adjust video player dimensions. color is useful for accessibility — providing fallbacks for monochrome e-ink devices. Remember that aspect-ratio changes when the user rotates their device, so you might want to use both aspect-ratio and orientation together for precise control!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!

Overview of Features

1. aspect-ratio

Syntax

Variations

Common Aspect Ratios

2. color

Syntax

Variations

Common Color Depths

Complete Example

Quick Reference

aspect-ratio Variations

Common Aspect Ratios

color Variations

Common Color Depths

Best Practices

Ads Blocker Detected!!!