From ff617129232dd03ff9cd7470f4e435b23e1de143 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Mon, 24 Jun 2024 03:57:52 +0100
Subject: [PATCH] feat: change colors in png

---
 .eslintrc                                     |  3 +-
 .idea/workspace.xml                           | 95 +++++++++---------
 package-lock.json                             | 71 +++++++++++++-
 package.json                                  |  3 +
 src/components/input/ToolFileInput.tsx        |  5 +-
 src/components/options/ColorSelector.tsx      | 48 +++++++++
 src/components/result/ToolFileResult.tsx      |  5 +-
 src/config/uiConfig.ts                        |  2 +
 .../image/png/change-colors-in-png/index.tsx  | 98 ++++++++++++++++---
 .../image/png/change-colors-in-png/meta.ts    |  3 +-
 10 files changed, 265 insertions(+), 68 deletions(-)
 create mode 100644 src/components/options/ColorSelector.tsx
 create mode 100644 src/config/uiConfig.ts

diff --git a/.eslintrc b/.eslintrc
index 6c7bbbd..a473206 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -42,6 +42,7 @@
     "tailwindcss/classnames-order": "warn",
     "tailwindcss/no-custom-classname": "warn",
     "tailwindcss/no-contradicting-classname": "error",
-    "@typescript-eslint/ban-types": "off"
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-ts-comment": "off"
   }
 }
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index d18ac21..2f9c07e 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,17 +4,15 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: create-tool.mjs">
-      <change afterPath="$PROJECT_DIR$/src/assets/grey-pattern.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/assets/image.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/InputHeader.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/input/InputFooter.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: change colors in png init">
+      <change afterPath="$PROJECT_DIR$/src/components/options/ColorSelector.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/config/uiConfig.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.eslintrc" beforeDir="false" afterPath="$PROJECT_DIR$/.eslintrc" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/ToolHeader.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolHeader.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/input/ToolTextInput.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/ToolTextInput.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" afterDir="false" />
     </list>
@@ -45,37 +43,37 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "ASKED_ADD_EXTERNAL_FILES": "true",
-    "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "Vitest.mergeText.executor": "Run",
-    "Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run",
-    "Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run",
-    "git-widget-placeholder": "main",
-    "ignore.virus.scanning.warn.message": "true",
-    "kotlin-language-version-configured": "true",
-    "last_opened_file_path": "C:/Users/HP/IdeaProjects/omni-tools/src/assets",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_package_manager_path": "npm",
-    "npm.dev.executor": "Run",
-    "npm.prebuild.executor": "Run",
-    "npm.script:create:tool.executor": "Run",
-    "npm.test.executor": "Run",
-    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier",
-    "project.structure.last.edited": "Problems",
-    "project.structure.proportion": "0.0",
-    "project.structure.side.proportion": "0.2",
-    "settings.editor.selected.configurable": "settings.typescriptcompiler",
-    "ts.external.directory.path": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
+    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;Vitest.mergeText.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor&quot;: &quot;Run&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;main&quot;,
+    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
+    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/HP/IdeaProjects/omni-tools/src/assets&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
+    &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
+    &quot;npm.script:create:tool.executor&quot;: &quot;Run&quot;,
+    &quot;npm.test.executor&quot;: &quot;Run&quot;,
+    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
+    &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
+    &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
+    &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;settings.typescriptcompiler&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="ReactDesignerToolWindowState">
     <option name="myId2Visible">
       <map>
@@ -169,7 +167,8 @@
       <workItem from="1719092003308" duration="14856000" />
       <workItem from="1719164664347" duration="2033000" />
       <workItem from="1719166718305" duration="1783000" />
-      <workItem from="1719168519203" duration="13734000" />
+      <workItem from="1719168519203" duration="17675000" />
+      <workItem from="1719197816332" duration="27000" />
     </task>
     <task id="LOCAL-00001" summary="feat: use vite and ts">
       <option name="closed" value="true" />
@@ -531,7 +530,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719188162583</updated>
     </task>
-    <option name="localTasksCounter" value="46" />
+    <task id="LOCAL-00046" summary="feat: change colors in png init">
+      <option name="closed" value="true" />
+      <created>1719193884293</created>
+      <option name="number" value="00046" />
+      <option name="presentableId" value="LOCAL-00046" />
+      <option name="project" value="LOCAL" />
+      <updated>1719193884293</updated>
+    </task>
+    <option name="localTasksCounter" value="47" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -552,7 +559,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="ubf" />
     <MESSAGE value="ubf jn" />
     <MESSAGE value="feat: conventional commit" />
     <MESSAGE value="test: init" />
@@ -577,7 +583,8 @@
     <MESSAGE value="ci: fix" />
     <MESSAGE value="fix: readme" />
     <MESSAGE value="fix: create-tool.mjs" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: create-tool.mjs" />
+    <MESSAGE value="feat: change colors in png init" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: change colors in png init" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/package-lock.json b/package-lock.json
index 9808b59..7c7f076 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@mui/icons-material": "^5.15.20",
         "@mui/material": "^5.15.20",
         "@types/lodash": "^4.17.5",
+        "color": "^4.2.3",
         "formik": "^2.4.6",
         "lodash": "^4.17.21",
         "notistack": "^3.0.1",
@@ -27,6 +28,8 @@
         "@commitlint/config-conventional": "^19.2.2",
         "@testing-library/jest-dom": "^6.4.5",
         "@testing-library/react": "^14.3.1",
+        "@types/color": "^3.0.6",
+        "@types/color-rgba": "^2.1.2",
         "@types/node": "^20.12.12",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
@@ -2408,6 +2411,36 @@
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true
     },
+    "node_modules/@types/color": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.6.tgz",
+      "integrity": "sha512-NMiNcZFRUAiUUCCf7zkAelY8eV3aKqfbzyFQlXpPIEeoNDbsEHGpb854V3gzTsGKYj830I5zPuOwU/TP5/cW6A==",
+      "dev": true,
+      "dependencies": {
+        "@types/color-convert": "*"
+      }
+    },
+    "node_modules/@types/color-convert": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.3.tgz",
+      "integrity": "sha512-2Q6wzrNiuEvYxVQqhh7sXM2mhIhvZR/Paq4FdsQkOMgWsCIkKvSGj8Le1/XalulrmgOzPMqNa0ix+ePY4hTrfg==",
+      "dev": true,
+      "dependencies": {
+        "@types/color-name": "*"
+      }
+    },
+    "node_modules/@types/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-hulKeREDdLFesGQjl96+4aoJSHY5b2GRjagzzcqCfIrWhe5vkCqIvrLbqzBaI1q94Vg8DNJZZqTR5ocdWmWclg==",
+      "dev": true
+    },
+    "node_modules/@types/color-rgba": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@types/color-rgba/-/color-rgba-2.1.2.tgz",
+      "integrity": "sha512-gDV/fgs4Mpc+hcHygYnM2EDgcxaHmvIGrAVxZJjP38f2IXQKHiGf0XMHhFd+dz8EVPSNTwHL5DJ6yXsxEiCQkg==",
+      "dev": true
+    },
     "node_modules/@types/conventional-commits-parser": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@types/conventional-commits-parser/-/conventional-commits-parser-5.0.0.tgz",
@@ -3527,11 +3560,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -3542,8 +3586,16 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
     },
     "node_modules/commander": {
       "version": "4.1.1",
@@ -7375,6 +7427,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/sirv": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
diff --git a/package.json b/package.json
index 4a5dec7..71c3c43 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.20",
     "@types/lodash": "^4.17.5",
+    "color": "^4.2.3",
     "formik": "^2.4.6",
     "lodash": "^4.17.21",
     "notistack": "^3.0.1",
@@ -43,6 +44,8 @@
     "@commitlint/config-conventional": "^19.2.2",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^14.3.1",
+    "@types/color": "^3.0.6",
+    "@types/color-rgba": "^2.1.2",
     "@types/node": "^20.12.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
diff --git a/src/components/input/ToolFileInput.tsx b/src/components/input/ToolFileInput.tsx
index ced405f..b2189ea 100644
--- a/src/components/input/ToolFileInput.tsx
+++ b/src/components/input/ToolFileInput.tsx
@@ -5,6 +5,7 @@ import InputHeader from '../InputHeader';
 import InputFooter from './InputFooter';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 import greyPattern from '@assets/grey-pattern.png';
+import { globalInputHeight } from '../../config/uiConfig';
 
 interface ToolFileInputProps {
   value: File | null;
@@ -57,7 +58,7 @@ export default function ToolFileInput({
       <Box
         sx={{
           width: '100%',
-          height: 250,
+          height: globalInputHeight,
           border: preview ? 0 : 1,
           borderRadius: 2,
           boxShadow: '5'
@@ -77,7 +78,7 @@ export default function ToolFileInput({
             <img
               src={preview}
               alt="Preview"
-              style={{ maxWidth: '100%', maxHeight: 250 }}
+              style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
             />
           </Box>
         ) : (
diff --git a/src/components/options/ColorSelector.tsx b/src/components/options/ColorSelector.tsx
new file mode 100644
index 0000000..ec49951
--- /dev/null
+++ b/src/components/options/ColorSelector.tsx
@@ -0,0 +1,48 @@
+import React, { useState, ChangeEvent, useRef } from 'react';
+import { Box, Stack, TextField } from '@mui/material';
+import PaletteIcon from '@mui/icons-material/Palette';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { descriptionFontSize } from '../../config/uiConfig';
+
+interface ColorSelectorProps {
+  value: string;
+  onChange: (val: string) => void;
+  description: string;
+}
+
+const ColorSelector: React.FC<ColorSelectorProps> = ({
+  value = '#ffffff',
+  onChange,
+  description
+}) => {
+  const [color, setColor] = useState<string>(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleColorChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const val = event.target.value;
+    setColor(val);
+    onChange(val);
+  };
+
+  return (
+    <Box mb={1}>
+      <Stack direction={'row'}>
+        <TextField value={color} onChange={handleColorChange} />
+        <IconButton onClick={() => inputRef.current?.click()}>
+          <PaletteIcon />
+        </IconButton>
+        <TextField
+          style={{ display: 'none' }}
+          inputRef={inputRef}
+          type="color"
+          value={color}
+          onChange={handleColorChange}
+        />
+      </Stack>
+      <Typography fontSize={descriptionFontSize}>{description}</Typography>
+    </Box>
+  );
+};
+
+export default ColorSelector;
diff --git a/src/components/result/ToolFileResult.tsx b/src/components/result/ToolFileResult.tsx
index d9f0e67..dccc060 100644
--- a/src/components/result/ToolFileResult.tsx
+++ b/src/components/result/ToolFileResult.tsx
@@ -2,6 +2,7 @@ import { Box } from '@mui/material';
 import React from 'react';
 import InputHeader from '../InputHeader';
 import greyPattern from '@assets/grey-pattern.png';
+import { globalInputHeight } from '../../config/uiConfig';
 
 export default function ToolFileResult({
   title = 'Result',
@@ -29,7 +30,7 @@ export default function ToolFileResult({
       <Box
         sx={{
           width: '100%',
-          height: 250,
+          height: globalInputHeight,
           border: preview ? 0 : 1,
           borderRadius: 2,
           boxShadow: '5'
@@ -49,7 +50,7 @@ export default function ToolFileResult({
             <img
               src={preview}
               alt="Result"
-              style={{ maxWidth: '100%', maxHeight: 250 }}
+              style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
             />
           </Box>
         )}
diff --git a/src/config/uiConfig.ts b/src/config/uiConfig.ts
new file mode 100644
index 0000000..5ec7d7b
--- /dev/null
+++ b/src/config/uiConfig.ts
@@ -0,0 +1,2 @@
+export const globalInputHeight = 300;
+export const descriptionFontSize = 12;
diff --git a/src/pages/image/png/change-colors-in-png/index.tsx b/src/pages/image/png/change-colors-in-png/index.tsx
index 59da401..62179a6 100644
--- a/src/pages/image/png/change-colors-in-png/index.tsx
+++ b/src/pages/image/png/change-colors-in-png/index.tsx
@@ -1,14 +1,18 @@
-import { Box } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import * as Yup from 'yup';
 import Grid from '@mui/material/Grid';
-import ToolTextInput from '../../../../components/input/ToolTextInput';
-import ToolTextResult from '../../../../components/result/ToolTextResult';
 import ToolFileInput from '../../../../components/input/ToolFileInput';
 import ToolFileResult from '../../../../components/result/ToolFileResult';
+import ToolOptions from '../../../../components/options/ToolOptions';
+import Typography from '@mui/material/Typography';
+import { Formik, useFormikContext } from 'formik';
+import ColorSelector from '../../../../components/options/ColorSelector';
+import Color from 'color';
 
 const initialValues = {
-  rgba: [0, 0, 0, 0]
+  fromColor: 'white',
+  toColor: 'black'
 };
 const validationSchema = Yup.object({
   // splitSeparator: Yup.string().required('The separator is required')
@@ -17,9 +21,27 @@ export default function ChangeColorsInPng() {
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
 
-  useEffect(() => {
-    if (input) {
-      const processImage = async (file: File) => {
+  const FormikListenerComponent = ({ input }: { input: File }) => {
+    const { values } = useFormikContext<typeof initialValues>();
+    const { fromColor, toColor } = values;
+
+    useEffect(() => {
+      let fromRgb: [number, number, number];
+      let toRgb: [number, number, number];
+      try {
+        //@ts-ignore
+        fromRgb = Color(fromColor).rgb().array();
+        //@ts-ignore
+        toRgb = Color(toColor).rgb().array();
+      } catch (err) {
+        return;
+      }
+      const processImage = async (
+        file: File,
+        fromColor: [number, number, number],
+        toColor: [number, number, number],
+        similarity: number
+      ) => {
         const canvas = document.createElement('canvas');
         const ctx = canvas.getContext('2d');
         if (ctx == null) return;
@@ -34,12 +56,28 @@ export default function ChangeColorsInPng() {
 
         const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
         const data: Uint8ClampedArray = imageData.data;
+
+        const colorDistance = (
+          c1: [number, number, number],
+          c2: [number, number, number]
+        ) => {
+          return Math.sqrt(
+            Math.pow(c1[0] - c2[0], 2) +
+              Math.pow(c1[1] - c2[1], 2) +
+              Math.pow(c1[2] - c2[2], 2)
+          );
+        };
+
         for (let i = 0; i < data.length; i += 4) {
-          // Check for white pixel
-          if (data[i] === 255 && data[i + 1] === 255 && data[i + 2] === 255) {
-            data[i] = 255; // Red
-            data[i + 1] = 0; // Green
-            data[i + 2] = 0; // Blue
+          const currentColor: [number, number, number] = [
+            data[i],
+            data[i + 1],
+            data[i + 2]
+          ];
+          if (colorDistance(currentColor, fromColor) <= similarity) {
+            data[i] = toColor[0]; // Red
+            data[i + 1] = toColor[1]; // Green
+            data[i + 2] = toColor[2]; // Blue
           }
         }
 
@@ -53,9 +91,12 @@ export default function ChangeColorsInPng() {
         }, 'image/png');
       };
 
-      processImage(input);
-    }
-  }, [input]);
+      processImage(input, fromRgb, toRgb, 10);
+    }, [input, fromColor, toColor]);
+
+    return null;
+  };
+
   return (
     <Box>
       <Grid container spacing={2}>
@@ -71,6 +112,33 @@ export default function ChangeColorsInPng() {
           <ToolFileResult title={'Output PNG with new colors'} value={result} />
         </Grid>
       </Grid>
+      <ToolOptions>
+        <Formik
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          onSubmit={() => {}}
+        >
+          {({ setFieldValue, values }) => (
+            <Stack direction={'row'} spacing={2}>
+              {input && <FormikListenerComponent input={input} />}
+              <Box>
+                <Typography fontSize={22}>From color and to color</Typography>
+                <ColorSelector
+                  value={values.fromColor}
+                  onChange={(val) => setFieldValue('fromColor', val)}
+                  description={'Replace this color (from color)'}
+                />
+                <ColorSelector
+                  value={values.toColor}
+                  onChange={(val) => setFieldValue('toColor', val)}
+                  description={'With this color (to color).\n'}
+                />
+              </Box>
+              <Box></Box>
+            </Stack>
+          )}
+        </Formik>
+      </ToolOptions>
     </Box>
   );
 }
diff --git a/src/pages/image/png/change-colors-in-png/meta.ts b/src/pages/image/png/change-colors-in-png/meta.ts
index c6aac38..dd87e03 100644
--- a/src/pages/image/png/change-colors-in-png/meta.ts
+++ b/src/pages/image/png/change-colors-in-png/meta.ts
@@ -6,7 +6,8 @@ export const tool = defineTool('png', {
   name: 'Change colors in png',
   path: 'change-colors-in-png',
   image,
-  description: '',
+  description:
+    "World's simplest online Portable Network Graphics (PNG) color changer. Just import your PNG image in the editor on the left, select which colors to change, and you'll instantly get a new PNG with the new colors on the right. Free, quick, and very powerful. Import a PNG – replace its colors.",
   keywords: ['change', 'colors', 'in', 'png'],
   component: lazy(() => import('./index'))
 });