HTML5 color girişi kullanımı

Merhaba, size html5 ile color inputunu anlatmaya çalışıcam.

Standart bir inputumuz <input type="text" value="" > şeklinde tanımlanıyor bildiğiniz gibi bir text girişi bu. Color ise kullanımı gayet basit type="text" yerine color yazıcaz yani <input type="color" value="" > şeklinde kullanıcaz.
Kaydettiğimizde karşımıza şu şekil gelecektir.



Siyah kutucuğa tıkladıgımız da ise;

Karşımıza böyle bir ekran gelecektir, buradan istediğimiz rengi seçebiliriz.

Gelelim bunu aktif olarak kullanmaya. Bunu kullanabilmek için biraz javascript bilmemiz lazım

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(e) {

    $("#renk").change(function(){

  

  var renk = $(this).val(); //secilen rengı aldık degıskene atadık

  

  $("#kutu").css({ //Ardından id'si kutu olan div'in css ile background rengını degıstırdık

   "background-color":renk

   });

  });

});

</script>

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

<div id="kutu"></div>

Demosunu buradan görebilirsiniz

DEMO