how to get the colorpicker value?

How could I get the colorpicker value in an input with on change of red, green, blue colours?
http://jsbin.com/alefok/1/edit

<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="swatch" class="ui-widget-content ui-corner-all"></div>
<input type="text" id="colour">
<script>
  $(".ui-slider-handle").on('change', function(){
var valA = $("#red").slider("value");
var valB = $("#green").slider("value");
var valC = $("#blue").slider("value");
$("#colour").append(valA+","+ valB+","+ valC)
})
</script>
</body>

Solution

Set it on the refreshSwatch function which will trigger on the slide and change events of jQuery UI's slider along when the background-color is being updated.

function refreshSwatch(evt, ui) {
    var red = $("#red").slider("value"),
        green = $("#green").slider("option", "value"),
        blue = $("#blue").slider("value"),
        hex = hexFromRGB(red, green, blue);
    $("#swatch").css("background-color", "#" + hex);
    $("#colour").val("#" + hex);
}

Using these events will let you perform live updates. You can adjust the format of the value set to the text input.

See it here.