diff --git a/cypress/e2e/utils/PHPArrayToJson.cy.ts b/cypress/e2e/utils/PHPArrayToJson.cy.ts
index ed779f8..f4d86bd 100644
--- a/cypress/e2e/utils/PHPArrayToJson.cy.ts
+++ b/cypress/e2e/utils/PHPArrayToJson.cy.ts
@@ -15,7 +15,7 @@ describe('PHP Array To Json', () => {
     it('should display the results of the inspected string', () => {
         cy.get('textarea').type(phpArray)
 
-        cy.contains('Convert').click()
+        cy.get('button').contains('Convert').click()
 
         cy.contains(`"${key}":"${value}"`)
     })
diff --git a/cypress/e2e/utils/csvtojson.cy.ts b/cypress/e2e/utils/csvtojson.cy.ts
index cc83a9e..9f248d1 100644
--- a/cypress/e2e/utils/csvtojson.cy.ts
+++ b/cypress/e2e/utils/csvtojson.cy.ts
@@ -13,7 +13,7 @@ describe('CSV to JSON', () => {
         const CSVData = "Name,Age,Height\nJoe,25,5'10\nMike,30,6'0"
 
         cy.get('textarea[placeholder="CSV Data"]').type(CSVData, { scrollBehavior: 'center' })
-        cy.contains('Convert').click()
+        cy.get('button').contains('Convert').click()
 
         const expectedJSON = CSVToJSON(CSVData)
         cy.get('textarea[placeholder="JSON format"]').invoke('val').should('equal', expectedJSON)
@@ -21,7 +21,7 @@ describe('CSV to JSON', () => {
 
     it('should return an empty array if the CSV data cannot be parsed', () => {
         cy.get('textarea[placeholder="CSV Data"]').type('I am the walrus', { scrollBehavior: 'center' })
-        cy.contains('Convert').click()
+        cy.get('button').contains('Convert').click()
         cy.get('textarea[placeholder="JSON format"]').invoke('val').should('equal', '[]')
     })
 })
\ No newline at end of file
diff --git a/cypress/e2e/utils/jsontocsv.cy.ts b/cypress/e2e/utils/jsontocsv.cy.ts
index d1d6654..e8ae104 100644
--- a/cypress/e2e/utils/jsontocsv.cy.ts
+++ b/cypress/e2e/utils/jsontocsv.cy.ts
@@ -14,7 +14,7 @@ describe('CSV to JSON', () => {
         const JSONData = '[{"name": "John Doe", "age": "15"}]'
 
         cy.get('textarea[placeholder="JSON Data"]').type(JSONData, { parseSpecialCharSequences: false })
-        cy.contains('Convert').click()
+        cy.get('button').contains('Convert').click()
 
         const expectedCSV = JSONtoCSV(JSONData)
         cy.get('textarea[placeholder="CSV format"]').invoke('val').should('equal', expectedCSV)
@@ -23,7 +23,7 @@ describe('CSV to JSON', () => {
 
     it('should return an empty array if the CSV data cannot be parsed', () => {
         cy.get('textarea[placeholder="JSON Data"]').type('I am the walrus')
-        cy.contains('Convert').click()
+        cy.get('button').contains('Convert').click()
         cy.get('textarea[placeholder="CSV format"]').invoke('val').should('equal', '')
     })
 })
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 2551e9e..8bc8ee6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,10 @@
       "name": "utilsNinja",
       "version": "0.0.0",
       "dependencies": {
+        "colortranslator": "^3.0.2",
         "lorem-ipsum": "^2.0.8",
         "vue": "^3.2.38",
+        "vue-debounce": "^4.0.1",
         "vue-gtag": "^2.0.1",
         "vue-json-pretty": "^2.2.3",
         "vue-router": "^4.1.5"
@@ -1515,6 +1517,11 @@
       "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
       "dev": true
     },
+    "node_modules/colortranslator": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/colortranslator/-/colortranslator-3.0.2.tgz",
+      "integrity": "sha512-BAi+1mC33m9WGMrZXGke+IHzs8DDG3EKazim8mJ/kGF3VihNmsV9Yh8mX/9emQK1qThQZ/TatYTxoLUFnCqOOg=="
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -6214,6 +6221,14 @@
         "@vue/shared": "3.2.40"
       }
     },
+    "node_modules/vue-debounce": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/vue-debounce/-/vue-debounce-4.0.1.tgz",
+      "integrity": "sha512-f2HeuLA5b9WY+cKVAU+ydwi9UHxgCWZQt/6HP/5QogthFwm/e+WMP5jpUq2WhEvnHisPkPMomYDRXDxc2AiQDw==",
+      "peerDependencies": {
+        "vue": ">= 2.0.0"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.1.0.tgz",
@@ -7603,6 +7618,11 @@
       "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
       "dev": true
     },
+    "colortranslator": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/colortranslator/-/colortranslator-3.0.2.tgz",
+      "integrity": "sha512-BAi+1mC33m9WGMrZXGke+IHzs8DDG3EKazim8mJ/kGF3VihNmsV9Yh8mX/9emQK1qThQZ/TatYTxoLUFnCqOOg=="
+    },
     "combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -10917,6 +10937,12 @@
         "@vue/shared": "3.2.40"
       }
     },
+    "vue-debounce": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/vue-debounce/-/vue-debounce-4.0.1.tgz",
+      "integrity": "sha512-f2HeuLA5b9WY+cKVAU+ydwi9UHxgCWZQt/6HP/5QogthFwm/e+WMP5jpUq2WhEvnHisPkPMomYDRXDxc2AiQDw==",
+      "requires": {}
+    },
     "vue-eslint-parser": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.1.0.tgz",
diff --git a/package.json b/package.json
index cf0d91b..693795b 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,10 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "colortranslator": "^3.0.2",
     "lorem-ipsum": "^2.0.8",
     "vue": "^3.2.38",
+    "vue-debounce": "^4.0.1",
     "vue-gtag": "^2.0.1",
     "vue-json-pretty": "^2.2.3",
     "vue-router": "^4.1.5"
diff --git a/src/main.ts b/src/main.ts
index 082c4de..27fa27a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from './router'
 import './assets/style.css'
 import VueGtag from 'vue-gtag'
+import { vue3Debounce } from 'vue-debounce'
 
 const app = createApp(App)
 
@@ -15,4 +16,5 @@ app.use(VueGtag,
     },
     router
 )
+app.directive('debounce', vue3Debounce({ lock: true }))
 app.mount('#app')
diff --git a/src/router/index.ts b/src/router/index.ts
index b3fa905..0c1ce14 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -12,6 +12,7 @@ import JSONToPHPArray from '@/views/JSONToPHPArray.vue'
 import Base64Encode from '@/views/Base64Encode.vue'
 import Base64Decode from '@/views/Base64Decode.vue'
 import LineSort from '@/views/LineSort.vue'
+import ColorConverter from '@/views/ColorConverter.vue'
 
 export const routes = [
     {
@@ -89,6 +90,11 @@ export const routes = [
                 name: 'LineSort',
                 component: LineSort,
             },
+            {
+                path: 'color-converter',
+                name: 'ColorConverter',
+                component: ColorConverter,
+            },
         ],
     },
 ]
diff --git a/src/utilities/ColorConverter.ts b/src/utilities/ColorConverter.ts
new file mode 100644
index 0000000..eb3abf4
--- /dev/null
+++ b/src/utilities/ColorConverter.ts
@@ -0,0 +1,12 @@
+import { ColorTranslator } from 'colortranslator'
+
+export function ColorConverter(colorCode: string) {
+    const translator: ColorTranslator = new ColorTranslator(colorCode)
+
+    return {
+        rgb: translator.RGB,
+        hex: translator.HEX,
+        hsl: translator.HSL,
+        cmyk: translator.CMYK,
+    }
+}
\ No newline at end of file
diff --git a/src/views/ColorConverter.vue b/src/views/ColorConverter.vue
new file mode 100644
index 0000000..0d02344
--- /dev/null
+++ b/src/views/ColorConverter.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="border-2 space-y-4 flex flex-col text-right items-center text-purple-500">
+    <div class="flex mb-12">
+      <div class="p-2 w-48">
+        <p class="text-xl font-bold">Enter color code:</p>
+        <p class="text-xs">Accept RGB, HEX, CMYK, HSL</p>
+      </div>
+      <div class="flex flex-col overflow-ellipsis">
+        <input type="text" v-model="colorInput" v-debounce:300ms="convert"
+               class="border rounded border-black p-1 w-96 text-black text-xl">
+        <p v-if="errorMessage" class="text-red-500 text-sm text-left">{{ errorMessage }}</p>
+      </div>
+    </div>
+    <div class="flex">
+      <p class="text-lg w-48 p-2">Color:</p>
+      <input type="text" class="border rounded border-gray-300 p-1 w-96" :style="{ backgroundColor: hex }" readonly>
+    </div>
+    <div class="flex">
+      <p class="text-lg w-48 p-2">RGB:</p>
+      <input type="text" id="rgb" v-model="rgb" class="border rounded border-gray-300 p-1 w-96 text-black" readonly>
+      <button class="bg-purple-500 hover:bg-purple-600 text-white text-sm leading-6 font-medium mx-4 rounded-lg p-2"
+              type="button" @click="copyToClipboard(rgb)">Copy to Clipboard
+      </button>
+    </div>
+    <div class="flex">
+      <p class="text-lg w-48 p-2">HEX:</p>
+      <input type="text" id="hex" v-model="hex" class="border rounded border-gray-300 p-1 w-96 text-black" readonly>
+      <button class="bg-purple-500 hover:bg-purple-600 text-white text-sm leading-6 font-medium mx-4 rounded-lg p-2"
+              type="button" @click="copyToClipboard(hex)">Copy to Clipboard
+      </button>
+    </div>
+    <div class="flex">
+      <p class="text-lg w-48 p-2">CMYK:</p>
+      <input type="text" id="cmyk" v-model="cmyk" class="border rounded border-gray-300 p-1 w-96 text-black" readonly>
+      <button class="bg-purple-500 hover:bg-purple-600 text-white text-sm leading-6 font-medium mx-4 rounded-lg p-2"
+              type="button" @click="copyToClipboard(cmyk)">Copy to Clipboard
+      </button>
+    </div>
+    <div class="flex">
+      <p class="text-lg w-48 p-2">HSL:</p>
+      <input type="text" id="hsl" v-model="hsl" class="border rounded border-gray-300 p-1 w-96 text-black" readonly>
+      <button class="bg-purple-500 hover:bg-purple-600 text-white text-sm leading-6 font-medium mx-4 rounded-lg p-2"
+              type="button" @click="copyToClipboard(hsl)">Copy to Clipboard
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { ColorConverter } from '@/utilities/ColorConverter'
+import { copyToClipboard } from '@/helpers/CopyToClipboard'
+
+const colorInput = ref<string>('')
+const rgb = ref<string>('')
+const hex = ref<string>('')
+const hsl = ref<string>('')
+const cmyk = ref<string>('')
+let errorMessage = ref<string | null>('')
+
+function convert() {
+  try {
+    const convertedColorCodes = ColorConverter(colorInput.value.toLowerCase())
+    errorMessage.value = null
+    rgb.value = convertedColorCodes.rgb
+    hex.value = convertedColorCodes.hex
+    hsl.value = convertedColorCodes.hsl
+    cmyk.value = convertedColorCodes.cmyk
+
+  } catch (e: any) {
+    if (colorInput.value) {
+      errorMessage.value = e.message
+    }
+  }
+}
+
+</script>
\ No newline at end of file
diff --git a/src/views/ToolsView.vue b/src/views/ToolsView.vue
index ae9739b..0db71bc 100644
--- a/src/views/ToolsView.vue
+++ b/src/views/ToolsView.vue
@@ -31,8 +31,9 @@ const links = [
   { route: 'Dates', label: 'Dates' },
   { route: 'PHPToJSON', label: 'PHP To JSON' },
   { route: 'JSONToPHP', label: 'JSON To PHP' },
-  { route: 'Base64Encode', label: 'Base64Encode' },
-  { route: 'Base64Decode', label: 'Base64Decode' },
-  { route: 'LineSort', label: 'LineSort' }
+  { route: 'Base64Encode', label: 'Base64 Encode' },
+  { route: 'Base64Decode', label: 'Base64 Decode' },
+  { route: 'LineSort', label: 'Line Sort' },
+  { route: 'ColorConverter', label: 'Color Converter' }
 ]
 </script>
diff --git a/tests/utilities/ColorConverter.test.ts b/tests/utilities/ColorConverter.test.ts
new file mode 100644
index 0000000..db15639
--- /dev/null
+++ b/tests/utilities/ColorConverter.test.ts
@@ -0,0 +1,44 @@
+import { ColorConverter } from '@/utilities/ColorConverter'
+import { describe, expect, it } from 'vitest'
+
+describe('ColorConverter', () => {
+    it('converts RGB color codes', () => {
+        const RGB: string = 'rgb(255, 255, 255)'
+
+        const converted = ColorConverter(RGB)
+
+        expect(converted.hex).toBe('#FFFFFF')
+        expect(converted.hsl).toBe('hsl(0, 0%, 100%)')
+        expect(converted.cmyk).toBe('device-cmyk(0%, 0%, 0%, 0%)')
+    })
+
+    it('converts HEX color codes', () => {
+        const HEX: string = '#FFFFFF'
+
+        const converted = ColorConverter(HEX)
+
+        expect(converted.rgb).toBe('rgb(255 255 255)')
+        expect(converted.hsl).toBe('hsl(0 0% 100%)')
+        expect(converted.cmyk).toBe('device-cmyk(0% 0% 0% 0%)')
+    })
+
+    it('converts HSL color codes', () => {
+        const HSL= 'hsl(288, 8%, 55%)'
+
+        const converted = ColorConverter(HSL)
+
+        expect(converted.rgb).toBe('rgb(145.758, 131.07, 149.43)')
+        expect(converted.hex).toBe('#928395')
+        expect(converted.cmyk).toBe('device-cmyk(2.457338%, 12.286689%, 0%, 41.4%)')
+    })
+
+    it('converts CMYK color codes', () => {
+        const CMYK= 'cmyk(100%, 26%, 0%, 0%)'
+
+        const converted = ColorConverter(CMYK)
+
+        expect(converted.rgb).toBe('rgb(0, 188.7, 255)')
+        expect(converted.hex).toBe('#00BDFF')
+        expect(converted.hsl).toBe('hsl(195.6, 100%, 50%)')
+    })
+})
\ No newline at end of file