5 files changed, 82 insertions, 1 deletions
diff --git a/src/tools/color-converter/color-converter.service.test.ts b/src/tools/color-converter/color-converter.service.test.ts
new file mode 100644
index 0000000..88daa54
--- /dev/null
+++ b/src/tools/color-converter/color-converter.service.test.ts
@@ -0,0 +1,6 @@
+import { expect, describe, it } from 'vitest';
+// import { } from './color-converter.service';
+//
+// describe('color-converter', () => {
+//
+// })
+\ No newline at end of file
diff --git a/src/tools/color-converter/color-converter.service.ts b/src/tools/color-converter/color-converter.service.ts
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/tools/color-converter/color-converter.service.ts
diff --git a/src/tools/color-converter/color-converter.vue b/src/tools/color-converter/color-converter.vue
new file mode 100644
index 0000000..2c357b6
--- /dev/null
+++ b/src/tools/color-converter/color-converter.vue
@@ -0,0 +1,63 @@
+<template>
+  <n-card>
+    <n-form label-width="100" label-placement="left">
+      <n-form-item label="color picker:">
+        <n-color-picker v-model:value="hex" @update:value="(v: string) => onInputUpdated(v, 'hex')"
+          placement="bottom-end" />
+      </n-form-item>
+      <n-form-item label="color name:">
+        <n-input v-model:value="name" :on-input="(v: string) => onInputUpdated(v, 'name')" />
+      </n-form-item>
+      <n-form-item label="hex:">
+        <n-input v-model:value="hex" :on-input="(v: string) => onInputUpdated(v, 'hex')" />
+      </n-form-item>
+      <n-form-item label="rgb:">
+        <n-input v-model:value="rgb" :on-input="(v: string) => onInputUpdated(v, 'rgb')" />
+      </n-form-item>
+      <n-form-item label="hsl:">
+        <n-input v-model:value="hsl" :on-input="(v: string) => onInputUpdated(v, 'hsl')" />
+      </n-form-item>
+      <n-form-item label="hwb:">
+        <n-input v-model:value="hwb" :on-input="(v: string) => onInputUpdated(v, 'hwb')" />
+      </n-form-item>
+      <n-form-item label="cmyk:">
+        <n-input v-model:value="cmyk" :on-input="(v: string) => onInputUpdated(v, 'cmyk')" />
+      </n-form-item>
+    </n-form>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { colord, extend } from "colord";
+
+import cmykPlugin from "colord/plugins/cmyk";
+import hwbPlugin from "colord/plugins/hwb";
+import namesPlugin from "colord/plugins/names";
+
+extend([cmykPlugin, hwbPlugin, namesPlugin]);
+
+const name = ref('')
+const hex = ref('#1ea54cff')
+const rgb = ref('')
+const hsl = ref('')
+const hwb = ref('')
+const cmyk = ref('')
+
+function onInputUpdated(value: string, omit: string) {
+  const color = colord(value);
+
+  omit !== 'name' && (name.value = color.toName({ closest: true }) ?? '');
+  omit !== 'hex' && (hex.value = color.toHex());
+  omit !== 'rgb' && (rgb.value = color.toRgbString());
+  omit !== 'hsl' && (hsl.value = color.toHslString());
+  omit !== 'hwb' && (hwb.value = color.toHwbString());
+  omit !== 'cmyk' && (cmyk.value = color.toCmykString());
+}
+
+onInputUpdated(hex.value, 'hex')
+
+</script>
+
+<style lang="less" scoped>
+</style>
+\ No newline at end of file
diff --git a/src/tools/color-converter/index.ts b/src/tools/color-converter/index.ts
new file mode 100644
index 0000000..6ad7b22
--- /dev/null
+++ b/src/tools/color-converter/index.ts
@@ -0,0 +1,11 @@
+import { Palette } from '@vicons/tabler';
+import type { ITool } from './../Tool';
+
+export const tool: ITool = {
+  name: 'Color converter',
+  path: '/color-converter',
+  description: 'Convert color between the different formats (hex, rgb, hsl and css name)',
+  keywords: ['color', 'converter'],
+  component: () => import('./color-converter.vue'),
+  icon: Palette,
+};
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 577c1b4..8079133 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,6 +1,7 @@
 import { LockOpen } from '@vicons/tabler';
 import type { ToolCategory } from './Tool';
 
+import { tool as colorConverter } from './color-converter';
 import { tool as qrCodeGenerator } from './qr-code-generator';
 import { tool as base64Converter } from './base64-converter';
 import { tool as crontabGenerator } from './crontab-generator';
@@ -27,7 +28,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Converter',
     icon: LockOpen,
-    components: [dateTimeConverter, baseConverter, romanNumeralConverter, base64Converter],
+    components: [dateTimeConverter, baseConverter, romanNumeralConverter, base64Converter, colorConverter],
   },
   {
     name: 'Web',