Modern CSS Demos

Loading ...

.colormixer {
    --color-space: srgb;
    --color-a-value: transparent;
    --color-a-percent: 100%;
    --color-b-value: transparent;
    --color-b-percent: 100%;
    --color-result: color-mix(
        in var(--color-space),
        var(--color-a-value) var(--color-a-percent),
        var(--color-b-value) var(--color-b-percent)
    );

height: calc(100vh - (2 * var(--demo-padding-y)));
    width: 100%;
    display: grid;
    gap: 1rem;
    grid-template:
        'colorpreview-a colorpreview-b' 1fr
        'colorresult colorresult' 1fr
        'colorcontrol colorcontrol' auto
    ;
    max-width: 900px;
    margin: 0 auto;
}

.colorpreview {
    border-radius: .25rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.colorpreview-a {
    grid-area: colorpreview-a;
    background-color: var(--color-a-value);
}

.colorpreview-b {
    grid-area: colorpreview-b;
    background-color: var(--color-b-value);
}

.colorpreview-data {
    font-size: 1.5rem;
    font-family: monospace;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.colorpreview-data-light {
    color: #ffffff;
}

.colorpreview-data-dark {
    color: #000000;
}

.colorresult {
    overflow: hidden;
    border-radius: .25rem;
    grid-area: colorresult;
    background-size: 1rem 1rem;
    background-position: center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg fill='%23fff'%3e%3cpath d='M15 1C13.3-.7 6 5 6 5H2L0 7l2 2 1 1-2 2 3 3 2-2 1 1 2 2 2-2v-4s5.7-7.3 4-9zM2.7 8.3 1.4 7l1-1H5L2.7 8.3zm7.3 5.3-1 1-1.3-1.3L10 11v2.6zm.3-4.3L7 12.6l-.3-.3-.7-.7-.7.7L4 13.6 2.4 12l1.3-1.3.7-.7-.7-.7-.3-.3 3.3-3.3c2-1.6 5.8-4.1 7.4-4.1h.2c.4.7-1.2 4.2-4 7.7z'/%3e%3cpath d='M11 4c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1zM1 15H0v1h1v-1zM2 14H1v1h1v-1zM1 13H0v1h1v-1zM3 15H2v1h1v-1z'/%3e%3c/g%3e%3c/svg%3e");
}

.colorresult-inner {
    height: 100%;
    width: 100%;
    background-color: var(--color-result);
}

.colorcontrol {
    grid-area: colorcontrol;
}

<div id="colormixer" class="colormixer">
    <div class="colorpreview colorpreview-a">
        <div class="colorpreview-data">
            <div class="colorpreview-data-light">
                <div data-colorpicker-value="--color-a-value"></div>
                <div data-colorpicker-value="--color-a-percent"></div>
            </div>
            <div class="colorpreview-data-dark">
                <div data-colorpicker-value="--color-a-value"></div>
                <div data-colorpicker-value="--color-a-percent"></div>
            </div>
        </div>
    </div>
    <div class="colorpreview colorpreview-b">
        <div class="colorpreview-data">
            <div class="colorpreview-data-light">
                <div data-colorpicker-value="--color-b-value"></div>
                <div data-colorpicker-value="--color-b-percent"></div>
            </div>
            <div class="colorpreview-data-dark">
                <div data-colorpicker-value="--color-b-value"></div>
                <div data-colorpicker-value="--color-b-percent"></div>
            </div>
        </div>
    </div>
    <div class="colorresult">
        <div class="colorresult-inner">
        </div>
    </div>
    <div class="colorcontrol">
        <div class="form">
            <div class="form-section">
                <label for="colorSchemeContext">Color Space:</label>
                <select id="colorSchemeContext"
                    data-trigger="change"
                    data-target="#colormixer"
                    data-property="--color-space"
                    >
                                        <option value="srgb">srgb</option>
                                        <option value="hsl">hsl</option>
                                        <option value="lch">lch</option>
                                        <option value="oklch">oklch</option>
                                        <option value="lab">lab</option>
                                        <option value="oklab">oklab</option>
                                    </select>
            </div>
            <div class="form-section">
                <label for="colorpicker-a-value">Color A:</label>
                <input
                    id="colorpicker-a-value"
                    class="colorpicker"
                    type="color"
                    name="colorpicker-a"
                    value="#00aaff"
                    data-trigger="input"
                    data-target="#colormixer"
                    data-property="--color-a-value"
                    data-value-elements="[data-colorpicker-value='--color-a-value']"
                >
                <input
                    id="colorpicker-a-percent"
                    type="range"
                    min="1"
                    max="100"
                    step="1"
                    value="100"
                    data-trigger="input"
                    data-target="#colormixer"
                    data-property="--color-a-percent"
                    data-value-affix="%"
                    data-value-elements="[data-colorpicker-value='--color-a-percent']"
                >
            </div>
            <div class="form-section">
                <label for="colorpicker-b-value">Color B:</label>
                <input
                    id="colorpicker-b-value"
                    class="colorpicker"
                    type="color"
                    name="colorpicker-b"
                    value="#ffaa00"
                    data-trigger="input"
                    data-target="#colormixer"
                    data-property="--color-b-value"
                    data-value-elements="[data-colorpicker-value='--color-b-value']"
                >
                <input
                    id="colorpicker-b-percent"
                    type="range"
                    min="1"
                    max="100"
                    step="1"
                    value="100"
                    data-trigger="input"
                    data-target="#colormixer"
                    data-property="--color-b-percent"
                    data-value-affix="%"
                    data-value-elements="[data-colorpicker-value='--color-b-percent']"
                >
            </div>
        </div>
    </div>
</div>

Zoom

Document

Container