Modern CSS Demos

Loading ...

.relative-color {
    display: grid;
    gap: 1rem;
}

.relative-color-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.relative-color-list-item {
    display: grid;
    gap: .5rem;
    border-radius: .5rem;
}

.relative-color-list-item-label {
    text-align: center;
}

.relative-color-token {
    --lightness: 100%;
    --basecolor: #0055cc;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.relative-color-token-item {
    height: clamp(15px, 3.5vh, 30px);
    flex-grow: 1;
}

.relative-color-token-item--hsl {
    background: hsl(from var(--basecolor) h s var(--lightness));
}

.relative-color-token-item--lch {
    background: lch(from var(--basecolor) var(--lightness) c h);
}

.relative-color-token-item--oklch {
    background: oklch(from var(--basecolor) var(--lightness) c h);
}

.relative-color-token-item--lab {
    background: lab(from var(--basecolor) var(--lightness) a b);
}

.relative-color-token-item--oklab {
    background: oklab(from var(--basecolor) var(--lightness) a b);
}

<div class="relative-color">
    <div class="relative-color-list">
                    <div class="relative-color-list-item">
                <div class="relative-color-list-item-label">hsl</div>
                <div class="relative-color-token">
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 0%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 5%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 10%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 15%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 20%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 25%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 30%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 35%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 40%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 45%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 50%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 55%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 60%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 65%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 70%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 75%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 80%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 85%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 90%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 95%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--hsl" style="--lightness: 100%;"></div>
                                    </div>
            </div>
                    <div class="relative-color-list-item">
                <div class="relative-color-list-item-label">lch</div>
                <div class="relative-color-token">
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 0%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 5%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 10%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 15%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 20%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 25%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 30%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 35%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 40%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 45%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 50%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 55%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 60%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 65%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 70%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 75%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 80%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 85%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 90%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 95%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lch" style="--lightness: 100%;"></div>
                                    </div>
            </div>
                    <div class="relative-color-list-item">
                <div class="relative-color-list-item-label">oklch</div>
                <div class="relative-color-token">
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 0%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 5%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 10%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 15%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 20%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 25%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 30%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 35%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 40%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 45%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 50%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 55%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 60%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 65%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 70%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 75%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 80%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 85%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 90%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 95%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklch" style="--lightness: 100%;"></div>
                                    </div>
            </div>
                    <div class="relative-color-list-item">
                <div class="relative-color-list-item-label">lab</div>
                <div class="relative-color-token">
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 0%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 5%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 10%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 15%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 20%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 25%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 30%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 35%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 40%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 45%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 50%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 55%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 60%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 65%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 70%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 75%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 80%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 85%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 90%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 95%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--lab" style="--lightness: 100%;"></div>
                                    </div>
            </div>
                    <div class="relative-color-list-item">
                <div class="relative-color-list-item-label">oklab</div>
                <div class="relative-color-token">
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 0%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 5%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 10%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 15%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 20%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 25%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 30%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 35%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 40%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 45%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 50%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 55%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 60%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 65%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 70%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 75%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 80%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 85%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 90%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 95%;"></div>
                                        <div class="relative-color-token-item relative-color-token-item--oklab" style="--lightness: 100%;"></div>
                                    </div>
            </div>
            </div>
    <div class="relative-color-picker">
        <div class="form">
            <div class="form-section">
                <label for="relative-color-picker-basecolor">Color:</label>
                <input
                    id="relative-color-picker-basecolor"
                    type="color"
                    value="#0055cc"
                    data-trigger="input"
                    data-target=".relative-color-token"
                    data-property="--basecolor"
                >
            </div>
        </div>
    </div>
</div>

Zoom

Document

Container