Material Color Picker

<div class="container">

    <div class="material-color-picker">

        <div class="material-color-picker__left-panel">

            <ol class="color-selector" data-bind="foreach: materialColors">

                <li>

                    <input name="material-color" type="radio" data-bind="attr: { id: 'materialColor' + $index() }, checked: selectedColor, value: color" >

                    <label data-bind="attr: { for: 'materialColor' + $index(), title: color }, style: { 'color': $data.variations[4].hex }"></label>

                </li>

            </ol>

        </div>

        <div class="material-color-picker__right-panel" data-bind="foreach: materialColors">

            <div class="color-palette-wrapper" data-bind="css: { 'js-active': selectedColor() === color }">

                <h2 class="color-palette-header" data-bind="text: color"></h2>

                <ol class="color-palette" data-bind="foreach: variations">

                    <li id="clipboardItem" class="color-palette__item" data-bind="attr: { 'data-clipboard-text': hex }, style: { 'background-color': hex }">

                        <span data-bind="text: weight"></span>

                        <span data-bind="text: hex"></span>

                        <span class="copied-indicator" data-bind="css: { 'js-copied': copiedHex() === hex }">颜色已复制!</span>

                    </li>

                </ol>

            </div>

        </div>

    </div>

</div>