Ajax color extender losing value on postback in ASP.Net

Please refer below code.

HTML

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        var colorPicker;
        Sys.Application.add_load(function () {
            var selectedColor = document.getElementById('<%=hfSelectedColor.ClientID %>').value;
            if (selectedColor != '') {
                document.getElementById('preview').style.backgroundColor = selectedColor;
            }
        });
        function Color_Changed(sender) {
            sender.get_element().value = "#" + sender.get_selectedColor();
            document.getElementById('<%=hfSelectedColor.ClientID %>').value = "#" + sender.get_selectedColor();
        }
    </script>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:TextBox ID="TextBox1" runat="server" Width="170px" />
    <br />
    <div id="preview" style="width: 70px; height: 70px; border: 1px solid #000; margin: 0 3px;
        float: left">
    </div>
    <asp:HiddenField ID="hfSelectedColor" runat="server" />
    <asp:Button ID="Button1" runat="server" Text="Choose Color" Width="90px" />
    <cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox1"
        BehaviorID="ColorPicker1" SampleControlID="preview" PopupButtonID="Button1" PopupPosition="Right"
        OnClientColorSelectionChanged="Color_Changed" />
    <asp:Button Text="save" runat="server" />
</div>

Screenshot