{"id":3564,"date":"2010-04-01T10:23:11","date_gmt":"2010-04-01T14:23:11","guid":{"rendered":"http:\/\/www.bgpublishing.com\/bgp\/?page_id=3564"},"modified":"2010-04-01T10:24:16","modified_gmt":"2010-04-01T14:24:16","slug":"color-picker","status":"publish","type":"page","link":"https:\/\/www.bgpublishing.com\/bgp\/color-picker\/","title":{"rendered":"BGP Color Picker"},"content":{"rendered":"<p>\n\t\t<script type=\"text\/javascript\" src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/prototype.js\" ><\/script><br \/>\n\t\t<script type=\"text\/javascript\" src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/colormethods.js\" ><\/script><br \/>\n\t\t<script type=\"text\/javascript\" src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/colorvaluepicker.js\" ><\/script><br \/>\n\t\t<script type=\"text\/javascript\" src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/slider.js\" ><\/script><br \/>\n\t\t<script type=\"text\/javascript\" src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/colorpicker.js\" ><\/script><\/p>\n<p>\t<\/head><br \/>\n\t<body><\/p>\n<p>\t\tPhotoshop-like JavaScript Color Picker<\/p>\n<p>This color picker mimics Photoshop color picker by layering transparent images.<\/p>\n<table>\n<tr>\n<td valign=\"top\">\n<div id=\"cp1_ColorMap\"><\/div>\n<\/td>\n<td valign=\"top\">\n<div id=\"cp1_ColorBar\"><\/div>\n<\/td>\n<td valign=\"top\">\n<table>\n<tr>\n<td colspan=\"3\">\n<div id=\"cp1_Preview\" style=\"background-color: #fff; width: 60px; height: 60px; padding: 0; margin: 0; border: solid 1px #000;\">\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n\t\t\t\t\t\t\t\t<input type=\"radio\" id=\"cp1_HueRadio\" name=\"cp1_Mode\" value=\"0\" \/>\n\t\t\t\t\t\t\t<\/td>\n<td>\n\t\t\t\t\t\t\t\t<label for=\"cp1_HueRadio\">H:<\/label>\n\t\t\t\t\t\t\t<\/td>\n<td>\n\t\t\t\t\t\t\t\t<input type=\"text\" id=\"cp1_Hue\" value=\"0\" style=\"width: 40px;\" \/> &deg;\n\t\t\t\t\t\t\t<\/td>\n<\/tr>\n<tr>\n<td>\n\t\t\t\t\t\t\t\t<input type=\"radio\" id=\"cp1_SaturationRadio\" name=\"cp1_Mode\" value=\"1\" \/>\n\t\t\t\t\t\t\t<\/td>\n<td>\n\t\t\t\t\t\t\t\t<label for=\"cp1_SaturationRadio\">S:<\/label>\n\t\t\t\t\t\t\t<\/td>\n<td>\n\t\t\t\t\t\t\t\t<input type=\"text\" id=\"cp1_Saturation\" value=\"100\" style=\"width: 40px;\" \/> %\n\t\t\t\t\t\t\t<\/td>\n<\/tr>\n<tr>\n<td>\n\t\t\t\t\t\t\t\t<input type=\"radio\" id=\"cp1_BrightnessRadio\" name=\"cp1_Mode\" value=\"2\" \/>\n\t\t\t\t\t\t\t<\/td>\n<td>\n\t\t\t\t\t\t\t\t<label for=\"cp1_BrightnessRadio\">B:<\/label>\n\t\t\t\t\t\t\t<\/td>\n<td>\n\t\t\t\t\t\t\t\t<input type=\"text\" id=\"cp1_Brightness\" value=\"100\" style=\"width: 40px;\" \/> %\n\t\t\t\t\t\t\t<\/td>\n<\/tr>\n<tr>\n<td colspan=\"3\" height=\"5\">\n<\/td>\n<\/tr>\n<tr>\n<td>\n\t\t\t\t\t\t\t\t<input type=\"radio\" id=\"cp1_RedRadio\" name=\"cp1_Mode\" value=\"r\" \/>\n\t\t\t\t\t\t\t<\/td>\n<td>\n\t\t\t\t\t\t\t\t<label for=\"cp1_RedRadio\">R:<\/label>\n\t\t\t\t\t\t\t<\/td>\n<td>\n\t\t\t\t\t\t\t\t<input type=\"text\" id=\"cp1_Red\" value=\"255\" style=\"width: 40px;\" \/>\n\t\t\t\t\t\t\t<\/td>\n<\/tr>\n<tr>\n<td>\n\t\t\t\t\t\t\t\t<input type=\"radio\" id=\"cp1_GreenRadio\" name=\"cp1_Mode\" value=\"g\" \/>\n\t\t\t\t\t\t\t<\/td>\n<td>\n\t\t\t\t\t\t\t\t<label for=\"cp1_GreenRadio\">G:<\/label>\n\t\t\t\t\t\t\t<\/td>\n<td>\n\t\t\t\t\t\t\t\t<input type=\"text\" id=\"cp1_Green\" value=\"0\" style=\"width: 40px;\" \/>\n\t\t\t\t\t\t\t<\/td>\n<\/tr>\n<tr>\n<td>\n\t\t\t\t\t\t\t\t<input type=\"radio\" id=\"cp1_BlueRadio\" name=\"cp1_Mode\" value=\"b\" \/>\n\t\t\t\t\t\t\t<\/td>\n<td>\n\t\t\t\t\t\t\t\t<label for=\"cp1_BlueRadio\">B:<\/label>\n\t\t\t\t\t\t\t<\/td>\n<td>\n\t\t\t\t\t\t\t\t<input type=\"text\" id=\"cp1_Blue\" value=\"0\" style=\"width: 40px;\" \/>\n\t\t\t\t\t\t\t<\/td>\n<\/tr>\n<tr>\n<td>\n\t\t\t\t\t\t\t\t#:\n\t\t\t\t\t\t\t<\/td>\n<td colspan=\"2\">\n\t\t\t\t\t\t\t\t<input type=\"text\" id=\"cp1_Hex\" value=\"FF0000\" style=\"width: 60px;\" \/>\n\t\t\t\t\t\t\t<\/td>\n<\/tr>\n<\/table>\n<\/td>\n<\/tr>\n<\/table>\n<div style=\"display:none;\">\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/rangearrows.gif\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/mappoint.gif\" \/><\/p>\n<p>\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/bar-saturation.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/bar-brightness.png\" \/><\/p>\n<p>\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/bar-blue-tl.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/bar-blue-tr.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/bar-blue-bl.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/bar-blue-br.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/bar-red-tl.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/bar-red-tr.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/bar-red-bl.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/bar-red-br.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/bar-green-tl.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/bar-green-tr.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/bar-green-bl.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/bar-green-br.png\" \/><\/p>\n<p>\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/map-red-max.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/map-red-min.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/map-green-max.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/map-green-min.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/map-blue-max.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/map-blue-min.png\" \/><\/p>\n<p>\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/map-saturation.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/map-saturation-overlay.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/map-brightness.png\" \/><br \/>\n\t\t<img src=\"http:\/\/www.bgpublishing.com\/bgp\/wp-content\/uploads\/refresh_web\/colorpicker\/images\/map-hue.png\" \/><\/p><\/div>\n<p>\t<script type=\"text\/javascript\"><\/p>\n<p>\tEvent.observe(window,'load',function() {\n\t\tcp1 = new Refresh.Web.ColorPicker('cp1',{startHex: 'ffcc00', startMode:'s'});\n\t});<\/p>\n<p>\t<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Photoshop-like JavaScript Color Picker This color picker mimics Photoshop color picker by layering transparent images. H: &deg; S: % B: % R: G: B: #:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":11,"comment_status":"open","ping_status":"open","template":"","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":""},"_links":{"self":[{"href":"https:\/\/www.bgpublishing.com\/bgp\/wp-json\/wp\/v2\/pages\/3564"}],"collection":[{"href":"https:\/\/www.bgpublishing.com\/bgp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bgpublishing.com\/bgp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bgpublishing.com\/bgp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bgpublishing.com\/bgp\/wp-json\/wp\/v2\/comments?post=3564"}],"version-history":[{"count":10,"href":"https:\/\/www.bgpublishing.com\/bgp\/wp-json\/wp\/v2\/pages\/3564\/revisions"}],"predecessor-version":[{"id":3574,"href":"https:\/\/www.bgpublishing.com\/bgp\/wp-json\/wp\/v2\/pages\/3564\/revisions\/3574"}],"wp:attachment":[{"href":"https:\/\/www.bgpublishing.com\/bgp\/wp-json\/wp\/v2\/media?parent=3564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}