value

Called without any parameters, the value() method returns the selected color from the ColorPicker as an object with red, green, blue as properties.

There is a variety of other methods which can be used to get the color as a string in a different format:

• css() - returns a rgb css of the color: rgb(51,204,0)
• cssa() - returns a rgb cssa of the color: rgba(51,204,0,1)
• hex() - returns a hex string of the color: #33cc00
• hexa() - returns a hex string with and alpha channel of the color: #ff33cc00
• toCMYK() - returns an object with cyan, magenta, yellow, black, alpha properties
• toHSL() - returns an object with hue, saturation, lightness, alpha properties
• toHSV() - returns an object with hue, saturation, value, alpha properties

<input id="colorpicker" type="color" />

<script type="text/javascript">
     $(function () {
        $("#colorpicker").shieldColorPicker({
           value: "#33CC00"
        });

        $("#colorpicker").swidget().value();
        // returns {red: 0.2, green: 0.8, blue: 0, alpha: 1}

        $("#colorpicker").swidget().value().css();
        // returns "rgb(51,204,0)"

        $("#colorpicker").swidget().value().cssa();
        // returns "rgba(51,204,0,1)"

        $("#colorpicker").swidget().value().hex();
        // returns "#33cc00"

        $("#colorpicker").swidget().value().hexa();
        // returns "#ff33cc00"

        $("#colorpicker").swidget().value().toCMYK();
        // returns  {cyan: 0.7500000000000001, magenta: 0, yellow: 1, black: 0.19999999999999996, alpha: 1}

        $("#colorpicker").swidget().value().toHSL();
        // returns {hue: 0.29166666666666663, saturation: 1, lightness: 0.4, alpha: 1}

        $("#colorpicker").swidget().value().toHSV();
        // returns {hue: 0.29166666666666663, saturation: 1, value: 0.8, alpha: 1}

     });
</script>

Calling it with a string parameter will force the picker to select the corresponding color.
The parameter's value can be set in a different formats:

• hex - "#33cc00"
• css rgb - "rgb(51,204,0)"
• cssa rgb - "rgba(51,204,0,1)"

<input id="colorpicker" type="color" />

<script type="text/javascript">
     $(function () {
        $("#colorpicker").shieldColorPicker({
           value: "#33CC00"
        });

        $("#colorpicker").swidget().value("rgb(255,102,102)");
     });
</script>