<div class="row">
    <div class="col c6" style="min-width:400px">
        <div id="picker">
            <div id="display">
                <canvas style="position:absolute;left:0" height="400" width="400"></canvas>
                <svg style="position:absolute;left:0" height="400" width="400"></svg>
            </div>
            <table>
                <tr id="control-h">
                    <td class="cell-input">
                        <input type="number" min="0" max="360" step="any" class="counter counter-hue" tabindex="0"/>
                    </td>
                    <td><div class="range-slider"></div></td>
                    <td class="picker-label">H</td>
                </tr>
                <tr id="control-s">
                    <td class="cell-input">
                        <input type="number" step="any" min="0" max="100" class="counter counter-saturation"/>
                    </td>
                    <td><div class="range-slider"></div></td>
                    <td class="picker-label">S</td>
                </tr>
                <tr id="control-l">
                    <td class="cell-input">
                        <input type="number" step="any" min="0" max="100" class="counter counter-lightness"/>
                    </td>
                    <td><div class="range-slider"></div></td>
                    <td class="picker-label">L</td>
                </tr>
                <tr>
                    <td class="cell-input cell-input-hex">
                        <input class="input-hex" pattern="#?[0-9a-fA-F]{6}"/>
                    </td>
                    <td><div class="swatch"></div></td>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
    <div class="col c6 explanation-text">
        <p>
            HSLuv is a <a href="https://www.boronine.com/2012/03/26/Color-Spaces-for-Human-Beings/">
            human-friendly</a> alternative to <abbr>HSL</abbr>.
        </p>
        <p>
            Here you can see <a href="http://en.wikipedia.org/wiki/CIELUV">CIELUV</a>,
            a color space designed for perceptual uniformity based on human experiments. When
            accessed by polar coordinates, it becomes functionally similar to HSL
            with a single problem: its chroma component doesn't fit into a specific range.
        <p>
        <p>
            HSLuv extends CIELUV with a
            new saturation component that allows you to span all the available chroma as a neat
            percentage.
        </p>
    </div>
</div>

<script src="/static/picker.min.js" defer></script>
