diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 4604c7d..d0d65b5 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,17 +4,12 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: formik updateField">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: formik updateField">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptions.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/create-transparent/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/create-transparent/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/number/generate/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/generate/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/number/sum/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/sum/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/join/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/join/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/split/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/split/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/to-morse/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/to-morse/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/video/gif/change-speed/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/video/gif/change-speed/index.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/pages/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/utils/color.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/utils/color.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -64,7 +59,7 @@
     "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",
+    "git-widget-placeholder": "4-convert-jpg-to-png",
     "ignore.virus.scanning.warn.message": "true",
     "kotlin-language-version-configured": "true",
     "last_opened_file_path": "C:/Users/HP/IdeaProjects/omni-tools/src/assets",
@@ -79,6 +74,7 @@
     "npm.script:create:tool.executor": "Run",
     "npm.test.executor": "Run",
     "npm.test:e2e.executor": "Run",
+    "npm.test:e2e:run.executor": "Run",
     "prettierjs.PrettierConfiguration.Package": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier",
     "project.structure.last.edited": "Problems",
     "project.structure.proportion": "0.0",
@@ -112,20 +108,7 @@
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\tools" />
     </key>
   </component>
-  <component name="RunManager" selected="npm.dev">
-    <configuration name="JoinText Component.should merge text pieces with specified join character" type="JavaScriptTestRunnerPlaywright" temporary="true" nameIsGenerated="true">
-      <node-interpreter value="project" />
-      <playwright-package value="$PROJECT_DIR$/node_modules/@playwright/test" />
-      <working-dir value="$PROJECT_DIR$" />
-      <envs />
-      <scope-kind value="TEST" />
-      <test-file value="$PROJECT_DIR$/src/pages/string/join/string-join.e2e.spec.ts" />
-      <test-names>
-        <test-name value="JoinText Component" />
-        <test-name value="should merge text pieces with specified join character" />
-      </test-names>
-      <method v="2" />
-    </configuration>
+  <component name="RunManager" selected="npm.test:e2e:run">
     <configuration name="dev" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
       <package-json value="$PROJECT_DIR$/package.json" />
       <command value="run" />
@@ -166,13 +149,23 @@
       <envs />
       <method v="2" />
     </configuration>
+    <configuration name="test:e2e:run" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
+      <package-json value="$PROJECT_DIR$/package.json" />
+      <command value="run" />
+      <scripts>
+        <script value="test:e2e:run" />
+      </scripts>
+      <node-interpreter value="project" />
+      <envs />
+      <method v="2" />
+    </configuration>
     <recent_temporary>
       <list>
+        <item itemvalue="npm.test:e2e:run" />
         <item itemvalue="npm.dev" />
         <item itemvalue="npm.test" />
         <item itemvalue="npm.lint" />
         <item itemvalue="npm.test:e2e" />
-        <item itemvalue="Playwright.JoinText Component.should merge text pieces with specified join character" />
       </list>
     </recent_temporary>
   </component>
@@ -208,14 +201,8 @@
       <workItem from="1719475764139" duration="14903000" />
       <workItem from="1719492452780" duration="8000" />
       <workItem from="1719496624579" duration="6148000" />
-    </task>
-    <task id="LOCAL-00027" summary="chore: tools by category">
-      <option name="closed" value="true" />
-      <created>1719102365836</created>
-      <option name="number" value="00027" />
-      <option name="presentableId" value="LOCAL-00027" />
-      <option name="project" value="LOCAL" />
-      <updated>1719102365836</updated>
+      <workItem from="1719571065018" duration="13000" />
+      <workItem from="1719583866571" duration="1595000" />
     </task>
     <task id="LOCAL-00028" summary="feat: copy and import file">
       <option name="closed" value="true" />
@@ -601,7 +588,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719519913328</updated>
     </task>
-    <option name="localTasksCounter" value="76" />
+    <task id="LOCAL-00076" summary="fix: formik updateField">
+      <option name="closed" value="true" />
+      <created>1719521563441</created>
+      <option name="number" value="00076" />
+      <option name="presentableId" value="LOCAL-00076" />
+      <option name="project" value="LOCAL" />
+      <updated>1719521563441</updated>
+    </task>
+    <option name="localTasksCounter" value="77" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -634,7 +629,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="feat: string to morse" />
     <MESSAGE value="feat: sum numbers init" />
     <MESSAGE value="fix: compilation" />
     <MESSAGE value="chore: printRunningSum" />
@@ -659,7 +653,8 @@
     <MESSAGE value="fix: misc" />
     <MESSAGE value="fix: radio and list sort init" />
     <MESSAGE value="chore: formik updateField" />
-    <option name="LAST_COMMIT_MESSAGE" value="chore: formik updateField" />
+    <MESSAGE value="fix: formik updateField" />
+    <option name="LAST_COMMIT_MESSAGE" value="fix: formik updateField" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/pages/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts b/src/pages/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts
index 83eda93..38fa772 100644
--- a/src/pages/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts
+++ b/src/pages/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts
@@ -2,6 +2,7 @@ import { expect, test } from '@playwright/test';
 import { Buffer } from 'buffer';
 import path from 'path';
 import Jimp from 'jimp';
+import { convertHexToRGBA } from '../../../../utils/color';
 
 test.describe('Change colors in png', () => {
   test.beforeEach(async ({ page }) => {
@@ -15,7 +16,8 @@ test.describe('Change colors in png', () => {
     await fileInput?.setInputFiles(imagePath);
 
     await page.getByTestId('from-color-input').fill('#FF0000');
-    await page.getByTestId('to-color-input').fill('#0000FF');
+    const toColor = '#0000FF';
+    await page.getByTestId('to-color-input').fill(toColor);
 
     // Click on download
     const downloadPromise = page.waitForEvent('download');
@@ -36,6 +38,6 @@ test.describe('Change colors in png', () => {
     // Check that the first pixel is transparent
     const image = await Jimp.read(fileContent);
     const color = image.getPixelColor(0, 0);
-    expect(color).toBe(0x0000ffff);
+    expect(color).toBe(convertHexToRGBA(toColor));
   });
 });
diff --git a/src/utils/color.ts b/src/utils/color.ts
index 8b45952..692a78e 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -20,3 +20,15 @@ export function areColorsSimilar(
 
   return colorDistance(color1, color2) <= similarityThreshold;
 }
+
+export function convertHexToRGBA(color: string): number {
+  // Remove the leading '#' if present
+  if (color.startsWith('#')) {
+    color = color.slice(1);
+  }
+
+  // Convert the color to a number and add the alpha channel
+  const colorValue = parseInt(color, 16);
+  const alphaChannel = 0xff;
+  return (colorValue << 8) | alphaChannel;
+}