<h1>
    ColorPicker
    <div id="output">
        Select a background for me!
    </div>
</h1>

<p>
    The ColorPicker control is a panel that allows users to pick
    colors. It is uses as a drop-down by the InputColor control:
</p>
@Html.C1().ColorPicker().Id("theColorPicker")

<p>
    You can customize the ColorPicker by changing the value of the
    <b>showAlphaChannel</b>, <b>showColorString</b>, and <b>palette</b>
    properties:
</p>
<div class="demo-settings">
    <label for="showAlphaChannel">showAlphaChannel: </label>
    <input id="showAlphaChannel" type="checkbox" checked="checked">
    <br>
    <label for="showColorString">showColorString: </label>
    <input id="showColorString" type="checkbox" checked="checked">
    <br>
    <label for="thePalette">palette: </label>
    @Html.C1().ComboBox().Id("thePalette").DisplayMemberPath("name")
    <br>
</div>
@Html.C1().ColorPicker().Id("theColorPickerCst")