{"id":1545,"date":"2023-01-12T20:56:35","date_gmt":"2023-01-12T20:56:35","guid":{"rendered":"https:\/\/foolishdeveloper.com\/?p=1545"},"modified":"2023-01-12T20:56:37","modified_gmt":"2023-01-12T20:56:37","slug":"image-color-picker-using-javascript","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/image-color-picker-using-javascript\/","title":{"rendered":"Image Color Picker using HTML, CSS and JavaScript"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1545\" class=\"elementor elementor-1545\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-40b249e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"40b249e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9014d8c\" data-id=\"9014d8c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7104a6b elementor-widget elementor-widget-text-editor\" data-id=\"7104a6b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Do you want to create <b>Image Color Picker using JavaScript<\/b>? If yes then this article will help you completely to create Color Picker using HTML CSS and JavaScript.<\/p><p>I used html to create the basic structure of this Image Color Picker. Designed using sys. Finally I activated this html color picker using javascript.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8269361 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8269361\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a9e075f\" data-id=\"a9e075f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1bbd102 elementor-widget elementor-widget-image\" data-id=\"1bbd102\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"926\" height=\"418\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-5.webp\" class=\"attachment-large size-large wp-image-1550\" alt=\"Image Color Picker using HTML, CSS and JavaScript\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-5.webp 926w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-5-300x135.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-5-768x347.webp 768w\" sizes=\"(max-width: 926px) 100vw, 926px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f19e397 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f19e397\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-87a5075\" data-id=\"87a5075\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e54db9e elementor-widget elementor-widget-heading\" data-id=\"e54db9e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">image color picker with JavaScript<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6a64ff5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6a64ff5\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a647323\" data-id=\"a647323\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c484026 elementor-widget elementor-widget-text-editor\" data-id=\"c484026\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Image Color Picker<\/b> We see in many websites. This is a really great element that will help you get the color code of any color. We see these projects(Create Color Picker From Image Using HTML) mostly in image editing websites.<\/p><p>With this <b>Image Color Picker JavaScript<\/b> you can select the color in any image and get its color code. You can copy the color of any element, not just the color of the sudu image, with this project(image color picker with JS).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e02e53e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e02e53e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ca54bbd\" data-id=\"ca54bbd\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-224c043 elementor-widget elementor-widget-html\" data-id=\"224c043\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"codepen\" data-height=\"435\" data-theme-id=\"light\" data-default-tab=\"result\" data-slug-hash=\"KKBWgVG\" data-preview=\"true\" data-user=\"groundtutorial\" style=\"height: 435px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\r\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/groundtutorial\/pen\/KKBWgVG\" target=\"_blank\" rel=\"noopener\">\r\n  Image Color Picker JavaScript<\/a> by Ground Tutorial (<a href=\"https:\/\/codepen.io\/groundtutorial\" target=\"_blank\" rel=\"noopener\">@groundtutorial<\/a>)\r\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/span>\r\n<\/p>\r\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0a6a11a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0a6a11a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-50887f8\" data-id=\"50887f8\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e2f56b5 elementor-widget elementor-widget-text-editor\" data-id=\"e2f56b5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As you can see above to create this <b>Image Color Picker HTML<\/b> I first created a box on the webpage. Inside that box is the first place to upload an image. After uploading the image, the image can be viewed there. Then there is a Color Picker button. By which you can select the color.<\/p><p>The codes of the selected colors can be seen in an input box below. Not only that, the color you have selected can be seen in the color view box below.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-12e8182 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"12e8182\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4ae83f7\" data-id=\"4ae83f7\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-759128d elementor-widget elementor-widget-heading\" data-id=\"759128d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Image Color Picker using HTML CSS &amp; JavaScript<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1133e72 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1133e72\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6c13211\" data-id=\"6c13211\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-51484e7 elementor-widget elementor-widget-text-editor\" data-id=\"51484e7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now if you want to create this Image Color Picker then follow the tutorial below. Here I have shared step by step tutorial and complete source code.\u00a0<\/p><p>If you just want the source code then you can download the complete source code using the download button below the article.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e5cd249 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e5cd249\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-58f7097\" data-id=\"58f7097\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-084ce05 elementor-widget elementor-widget-heading\" data-id=\"084ce05\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 1: Basic structure of Color Picker<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fe6a265 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fe6a265\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ff3963b\" data-id=\"ff3963b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-63a594e elementor-widget elementor-widget-text-editor\" data-id=\"63a594e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>First I created a basic structure on the web page using my own html and css. On the webpage I used <i>background-color: #400734 <\/i>and white color was used for the background of the box.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3d3bbaa elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3d3bbaa\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-61c236d\" data-id=\"61c236d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-623a712 elementor-widget elementor-widget-code-highlight\" data-id=\"623a712\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><div class=\"wrapper\">\r\n   \r\n<\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d8cb6c2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d8cb6c2\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-91f4759\" data-id=\"91f4759\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-dd0b5b2 elementor-widget elementor-widget-code-highlight\" data-id=\"dd0b5b2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>* {\r\n  padding: 0;\r\n  margin: 0;\r\n  box-sizing: border-box;\r\n  font-family: \"Poppins\", sans-serif;\r\n}\r\nbody {\r\n  background-color: #400734;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d247a6c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d247a6c\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4bec01e\" data-id=\"4bec01e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8bf7cc2 elementor-widget elementor-widget-code-highlight\" data-id=\"8bf7cc2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.wrapper {\r\n  background-color: #ffffff;\r\n  width: 90%;\r\n  max-width: 400px;\r\n  position: absolute;\r\n  transform: translateX(-50%);\r\n  left: 50%;\r\n  top: 0.5em;\r\n  padding: 1.5em;\r\n  border-radius: 0.8em;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e2ca12c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e2ca12c\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f03a54e\" data-id=\"f03a54e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-228c634 elementor-widget elementor-widget-image\" data-id=\"228c634\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"926\" height=\"418\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript.webp\" class=\"attachment-large size-large wp-image-1551\" alt=\"Basic Structure Of Color Picker\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript.webp 926w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-300x135.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-768x347.webp 768w\" sizes=\"(max-width: 926px) 100vw, 926px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c19f88a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c19f88a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3907c2b\" data-id=\"3907c2b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8c7ee27 elementor-widget elementor-widget-heading\" data-id=\"8c7ee27\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 2: Place to view uploaded images<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3482ad4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3482ad4\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-81a0ab5\" data-id=\"81a0ab5\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-28f7361 elementor-widget elementor-widget-text-editor\" data-id=\"28f7361\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now create an image display. In this Image Color Picker you have to decide where the image will be displayed. Here is a default image I have selected.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ec3164a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ec3164a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-96efc89\" data-id=\"96efc89\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e115c33 elementor-widget elementor-widget-code-highlight\" data-id=\"e115c33\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>      <div class=\"image-container\">\r\n        <img decoding=\"async\" id=\"image\" src=\"demo-image-3.jpg\" \/>\r\n      <\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-38c5ef3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"38c5ef3\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e051d73\" data-id=\"e051d73\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fbc40a4 elementor-widget elementor-widget-code-highlight\" data-id=\"fbc40a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>img {\r\n  display: block;\r\n  width: 90%;\r\n  margin: auto;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e289bd9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e289bd9\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-15d20ff\" data-id=\"15d20ff\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d930c2a elementor-widget elementor-widget-image\" data-id=\"d930c2a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"926\" height=\"418\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-2.webp\" class=\"attachment-large size-large wp-image-1552\" alt=\"Place To View Uploaded Images\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-2.webp 926w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-2-300x135.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-2-768x347.webp 768w\" sizes=\"(max-width: 926px) 100vw, 926px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7f8432e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7f8432e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0dc598b\" data-id=\"0dc598b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f8a205f elementor-widget elementor-widget-heading\" data-id=\"f8a205f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 3: Image upload and color picker button<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b545516 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b545516\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5892482\" data-id=\"5892482\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-740d3f7 elementor-widget elementor-widget-text-editor\" data-id=\"740d3f7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now we need to create two buttons in this <b>JavaScript Image Color Picker<\/b> project. A button to select file ie which image i want to upload. Another is to select the color.<\/p><p>I used blue for the background color of the buttons and used padding around them to define some size as well.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2d576e8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2d576e8\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-514e29d\" data-id=\"514e29d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-83e067f elementor-widget elementor-widget-code-highlight\" data-id=\"83e067f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><div class=\"btns-container\">\r\n    <input type=\"file\" id=\"file\" accesskey=\"image\/*\" \/>\r\n    <label for=\"file\">Open A Photo<\/label>\r\n    <button id=\"pick-color\">Pick Color<\/button>\r\n<\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-33cff13 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"33cff13\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8c849d2\" data-id=\"8c849d2\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cfd924e elementor-widget elementor-widget-code-highlight\" data-id=\"cfd924e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.btns-container {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 1em;\r\n  margin: 1em 0 1.5em 0;\r\n}\r\ninput,\r\nlabel,\r\nbutton {\r\n  border: none;\r\n  outline: none;\r\n}\r\ninput[type=\"file\"] {\r\n  display: none;\r\n}\r\nlabel,\r\nbutton {\r\n  display: block;\r\n  font-size: 1.1em;\r\n  background-color: #025bee;\r\n  color: #ffffff;\r\n  text-align: center;\r\n  padding: 0.8em 0;\r\n  border-radius: 0.3em;\r\n  cursor: pointer;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7b6ff42 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7b6ff42\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3deb042\" data-id=\"3deb042\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-055936f elementor-widget elementor-widget-image\" data-id=\"055936f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"926\" height=\"418\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-3.webp\" class=\"attachment-large size-large wp-image-1553\" alt=\"Image Upload And Color Picker Button\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-3.webp 926w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-3-300x135.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-3-768x347.webp 768w\" sizes=\"(max-width: 926px) 100vw, 926px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1f02b94 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1f02b94\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-16b2aae\" data-id=\"16b2aae\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8fa8836 elementor-widget elementor-widget-heading\" data-id=\"8fa8836\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 4: Create input boxes to view color codes<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-251b1bd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"251b1bd\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-781e9a3\" data-id=\"781e9a3\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4573ba0 elementor-widget elementor-widget-text-editor\" data-id=\"4573ba0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now create two input boxes to view the color codes. Color codes can be seen in this input box. Each input box has a copy button which will help to copy the information contained in that input box.<\/p><p>Here is a small box that will act as a color box. The color you select will appear in this box.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bc785d3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"bc785d3\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6c2d164\" data-id=\"6c2d164\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cea8d01 elementor-widget elementor-widget-code-highlight\" data-id=\"cea8d01\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>      <div id=\"result\" class=\"hide\">\r\n        <div>\r\n          <input type=\"text\" id=\"hex-val-ref\" \/>\r\n          <button onclick=\"copy('hex-val-ref')\">\r\n            <i class=\"fa-regular fa-copy\"><\/i>\r\n          <\/button>\r\n        <\/div>\r\n        <div>\r\n          <input type=\"text\" id=\"rgb-val-ref\" \/>\r\n          <button onclick=\"copy('rgb-val-ref')\">\r\n            <i class=\"fa-regular fa-copy\"><\/i>\r\n          <\/button>\r\n        <\/div>\r\n        <div id=\"picked-color-ref\"><\/div>\r\n      <\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-93a7143 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"93a7143\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-54b6ab0\" data-id=\"54b6ab0\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c87d761 elementor-widget elementor-widget-code-highlight\" data-id=\"c87d761\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>#result {\r\n  \/* display: grid; *\/\r\n  grid-template-columns: 1fr 1fr;\r\n  grid-gap: 1em;\r\n}\r\n#result div {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8c94dcc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8c94dcc\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ef77661\" data-id=\"ef77661\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d8f8ed7 elementor-widget elementor-widget-code-highlight\" data-id=\"d8f8ed7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>#result input {\r\n  background-color: transparent;\r\n  font-size: 1em;\r\n  padding: 0.5em;\r\n  width: 100%;\r\n  color: #313b4c;\r\n  border-bottom: 0.1em solid #021637;\r\n}\r\n#result button {\r\n  position: absolute;\r\n  right: 0.6em;\r\n  background-color: transparent;\r\n  color: #7c8696;\r\n}\r\n#picked-color-ref {\r\n  grid-column: 2;\r\n  grid-row: 1 \/ 3;\r\n  border: 0.6em solid #d9e8ff;\r\n  border-radius: 0.5em;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1b07db4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1b07db4\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-95b5d26\" data-id=\"95b5d26\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-00f9431 elementor-widget elementor-widget-image\" data-id=\"00f9431\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"926\" height=\"418\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-4.webp\" class=\"attachment-large size-large wp-image-1554\" alt=\"Create Input Boxes To View Color Codes\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-4.webp 926w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-4-300x135.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-4-768x347.webp 768w\" sizes=\"(max-width: 926px) 100vw, 926px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-224367e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"224367e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7b76e5d\" data-id=\"7b76e5d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-25008fe elementor-widget elementor-widget-text-editor\" data-id=\"25008fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>I designed the alert option here with my own CSS. When you copy the color color code by this Image Color Picker html you will see this alert message below.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ba4f4c9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ba4f4c9\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c4f0d55\" data-id=\"c4f0d55\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-818a6ff elementor-widget elementor-widget-code-highlight\" data-id=\"818a6ff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>#custom-alert {\r\n  transform: scale(0);\r\n  transition: 0.5s;\r\n  transform-origin: center;\r\n  background-color: #d9e8ff;\r\n  color: #025bee;\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  margin-top: 1.5em;\r\n}\r\n.hide {\r\n  display: none;\r\n}\r\n#error {\r\n  color: #ff725a;\r\n  text-align: center;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-27fc219 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"27fc219\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7268182\" data-id=\"7268182\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-dee70bc elementor-widget elementor-widget-heading\" data-id=\"dee70bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 5: Activate the Image Color Picker with JavaScript<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2486a41 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2486a41\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e47b886\" data-id=\"e47b886\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e4a072b elementor-widget elementor-widget-text-editor\" data-id=\"e4a072b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now it&#8217;s time to implement the <b>Image Color Picker with JavaScript<\/b>. Here I have used a lot of javascript but it is very simple. If you know basic JavaScript then you should have no problem understanding the following code.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-39a8d9c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"39a8d9c\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3013514\" data-id=\"3013514\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2438225 elementor-widget elementor-widget-code-highlight\" data-id=\"2438225\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/\/Create Initial references\r\nlet pickColor = document.getElementById(\"pick-color\");\r\nlet error = document.getElementById(\"error\");\r\nlet fileInput = document.getElementById(\"file\");\r\nlet image = document.getElementById(\"image\");\r\nlet hexValRef = document.getElementById(\"hex-val-ref\");\r\nlet rgbValRef = document.getElementById(\"rgb-val-ref\");\r\nlet customAlert = document.getElementById(\"custom-alert\");\r\nlet pickedColorRef = document.getElementById(\"picked-color-ref\");\r\nlet eyeDropper;\r\n\r\n\/\/Function On Window Load\r\nwindow.onload = () => {\r\n  \/\/Check if the browser supports eyedropper\r\n  if (\"EyeDropper\" in window) {\r\n    pickColor.classList.remove(\"hide\");\r\n    eyeDropper = new EyeDropper();\r\n  } else {\r\n    error.classList.remove(\"hide\");\r\n    error.innerText = \"Your browser doesn't support Eyedropper API\";\r\n    pickColor.classList.add(\"hide\");\r\n    return false;\r\n  }\r\n};\r\n\r\n\/\/Eyedropper logic\r\nconst colorSelector = async () => {\r\n  const color = await eyeDropper\r\n    .open()\r\n    .then((colorValue) => {\r\n      error.classList.add(\"hide\");\r\n      \/\/Get the hex color code\r\n      let hexValue = colorValue.sRGBHex;\r\n      \/\/Convert Hex Value To RGB\r\n      let rgbArr = [];\r\n      for (let i = 1; i < hexValue.length; i += 2) {\r\n        rgbArr.push(parseInt(hexValue[i] + hexValue[i + 1], 16));\r\n        console.log(rgbArr);\r\n      }\r\n      let rgbValue = \"rgb(\" + rgbArr + \")\";\r\n      console.log(hexValue, rgbValue);\r\n      result.style.display = \"grid\";\r\n      hexValRef.value = hexValue;\r\n      rgbValRef.value = rgbValue;\r\n      pickedColorRef.style.backgroundColor = hexValue;\r\n    })\r\n    .catch((err) => {\r\n      error.classList.remove(\"hide\");\r\n      \/\/If user presses escape to close the eyedropper\r\n      if (err.toString().includes(\"AbortError\")) {\r\n        error.innerText = \"\";\r\n      } else {\r\n        error.innerText = err;\r\n      }\r\n    });\r\n};\r\n\r\n\/\/Button click\r\npickColor.addEventListener(\"click\", colorSelector);\r\n\r\n\/\/Allow user to choose image of their own choice\r\nfileInput.onchange = () => {\r\n  result.style.display = \"none\";\r\n  \/\/The fileReader object helps to read contents of file stored on computer\r\n  let reader = new FileReader();\r\n  \/\/readAsDataURL reads the content of input file\r\n  reader.readAsDataURL(fileInput.files[0]);\r\n  reader.onload = () => {\r\n    \/\/onload is triggered after file reading operation is successfully completed\r\n    \/\/set src attribute of image to result\/input file\r\n    image.setAttribute(\"src\", reader.result);\r\n  };\r\n};\r\n\r\n\/\/Function to copy the color code\r\nlet copy = (textId) => {\r\n  \/\/Selects the text in the <input> element\r\n  document.getElementById(textId).select();\r\n  \/\/Copies the selected text to clipboard\r\n  document.execCommand(\"copy\");\r\n  \/\/Display Alert\r\n  customAlert.style.transform = \"scale(1)\";\r\n  setTimeout(() => {\r\n    customAlert.style.transform = \"scale(0)\";\r\n  }, 2000);\r\n};\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-cfa2439 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"cfa2439\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c62aff1\" data-id=\"c62aff1\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-81606fd elementor-widget elementor-widget-image\" data-id=\"81606fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"926\" height=\"418\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-5-1.webp\" class=\"attachment-large size-large wp-image-1555\" alt=\"Activate The Image Color Picker With JavaScript\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-5-1.webp 926w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-5-1-300x135.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Image-Color-Picker-using-javascript-5-1-768x347.webp 768w\" sizes=\"(max-width: 926px) 100vw, 926px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-72b42b6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"72b42b6\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1424f9b\" data-id=\"1424f9b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0819eb2 elementor-widget elementor-widget-text-editor\" data-id=\"0819eb2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Hopefully from the above tutorial you have learned <b>how to create an Image Color Picker using HTML, CSS and JavaScript<\/b>.<\/p><p>Earlier I shared with you how to create more types of <a href=\"https:\/\/foolishdeveloper.com\/how-to-make-rgb-color-generator-using-javascript\/\">color generators<\/a>, random <a href=\"https:\/\/foolishdeveloper.com\/random-gradient-generator-with-javascript-css\/\">background color generators<\/a>. Comment how you like this JavaScript Image Color Picker project.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3c509a89 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3c509a89\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4bc42a63\" data-id=\"4bc42a63\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-84c6f06 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"84c6f06\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Source Code<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4a008780 elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4a008780\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5ffbb8ef\" data-id=\"5ffbb8ef\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-372c866d elementor-widget elementor-widget-toggle\" data-id=\"372c866d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"toggle.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-toggle\">\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<div id=\"elementor-tab-title-9251\" class=\"elementor-tab-title\" data-tab=\"1\" role=\"button\" aria-controls=\"elementor-tab-content-9251\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\"><h3>Best Free Color Picker In JavaScript & CSS<\/h3><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-9251\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"region\" aria-labelledby=\"elementor-tab-title-9251\"><p>If you want to find more color pickers then you can follow <a href=\"https:\/\/www.cssscript.com\/tag\/color-picker\/\" target=\"_blank\" rel=\"noopener\">this site<\/a>. Here is a list of many types of JavaScript and jQuery image color pickers.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<div id=\"elementor-tab-title-9252\" class=\"elementor-tab-title\" data-tab=\"2\" role=\"button\" aria-controls=\"elementor-tab-content-9252\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\"><h3>Create Color Picker From Image Using HTML & JavaScript<\/h3><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-9252\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"region\" aria-labelledby=\"elementor-tab-title-9252\"><p>If you want to create image color picker then this tutorial will be best for you. Here you will find source code step by step tutorial to create color picker.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<div id=\"elementor-tab-title-9253\" class=\"elementor-tab-title\" data-tab=\"3\" role=\"button\" aria-controls=\"elementor-tab-content-9253\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\"><h3> HTML color picker from image<\/h3><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-9253\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"3\" role=\"region\" aria-labelledby=\"elementor-tab-title-9253\"><p>It is not possible to create color picker by html only. With this you need to use javascript or jquery or a separate cdn. But here I have seen how to create color picker with html, css and javascript.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<script type=\"application\/ld+json\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"Best Free Color Picker In JavaScript & CSS\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>If you want to find more color pickers then you can follow <a href=\\\"https:\\\/\\\/www.cssscript.com\\\/tag\\\/color-picker\\\/\\\">this site<\\\/a>. Here is a list of many types of JavaScript and jQuery image color pickers.<\\\/p>\"}},{\"@type\":\"Question\",\"name\":\"Create Color Picker From Image Using HTML & JavaScript\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>If you want to create image color picker then this tutorial will be best for you. Here you will find source code step by step tutorial to create color picker.<\\\/p>\"}},{\"@type\":\"Question\",\"name\":\"HTML color picker from image\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>It is not possible to create color picker by html only. With this you need to use javascript or jquery or a separate cdn. But here I have seen how to create color picker with html, css and javascript.<\\\/p>\"}}]}<\/script>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Do you want to create Image Color Picker using JavaScript? If yes then this article will help you completely to create Color Picker using HTML CSS and JavaScript. I used html to create the basic structure of this Image Color Picker. Designed using sys. Finally I activated this html color picker using javascript. image color [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1589,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1545","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/1545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=1545"}],"version-history":[{"count":26,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/1545\/revisions"}],"predecessor-version":[{"id":1590,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/1545\/revisions\/1590"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/1589"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=1545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=1545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=1545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}