I can't seem to add a new color. There seems to be something wrong with my "$newcolor.css" method.

//Problem: No user interaction causes no change to application
//Solution: When user interacts cause changes appropriately
var color = $(".selected").css("background-color");
//1. When clicking on control list items
$(".controls").on("click", "li", function()
                        {
                          //Deselect sibling elements
                          $(this).siblings().removeClass("selected");
                          //Select clicked element
                          $(this).addClass("selected");
                          //Cache current color
                          color = $(this).css("background-color");

                        });



//2. When add color is pressed
$("#revealColorSelect").click(function(){
                                        changeColor();
                                        $("#colorSelect").toggle();


                                        });
  //Show color select or hide select
  function changeColor()
{
  var r = $("#red").val();
  var g = $("#green").val();
  var b = $("#blue").val();
  $("#newColor").css("background-color", "rgb(" + r + "," + g + "," + b + ")");

}

//3.When color sliders change
$("input[type=range]").change(changeColor);
  //update the new color

//4. When add color is pressed
$("#addNewColor").click(function(){
                           var $newColor = ("<li></li>");
                           $newColor.css("background-color", $("#newColor").css("background-color"));
                           $(".controls ul").append($newColor);
                           $newColor.click();
                                    });
  //Append the color is pressed ul
  //Select the new color

//5. On mouse events on the canvas
  //Draw Lines