Очуметь 13 тысяч байт там где можно обойтись парой градиентов.
<style type="text/css">
i#cp1,i#cp2,i#cp3 { position: absolute;display: block;width: 100px;height: 100px;
background:linear-gradient(to left,rgba(255, 0, 0, 1),rgba(255, 255, 255, 1));}
i#cp2{background:linear-gradient(to top, rgba(0, 0, 0, 1), rgba(255, 0, 0, 0));}
i#cp3{left: 110px;width: 10px;background:linear-gradient(to top,#F00,#FF0,#0F0,#0FF,#00F,#F0F,#F00);}
</style>
<b id="color_picker">
<i id="cp1"></i>
<i id="cp2"></i>
<i id="cp3"></i>
</b>