Color Replacer<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/\n bootstrap.min.css\" rel=\"stylesheet\">\n <style>\n canvas {\n max-width: 100%;\n border: 1px solid #ccc;\n cursor: crosshair;\n }\n <\/style>\n<\/head>\n<\/pre>\n\n\n\n<p>After linking the Bootstrap CSS framework, we can now design the user interface using Bootstrap classes. Since our primary focus is on JavaScript functionality, add the following code snippets within the <body> tag.<\/p>\n\n\n\n<pre class=\"brush:html\">\n<div class=\"container py-5\">\n <h2 class=\"mb-4 text-center\">Image Color Replacer<\/h2>\n\n <div class=\"mb-3 text-center mx-auto\" style=\"max-width: 640px;\">\n <input type=\"file\" id=\"upload\" class=\"form-control w-50 mx-auto\" accept=\"image\/*\" \/>\n <\/div>\n\n <div class=\"text-center mb-3 mx-auto\" style=\"max-width: 640px;\">\n <canvas id=\"canvas\" class=\"img-fluid\"><\/canvas>\n <\/div>\n\n <div class=\"form-group mt-3 text-center mx-auto d-flex flex-column\" style=\"max-width: 320px;\">\n <label for=\"tolerance\" class=\"form-label\">Color Match Tolerance: <span id=\"tolerance-value\">30<\/span><\/label>\n <input type=\"range\" class=\"form-range w-50 mx-auto\" min=\"0\" max=\"255\" value=\"30\" id=\"tolerance\" \/>\n <\/div>\n\n <div class=\"form-group mt-3 text-center\">\n <input type=\"color\" id=\"color-picker\" class=\"mx-auto\">\n <\/div>\n\n<div class=\"form-check mt-2 text-center d-flex justify-content-center\">\n <input class=\"form-check-input\" type=\"checkbox\" id=\"makeTransparent\">\n <label class=\"form-check-label ms-2\" for=\"makeTransparent\">\n Replace with Transparent\n <\/label>\n <\/div>\n\n <div class=\"text-center mt-3\">\n <button id=\"change\" class=\"btn btn-primary\">Replace Selected Color<\/button>\n <button id=\"save\" class=\"btn btn-success\">Save as PNG<\/button>\n <\/div>\n<\/div>\n<\/pre>\n\n\n\n<p>Once the code is added to the <body> tag, the user interface will appear as shown in the image below.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"712\" height=\"962\" src=\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-at-10.51.34.png\" alt=\"\" class=\"wp-image-769\" srcset=\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-at-10.51.34.png 712w, https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-at-10.51.34-222x300.png 222w\" sizes=\"(max-width: 712px) 100vw, 712px\" \/><\/figure><\/div>\n\n\n<p>Next, let\u2019s define variables to simplify event handling and enable easier control of DOM elements.<\/p>\n\n\n\n<pre class=\"brush:js\">\nlet selectedColor = null;\n\nconst upload = document.getElementById('upload');\nconst canvas = document.getElementById('canvas');\nconst changeBtn = document.getElementById('change');\nconst ctx = canvas.getContext('2d');\nconst colorPicker = document.getElementById('color-picker');\n\nconst toleranceInput = document.getElementById('tolerance');\nconst toleranceValue = document.getElementById('tolerance-value');\n\nconst makeTransparent = document.getElementById('makeTransparent');\n\nconst saveBtn = document.getElementById('save');\n<\/pre>\n\n\n\n<p>With the above code in place, it is now easier to control and handle DOM events effectively.<\/p>\n\n\n\n<pre class=\"brush:js\">\nsaveBtn.addEventListener('click', () => {\n const link = document.createElement('a');\n link.download = 'modified-image.png';\n link.href = canvas.toDataURL('image\/png');\n link.click();\n});\n\ntoleranceInput.addEventListener('input', () => {\n toleranceValue.textContent = toleranceInput.value;\n});\n\nupload.addEventListener('change', (e) => {\n const file = e.target.files[0];\n const img = new Image();\n img.onload = () => {\n canvas.width = img.width;\n canvas.height = img.height;\n ctx.drawImage(img, 0, 0);\n };\n img.src = URL.createObjectURL(file);\n});\n\n\ncanvas.addEventListener('click', (e) => {\n const rect = canvas.getBoundingClientRect();\n const scaleX = canvas.width \/ rect.width;\n const scaleY = canvas.height \/ rect.height;\n\n const x = Math.floor((e.clientX - rect.left) * scaleX);\n const y = Math.floor((e.clientY - rect.top) * scaleY);\n const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;\n const idx = (y * canvas.width + x) * 4;\n selectedColor = [data[idx], data[idx + 1], data[idx + 2], data[idx + 3]];\n colorPicker.value = rgbToHex(...selectedColor);\n colorPicker.click();\n});\n\nchangeBtn.addEventListener('click', () => {\n if (!selectedColor) return;\n const [r1, g1, b1, a1] = selectedColor;\n const newColor = hexToRgb(colorPicker.value);\n const tolerance = parseInt(toleranceInput.value, 10);\n\n const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n const d = imgData.data;\n\n for (let i = 0; i < d.length; i += 4) {\n const dist = colorDistance(d[i], d[i + 1], d[i + 2], r1, g1, b1);\n if (dist <= tolerance) {\n if (makeTransparent.checked) {\n d[i + 3] = 0; \/\/ Transparent\n } else {\n d[i] = newColor.r;\n d[i + 1] = newColor.g;\n d[i + 2] = newColor.b;\n }\n }\n }\n\n ctx.putImageData(imgData, 0, 0);\n});\n<\/pre>\n\n\n\n<p>To convert and replace colors in the image, utility functions need to be implemented. These include functions for converting RGB to HEX and vice versa, as well as a colorDistance function to detect colors within the same group, allowing for a configurable tolerance range when matching similar colors.<\/p>\n\n\n\n<pre class=\"brush:js\">\nfunction colorDistance(r1, g1, b1, r2, g2, b2) {\n return Math.sqrt(\n (r1 - r2) ** 2 +\n (g1 - g2) ** 2 +\n (b1 - b2) ** 2\n );\n}\n\nfunction rgbToHex(r, g, b) {\n return \"#\" + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');\n}\n\nfunction hexToRgb(hex) {\n const bigint = parseInt(hex.slice(1), 16);\n return {\n r: (bigint >> 16) & 255,\n g: (bigint >> 8) & 255,\n b: bigint & 255\n };\n}\n<\/pre>\n\n\n\n<p>Now, by running the code within a single HTML file, we can seamlessly replace one color with another in the image. Thanks to the added tolerance feature, the application can process a range of similar colors, allowing replacement with both custom colors and transparency. I hope this guide has provided you with a clear understanding of how to build a color replacement tool in JavaScript.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"358\" src=\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-at-11.12.59-1024x358.png\" alt=\"\" class=\"wp-image-785\" srcset=\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-at-11.12.59-1024x358.png 1024w, https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-at-11.12.59-300x105.png 300w, https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-at-11.12.59-768x269.png 768w, https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-at-11.12.59.png 1126w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In conclusion, we\u2019ve explored how to build a simple yet effective image color replacement tool using JavaScript. By leveraging DOM manipulation, canvas rendering, and color conversion logic with tolerance control, you can create interactive applications that dynamically modify image colors. This approach can be extended further for more advanced image editing features. Thank you for following along\u2014I hope this guide has been informative and inspires further experimentation with JavaScript and image processing.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hi, Good day. Today, I would like to share how to replace colors in an image using JavaScript. In JavaScript, you can retrieve color codes from an image and replace them with custom colors programmatically. As the first step, let\u2019s include the following code within the <head> tag to link the Bootstrap CSS framework, which […]<\/p>\n","protected":false},"author":2,"featured_media":764,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-762","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-system"],"yoast_head":"\n<title>How to replace colors in an image using JavaScript ? - WIT LAB %<\/title>\n<meta name=\"description\" content=\"We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to replace colors in an image using JavaScript ? - WIT LAB %\" \/>\n<meta property=\"og:description\" content=\"We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"WIT LAB\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/people\/WIT-LAB\/61567795364273\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-16T08:49:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-29T06:15:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Htay Min Kaung\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Htay Min Kaung\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/\"},\"author\":{\"name\":\"Htay Min Kaung\",\"@id\":\"https:\/\/witlab.ph\/blog\/#\/schema\/person\/c37bd963f520e565eebe682a9e319680\"},\"headline\":\"How to replace colors in an image using JavaScript ?\",\"datePublished\":\"2025-05-16T08:49:24+00:00\",\"dateModified\":\"2025-05-29T06:15:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/\"},\"wordCount\":351,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/witlab.ph\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg\",\"articleSection\":[\"System\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/\",\"url\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/\",\"name\":\"How to replace colors in an image using JavaScript ? - WIT LAB %\",\"isPartOf\":{\"@id\":\"https:\/\/witlab.ph\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg\",\"datePublished\":\"2025-05-16T08:49:24+00:00\",\"dateModified\":\"2025-05-29T06:15:00+00:00\",\"description\":\"We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.\",\"breadcrumb\":{\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#primaryimage\",\"url\":\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg\",\"contentUrl\":\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/witlab.ph\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to replace colors in an image using JavaScript ?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/witlab.ph\/blog\/#website\",\"url\":\"https:\/\/witlab.ph\/blog\/\",\"name\":\"WIT LAB\",\"description\":\"Web Development\",\"publisher\":{\"@id\":\"https:\/\/witlab.ph\/blog\/#organization\"},\"alternateName\":\"WIT LAB INC\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/witlab.ph\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/witlab.ph\/blog\/#organization\",\"name\":\"WIT LAB INC\",\"alternateName\":\"Spiceworks (Japan)\",\"url\":\"https:\/\/witlab.ph\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/witlab.ph\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2024\/09\/logo_witlab-Copy-Copy.png\",\"contentUrl\":\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2024\/09\/logo_witlab-Copy-Copy.png\",\"width\":681,\"height\":616,\"caption\":\"WIT LAB INC\"},\"image\":{\"@id\":\"https:\/\/witlab.ph\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/people\/WIT-LAB\/61567795364273\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/witlab.ph\/blog\/#\/schema\/person\/c37bd963f520e565eebe682a9e319680\",\"name\":\"Htay Min Kaung\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/witlab.ph\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0a90aff2f83f2079748817650f0848ff?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0a90aff2f83f2079748817650f0848ff?s=96&d=mm&r=g\",\"caption\":\"Htay Min Kaung\"},\"url\":\"https:\/\/witlab.ph\/blog\/author\/htay-min-kaung\/\"}]}<\/script>\n","yoast_head_json":{"title":"How to replace colors in an image using JavaScript ? - WIT LAB %","description":"We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to replace colors in an image using JavaScript ? - WIT LAB %","og_description":"We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.","og_url":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/","og_site_name":"WIT LAB","article_publisher":"https:\/\/www.facebook.com\/people\/WIT-LAB\/61567795364273\/","article_published_time":"2025-05-16T08:49:24+00:00","article_modified_time":"2025-05-29T06:15:00+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg","type":"image\/jpeg"}],"author":"Htay Min Kaung","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Htay Min Kaung","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#article","isPartOf":{"@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/"},"author":{"name":"Htay Min Kaung","@id":"https:\/\/witlab.ph\/blog\/#\/schema\/person\/c37bd963f520e565eebe682a9e319680"},"headline":"How to replace colors in an image using JavaScript ?","datePublished":"2025-05-16T08:49:24+00:00","dateModified":"2025-05-29T06:15:00+00:00","mainEntityOfPage":{"@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/"},"wordCount":351,"commentCount":0,"publisher":{"@id":"https:\/\/witlab.ph\/blog\/#organization"},"image":{"@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg","articleSection":["System"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/","url":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/","name":"How to replace colors in an image using JavaScript ? - WIT LAB %","isPartOf":{"@id":"https:\/\/witlab.ph\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#primaryimage"},"image":{"@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg","datePublished":"2025-05-16T08:49:24+00:00","dateModified":"2025-05-29T06:15:00+00:00","description":"We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.","breadcrumb":{"@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#primaryimage","url":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg","contentUrl":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/witlab.ph\/blog\/"},{"@type":"ListItem","position":2,"name":"How to replace colors in an image using JavaScript ?"}]},{"@type":"WebSite","@id":"https:\/\/witlab.ph\/blog\/#website","url":"https:\/\/witlab.ph\/blog\/","name":"WIT LAB","description":"Web Development","publisher":{"@id":"https:\/\/witlab.ph\/blog\/#organization"},"alternateName":"WIT LAB INC","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/witlab.ph\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/witlab.ph\/blog\/#organization","name":"WIT LAB INC","alternateName":"Spiceworks (Japan)","url":"https:\/\/witlab.ph\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/witlab.ph\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2024\/09\/logo_witlab-Copy-Copy.png","contentUrl":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2024\/09\/logo_witlab-Copy-Copy.png","width":681,"height":616,"caption":"WIT LAB INC"},"image":{"@id":"https:\/\/witlab.ph\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/people\/WIT-LAB\/61567795364273\/"]},{"@type":"Person","@id":"https:\/\/witlab.ph\/blog\/#\/schema\/person\/c37bd963f520e565eebe682a9e319680","name":"Htay Min Kaung","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/witlab.ph\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0a90aff2f83f2079748817650f0848ff?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0a90aff2f83f2079748817650f0848ff?s=96&d=mm&r=g","caption":"Htay Min Kaung"},"url":"https:\/\/witlab.ph\/blog\/author\/htay-min-kaung\/"}]}},"_links":{"self":[{"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/posts\/762"}],"collection":[{"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/comments?post=762"}],"version-history":[{"count":33,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/posts\/762\/revisions"}],"predecessor-version":[{"id":831,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/posts\/762\/revisions\/831"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/media\/764"}],"wp:attachment":[{"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/media?parent=762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/categories?post=762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/tags?post=762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":762,"date":"2025-05-16T16:49:24","date_gmt":"2025-05-16T08:49:24","guid":{"rendered":"https:\/\/witlab.ph\/blog\/?p=762"},"modified":"2025-05-29T14:15:00","modified_gmt":"2025-05-29T06:15:00","slug":"how-to-replace-colors-in-an-image-using-javascript","status":"publish","type":"post","link":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/","title":{"rendered":"How to replace colors in an image using JavaScript ?"},"content":{"rendered":"\n

Hi,<\/p>\n\n\n\n

Good day. Today, I would like to share how to replace colors in an image using JavaScript. In JavaScript, you can retrieve color codes from an image and replace them with custom colors programmatically.<\/p>\n\n\n\n

As the first step, let\u2019s include the following code within the <head> tag to link the Bootstrap CSS framework, which will help enhance the user interface design.<\/p>\n\n\n\n

\n\n  \n  \n  Color Replacer<\/title>\n  <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/\n  bootstrap.min.css\" rel=\"stylesheet\">\n  <style>\n    canvas {\n      max-width: 100%;\n      border: 1px solid #ccc;\n      cursor: crosshair;\n    }\n  <\/style>\n<\/head>\n<\/pre>\n\n\n\n<p>After linking the Bootstrap CSS framework, we can now design the user interface using Bootstrap classes. Since our primary focus is on JavaScript functionality, add the following code snippets within the <body> tag.<\/p>\n\n\n\n<pre class=\"brush:html\">\n<div class=\"container py-5\">\n  <h2 class=\"mb-4 text-center\">Image Color Replacer<\/h2>\n\n  <div class=\"mb-3 text-center mx-auto\" style=\"max-width: 640px;\">\n    <input type=\"file\" id=\"upload\" class=\"form-control w-50 mx-auto\" accept=\"image\/*\" \/>\n  <\/div>\n\n  <div class=\"text-center mb-3 mx-auto\" style=\"max-width: 640px;\">\n    <canvas id=\"canvas\" class=\"img-fluid\"><\/canvas>\n  <\/div>\n\n  <div class=\"form-group mt-3 text-center mx-auto d-flex flex-column\" style=\"max-width: 320px;\">\n    <label for=\"tolerance\" class=\"form-label\">Color Match Tolerance: <span id=\"tolerance-value\">30<\/span><\/label>\n    <input type=\"range\" class=\"form-range w-50 mx-auto\" min=\"0\" max=\"255\" value=\"30\" id=\"tolerance\" \/>\n  <\/div>\n\n  <div class=\"form-group mt-3 text-center\">\n    <input type=\"color\" id=\"color-picker\" class=\"mx-auto\">\n  <\/div>\n\n<div class=\"form-check mt-2 text-center d-flex justify-content-center\">\n    <input class=\"form-check-input\" type=\"checkbox\" id=\"makeTransparent\">\n    <label class=\"form-check-label ms-2\" for=\"makeTransparent\">\n      Replace with Transparent\n    <\/label>\n  <\/div>\n\n  <div class=\"text-center mt-3\">\n    <button id=\"change\" class=\"btn btn-primary\">Replace Selected Color<\/button>\n    <button id=\"save\" class=\"btn btn-success\">Save as PNG<\/button>\n  <\/div>\n<\/div>\n<\/pre>\n\n\n\n<p>Once the code is added to the <body> tag, the user interface will appear as shown in the image below.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"712\" height=\"962\" src=\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-at-10.51.34.png\" alt=\"\" class=\"wp-image-769\" srcset=\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-at-10.51.34.png 712w, https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-at-10.51.34-222x300.png 222w\" sizes=\"(max-width: 712px) 100vw, 712px\" \/><\/figure><\/div>\n\n\n<p>Next, let\u2019s define variables to simplify event handling and enable easier control of DOM elements.<\/p>\n\n\n\n<pre class=\"brush:js\">\nlet selectedColor = null;\n\nconst upload = document.getElementById('upload');\nconst canvas = document.getElementById('canvas');\nconst changeBtn = document.getElementById('change');\nconst ctx = canvas.getContext('2d');\nconst colorPicker = document.getElementById('color-picker');\n\nconst toleranceInput = document.getElementById('tolerance');\nconst toleranceValue = document.getElementById('tolerance-value');\n\nconst makeTransparent = document.getElementById('makeTransparent');\n\nconst saveBtn = document.getElementById('save');\n<\/pre>\n\n\n\n<p>With the above code in place, it is now easier to control and handle DOM events effectively.<\/p>\n\n\n\n<pre class=\"brush:js\">\nsaveBtn.addEventListener('click', () => {\n  const link = document.createElement('a');\n  link.download = 'modified-image.png';\n  link.href = canvas.toDataURL('image\/png');\n  link.click();\n});\n\ntoleranceInput.addEventListener('input', () => {\n  toleranceValue.textContent = toleranceInput.value;\n});\n\nupload.addEventListener('change', (e) => {\n  const file = e.target.files[0];\n  const img = new Image();\n  img.onload = () => {\n    canvas.width = img.width;\n    canvas.height = img.height;\n    ctx.drawImage(img, 0, 0);\n  };\n  img.src = URL.createObjectURL(file);\n});\n\n\ncanvas.addEventListener('click', (e) => {\n  const rect = canvas.getBoundingClientRect();\n  const scaleX = canvas.width \/ rect.width;\n  const scaleY = canvas.height \/ rect.height;\n\n  const x = Math.floor((e.clientX - rect.left) * scaleX);\n  const y = Math.floor((e.clientY - rect.top) * scaleY);\n  const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;\n  const idx = (y * canvas.width + x) * 4;\n  selectedColor = [data[idx], data[idx + 1], data[idx + 2], data[idx + 3]];\n  colorPicker.value = rgbToHex(...selectedColor);\n  colorPicker.click();\n});\n\nchangeBtn.addEventListener('click', () => {\n  if (!selectedColor) return;\n  const [r1, g1, b1, a1] = selectedColor;\n  const newColor = hexToRgb(colorPicker.value);\n  const tolerance = parseInt(toleranceInput.value, 10);\n\n  const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n  const d = imgData.data;\n\n  for (let i = 0; i < d.length; i += 4) {\n    const dist = colorDistance(d[i], d[i + 1], d[i + 2], r1, g1, b1);\n    if (dist <= tolerance) {\n      if (makeTransparent.checked) {\n        d[i + 3] = 0; \/\/ Transparent\n      } else {\n        d[i] = newColor.r;\n        d[i + 1] = newColor.g;\n        d[i + 2] = newColor.b;\n      }\n    }\n  }\n\n  ctx.putImageData(imgData, 0, 0);\n});\n<\/pre>\n\n\n\n<p>To convert and replace colors in the image, utility functions need to be implemented. These include functions for converting RGB to HEX and vice versa, as well as a colorDistance function to detect colors within the same group, allowing for a configurable tolerance range when matching similar colors.<\/p>\n\n\n\n<pre class=\"brush:js\">\nfunction colorDistance(r1, g1, b1, r2, g2, b2) {\n  return Math.sqrt(\n    (r1 - r2) ** 2 +\n    (g1 - g2) ** 2 +\n    (b1 - b2) ** 2\n  );\n}\n\nfunction rgbToHex(r, g, b) {\n  return \"#\" + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');\n}\n\nfunction hexToRgb(hex) {\n  const bigint = parseInt(hex.slice(1), 16);\n  return {\n    r: (bigint >> 16) & 255,\n    g: (bigint >> 8) & 255,\n    b: bigint & 255\n  };\n}\n<\/pre>\n\n\n\n<p>Now, by running the code within a single HTML file, we can seamlessly replace one color with another in the image. Thanks to the added tolerance feature, the application can process a range of similar colors, allowing replacement with both custom colors and transparency. I hope this guide has provided you with a clear understanding of how to build a color replacement tool in JavaScript.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"358\" src=\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-at-11.12.59-1024x358.png\" alt=\"\" class=\"wp-image-785\" srcset=\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-at-11.12.59-1024x358.png 1024w, https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-at-11.12.59-300x105.png 300w, https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-at-11.12.59-768x269.png 768w, https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-at-11.12.59.png 1126w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In conclusion, we\u2019ve explored how to build a simple yet effective image color replacement tool using JavaScript. By leveraging DOM manipulation, canvas rendering, and color conversion logic with tolerance control, you can create interactive applications that dynamically modify image colors. This approach can be extended further for more advanced image editing features. Thank you for following along\u2014I hope this guide has been informative and inspires further experimentation with JavaScript and image processing.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hi, Good day. Today, I would like to share how to replace colors in an image using JavaScript. In JavaScript, you can retrieve color codes from an image and replace them with custom colors programmatically. As the first step, let\u2019s include the following code within the <head> tag to link the Bootstrap CSS framework, which […]<\/p>\n","protected":false},"author":2,"featured_media":764,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-762","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-system"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to replace colors in an image using JavaScript ? - WIT LAB %<\/title>\n<meta name=\"description\" content=\"We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to replace colors in an image using JavaScript ? - WIT LAB %\" \/>\n<meta property=\"og:description\" content=\"We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"WIT LAB\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/people\/WIT-LAB\/61567795364273\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-16T08:49:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-29T06:15:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Htay Min Kaung\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Htay Min Kaung\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/\"},\"author\":{\"name\":\"Htay Min Kaung\",\"@id\":\"https:\/\/witlab.ph\/blog\/#\/schema\/person\/c37bd963f520e565eebe682a9e319680\"},\"headline\":\"How to replace colors in an image using JavaScript ?\",\"datePublished\":\"2025-05-16T08:49:24+00:00\",\"dateModified\":\"2025-05-29T06:15:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/\"},\"wordCount\":351,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/witlab.ph\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg\",\"articleSection\":[\"System\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/\",\"url\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/\",\"name\":\"How to replace colors in an image using JavaScript ? - WIT LAB %\",\"isPartOf\":{\"@id\":\"https:\/\/witlab.ph\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg\",\"datePublished\":\"2025-05-16T08:49:24+00:00\",\"dateModified\":\"2025-05-29T06:15:00+00:00\",\"description\":\"We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.\",\"breadcrumb\":{\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#primaryimage\",\"url\":\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg\",\"contentUrl\":\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/witlab.ph\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to replace colors in an image using JavaScript ?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/witlab.ph\/blog\/#website\",\"url\":\"https:\/\/witlab.ph\/blog\/\",\"name\":\"WIT LAB\",\"description\":\"Web Development\",\"publisher\":{\"@id\":\"https:\/\/witlab.ph\/blog\/#organization\"},\"alternateName\":\"WIT LAB INC\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/witlab.ph\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/witlab.ph\/blog\/#organization\",\"name\":\"WIT LAB INC\",\"alternateName\":\"Spiceworks (Japan)\",\"url\":\"https:\/\/witlab.ph\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/witlab.ph\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2024\/09\/logo_witlab-Copy-Copy.png\",\"contentUrl\":\"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2024\/09\/logo_witlab-Copy-Copy.png\",\"width\":681,\"height\":616,\"caption\":\"WIT LAB INC\"},\"image\":{\"@id\":\"https:\/\/witlab.ph\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/people\/WIT-LAB\/61567795364273\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/witlab.ph\/blog\/#\/schema\/person\/c37bd963f520e565eebe682a9e319680\",\"name\":\"Htay Min Kaung\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/witlab.ph\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0a90aff2f83f2079748817650f0848ff?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0a90aff2f83f2079748817650f0848ff?s=96&d=mm&r=g\",\"caption\":\"Htay Min Kaung\"},\"url\":\"https:\/\/witlab.ph\/blog\/author\/htay-min-kaung\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to replace colors in an image using JavaScript ? - WIT LAB %","description":"We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to replace colors in an image using JavaScript ? - WIT LAB %","og_description":"We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.","og_url":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/","og_site_name":"WIT LAB","article_publisher":"https:\/\/www.facebook.com\/people\/WIT-LAB\/61567795364273\/","article_published_time":"2025-05-16T08:49:24+00:00","article_modified_time":"2025-05-29T06:15:00+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg","type":"image\/jpeg"}],"author":"Htay Min Kaung","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Htay Min Kaung","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#article","isPartOf":{"@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/"},"author":{"name":"Htay Min Kaung","@id":"https:\/\/witlab.ph\/blog\/#\/schema\/person\/c37bd963f520e565eebe682a9e319680"},"headline":"How to replace colors in an image using JavaScript ?","datePublished":"2025-05-16T08:49:24+00:00","dateModified":"2025-05-29T06:15:00+00:00","mainEntityOfPage":{"@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/"},"wordCount":351,"commentCount":0,"publisher":{"@id":"https:\/\/witlab.ph\/blog\/#organization"},"image":{"@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg","articleSection":["System"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/","url":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/","name":"How to replace colors in an image using JavaScript ? - WIT LAB %","isPartOf":{"@id":"https:\/\/witlab.ph\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#primaryimage"},"image":{"@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg","datePublished":"2025-05-16T08:49:24+00:00","dateModified":"2025-05-29T06:15:00+00:00","description":"We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.","breadcrumb":{"@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#primaryimage","url":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg","contentUrl":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2025\/05\/How-to-replace-Color.jpg","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/witlab.ph\/blog\/how-to-replace-colors-in-an-image-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/witlab.ph\/blog\/"},{"@type":"ListItem","position":2,"name":"How to replace colors in an image using JavaScript ?"}]},{"@type":"WebSite","@id":"https:\/\/witlab.ph\/blog\/#website","url":"https:\/\/witlab.ph\/blog\/","name":"WIT LAB","description":"Web Development","publisher":{"@id":"https:\/\/witlab.ph\/blog\/#organization"},"alternateName":"WIT LAB INC","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/witlab.ph\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/witlab.ph\/blog\/#organization","name":"WIT LAB INC","alternateName":"Spiceworks (Japan)","url":"https:\/\/witlab.ph\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/witlab.ph\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2024\/09\/logo_witlab-Copy-Copy.png","contentUrl":"https:\/\/witlab.ph\/blog\/wp-content\/uploads\/2024\/09\/logo_witlab-Copy-Copy.png","width":681,"height":616,"caption":"WIT LAB INC"},"image":{"@id":"https:\/\/witlab.ph\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/people\/WIT-LAB\/61567795364273\/"]},{"@type":"Person","@id":"https:\/\/witlab.ph\/blog\/#\/schema\/person\/c37bd963f520e565eebe682a9e319680","name":"Htay Min Kaung","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/witlab.ph\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0a90aff2f83f2079748817650f0848ff?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0a90aff2f83f2079748817650f0848ff?s=96&d=mm&r=g","caption":"Htay Min Kaung"},"url":"https:\/\/witlab.ph\/blog\/author\/htay-min-kaung\/"}]}},"_links":{"self":[{"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/posts\/762"}],"collection":[{"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/comments?post=762"}],"version-history":[{"count":33,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/posts\/762\/revisions"}],"predecessor-version":[{"id":831,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/posts\/762\/revisions\/831"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/media\/764"}],"wp:attachment":[{"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/media?parent=762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/categories?post=762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/witlab.ph\/blog\/wp-json\/wp\/v2\/tags?post=762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}