feat(new tool): Color Wheel

Fix #1241
2025-05-04 13:29:13 -04:00 · 2024-08-23 21:32:35 +02:00 · 2024-08-23 21:32:35 +02:00 · f9f9288bbc
commit f9f9288bbc
parent 318fb6efb9
5 changed files with 362 additions and 7 deletions
--- a/package.json
+++ b/package.json
@ -89,6 +89,7 @@
    "unplugin-auto-import": "^0.16.4",
    "uuid": "^9.0.0",
    "vue": "^3.3.4",
+    "vue-color-wheel": "^0.1.1",
    "vue-i18n": "^9.9.1",
    "vue-router": "^4.1.6",
    "vue-tsc": "^1.8.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -167,6 +167,9 @@ dependencies:
  vue:
    specifier: ^3.3.4
    version: 3.3.4
+  vue-color-wheel:
+    specifier: ^0.1.1
+    version: 0.1.1
  vue-i18n:
    specifier: ^9.9.1
    version: 9.9.1(vue@3.3.4)
@ -1904,6 +1907,12 @@ packages:
      '@babel/helper-validator-identifier': 7.22.20
      to-fast-properties: 2.0.0

+  /@cfcs/core@0.0.6:
+    resolution: {integrity: sha512-FxfJMwoLB8MEMConeXUCqtMGqxdtePQxRBOiGip9ULcYYam3WfCgoY6xdnMaSkYvRvmosp5iuG+TiPofm65+Pw==}
+    dependencies:
+      '@egjs/component': 3.0.5
+    dev: false
+
  /@css-render/plugin-bem@0.15.12(css-render@0.15.12):
    resolution: {integrity: sha512-Lq2jSOZn+wYQtsyaFj6QRz2EzAnd3iW5fZeHO1WSXQdVYwvwGX0ZiH3X2JQgtgYLT1yeGtrwrqJdNdMEUD2xTw==}
    peerDependencies:
@ -1920,6 +1929,28 @@ packages:
      vue: 3.3.4
    dev: false

+  /@daybrush/utils@1.13.0:
+    resolution: {integrity: sha512-ALK12C6SQNNHw1enXK+UO8bdyQ+jaWNQ1Af7Z3FNxeAwjYhQT7do+TRE4RASAJ3ObaS2+TJ7TXR3oz2Gzbw0PQ==}
+    dev: false
+
+  /@egjs/agent@2.4.4:
+    resolution: {integrity: sha512-cvAPSlUILhBBOakn2krdPnOGv5hAZq92f1YHxYcfu0p7uarix2C6Ia3AVizpS1SGRZGiEkIS5E+IVTLg1I2Iog==}
+    dev: false
+
+  /@egjs/children-differ@1.0.1:
+    resolution: {integrity: sha512-DRvyqMf+CPCOzAopQKHtW+X8iN6Hy6SFol+/7zCUiE5y4P/OB8JP8FtU4NxtZwtafvSL4faD5KoQYPj3JHzPFQ==}
+    dependencies:
+      '@egjs/list-differ': 1.0.1
+    dev: false
+
+  /@egjs/component@3.0.5:
+    resolution: {integrity: sha512-cLcGizTrrUNA2EYE3MBmEDt2tQv1joVP1Q3oDisZ5nw0MZDx2kcgEXM+/kZpfa/PAkFvYVhRUZwytIQWoN3V/w==}
+    dev: false
+
+  /@egjs/list-differ@1.0.1:
+    resolution: {integrity: sha512-OTFTDQcWS+1ZREOdCWuk5hCBgYO4OsD30lXcOCyVOAjXMhgL5rBRDnt/otb6Nz8CzU0L/igdcaQBDLWc4t9gvg==}
+    dev: false
+
  /@emotion/hash@0.8.0:
    resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
    dev: false
@ -2595,6 +2626,25 @@ packages:
    resolution: {integrity: sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==}
    dev: true

+  /@scena/dragscroll@1.4.0:
+    resolution: {integrity: sha512-3O8daaZD9VXA9CP3dra6xcgt/qrm0mg0xJCwiX6druCteQ9FFsXffkF8PrqxY4Z4VJ58fFKEa0RlKqbsi/XnRA==}
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@scena/event-emitter': 1.0.5
+    dev: false
+
+  /@scena/event-emitter@1.0.5:
+    resolution: {integrity: sha512-AzY4OTb0+7ynefmWFQ6hxDdk0CySAq/D4efljfhtRHCOP7MBF9zUfhKG3TJiroVjASqVgkRJFdenS8ArZo6Olg==}
+    dependencies:
+      '@daybrush/utils': 1.13.0
+    dev: false
+
+  /@scena/matrix@1.1.1:
+    resolution: {integrity: sha512-JVKBhN0tm2Srl+Yt+Ywqu0oLgLcdemDQlD1OxmN9jaCTwaFPZ7tY8n6dhVgMEaR9qcR7r+kAlMXnSfNyYdE+Vg==}
+    dependencies:
+      '@daybrush/utils': 1.13.0
+    dev: false
+
  /@sinclair/typebox@0.27.8:
    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
    dev: true
@ -3360,7 +3410,7 @@ packages:
    dependencies:
      '@unhead/dom': 0.5.1
      '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.11.1(vue@3.3.4)
+      '@vueuse/shared': 11.0.1(vue@3.3.4)
      unhead: 0.5.1
      vue: 3.3.4
    transitivePeerDependencies:
@ -3993,19 +4043,19 @@ packages:
      - vue
    dev: false

-  /@vueuse/shared@10.11.1(vue@3.3.4):
-    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+  /@vueuse/shared@10.3.0(vue@3.3.4):
+    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
    dependencies:
-      vue-demi: 0.14.10(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
    transitivePeerDependencies:
      - '@vue/composition-api'
      - vue
    dev: false

-  /@vueuse/shared@10.3.0(vue@3.3.4):
-    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
+  /@vueuse/shared@11.0.1(vue@3.3.4):
+    resolution: {integrity: sha512-eAPf5CQB3HR0S76HqrhjBqFYstZfiHWZq8xF9EQmobGBkrhPfErJEhr8aMNQMqd6MkENIx2pblIEfJGlHpClug==}
    dependencies:
-      vue-demi: 0.14.5(vue@3.3.4)
+      vue-demi: 0.14.10(vue@3.3.4)
    transitivePeerDependencies:
      - '@vue/composition-api'
      - vue
@ -4630,6 +4680,43 @@ packages:
    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
    dev: false

+  /croact-css-styled@1.1.9:
+    resolution: {integrity: sha512-G7yvRiVJ3Eoj0ov2h2xR4312hpOzATay2dGS9clK8yJQothjH1sBXIyvOeRP5wBKD9mPcKcoUXPCPsl0tQog4w==}
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      css-styled: 1.0.8
+      framework-utils: 1.1.0
+    dev: false
+
+  /croact-moveable@0.9.0(croact@1.0.4):
+    resolution: {integrity: sha512-fc3bieV6CdqqZFtzsSLi9KmvUMFW3oakUfhPCls1BxKjOfUfn8rktteGED2341A/Qghy8tI3Hm6SdocIc68IKg==}
+    peerDependencies:
+      croact: ^1.0.4
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@egjs/agent': 2.4.4
+      '@egjs/children-differ': 1.0.1
+      '@egjs/list-differ': 1.0.1
+      '@scena/dragscroll': 1.4.0
+      '@scena/event-emitter': 1.0.5
+      '@scena/matrix': 1.1.1
+      croact: 1.0.4
+      croact-css-styled: 1.1.9
+      css-to-mat: 1.1.1
+      framework-utils: 1.1.0
+      gesto: 1.19.4
+      overlap-area: 1.1.0
+      react-css-styled: 1.1.9
+      react-moveable: 0.56.0
+    dev: false
+
+  /croact@1.0.4:
+    resolution: {integrity: sha512-9GhvyzTY/IVUrMQ2iz/mzgZ8+NcjczmIo/t4FkC1CU0CEcau6v6VsEih4jkTa4ZmRgYTF0qXEZLObCzdDFplpw==}
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@egjs/list-differ': 1.0.1
+    dev: false
+
  /cron-validator@1.3.1:
    resolution: {integrity: sha512-C1HsxuPCY/5opR55G5/WNzyEGDWFVG+6GLrA+fW/sCTcP6A6NTjUP2AK7B8n2PyFs90kDG2qzwm8LMheADku6A==}
    dev: false
@ -4673,6 +4760,19 @@ packages:
      nth-check: 2.1.1
    dev: true

+  /css-styled@1.0.8:
+    resolution: {integrity: sha512-tCpP7kLRI8dI95rCh3Syl7I+v7PP+2JYOzWkl0bUEoSbJM+u8ITbutjlQVf0NC2/g4ULROJPi16sfwDIO8/84g==}
+    dependencies:
+      '@daybrush/utils': 1.13.0
+    dev: false
+
+  /css-to-mat@1.1.1:
+    resolution: {integrity: sha512-kvpxFYZb27jRd2vium35G7q5XZ2WJ9rWjDUMNT36M3Hc41qCrLXFM5iEKMGXcrPsKfXEN+8l/riB4QzwwwiEyQ==}
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@scena/matrix': 1.1.1
+    dev: false
+
  /css-tree@2.2.1:
    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
@ -5698,6 +5798,10 @@ packages:
    resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
    dev: false

+  /framework-utils@1.1.0:
+    resolution: {integrity: sha512-KAfqli5PwpFJ8o3psRNs8svpMGyCSAe8nmGcjQ0zZBWN2H6dZDnq+ABp3N3hdUmFeMrLtjOCTXD4yplUJIWceg==}
+    dev: false
+
  /from@0.1.7:
    resolution: {integrity: sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==}
    dev: true
@ -5781,6 +5885,13 @@ packages:
    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
    engines: {node: '>=6.9.0'}

+  /gesto@1.19.4:
+    resolution: {integrity: sha512-hfr/0dWwh0Bnbb88s3QVJd1ZRJeOWcgHPPwmiH6NnafDYvhTsxg+SLYu+q/oPNh9JS3V+nlr6fNs8kvPAtcRDQ==}
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@scena/event-emitter': 1.0.5
+    dev: false
+
  /get-caller-file@2.0.5:
    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
    engines: {node: 6.* || 8.* || >= 10.*}
@ -5934,6 +6045,10 @@ packages:
      strip-bom-string: 1.0.0
    dev: true

+  /gsap@3.12.5:
+    resolution: {integrity: sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==}
+    dev: false
+
  /gzip-size@6.0.0:
    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
    engines: {node: '>=10'}
@ -6634,6 +6749,19 @@ packages:
    resolution: {integrity: sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==}
    dev: false

+  /keycode@2.2.1:
+    resolution: {integrity: sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==}
+    dev: false
+
+  /keycon@1.4.0:
+    resolution: {integrity: sha512-p1NAIxiRMH3jYfTeXRs2uWbVJ1WpEjpi8ktzUyBJsX7/wn2qu2VRXktneBLNtKNxJmlUYxRi9gOJt1DuthXR7A==}
+    dependencies:
+      '@cfcs/core': 0.0.6
+      '@daybrush/utils': 1.13.0
+      '@scena/event-emitter': 1.0.5
+      keycode: 2.2.1
+    dev: false
+
  /kind-of@6.0.3:
    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
    engines: {node: '>=0.10.0'}
@ -6970,6 +7098,16 @@ packages:
    resolution: {integrity: sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==}
    dev: false

+  /moveable@0.53.0:
+    resolution: {integrity: sha512-71jS9zIoQzMhnNvduhg4tUEdm23+fO/40FN7muVMbZvVwbTku2MIxxLhnU4qFvxI4oVxn75l79SbtgjuA+s7Pw==}
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@scena/event-emitter': 1.0.5
+      croact: 1.0.4
+      croact-moveable: 0.9.0(croact@1.0.4)
+      react-moveable: 0.56.0
+    dev: false
+
  /mrmime@1.0.1:
    resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==}
    engines: {node: '>=10'}
@ -7226,6 +7364,12 @@ packages:
    resolution: {integrity: sha512-PPrr40z5/MPStTTGJ0QtSD9KtaGHmnexBQWANWLWQOZZwbNMf/VyG/Uh29LwxExd51p3S323oM3kHbjRqmBiLg==}
    dev: false

+  /overlap-area@1.1.0:
+    resolution: {integrity: sha512-3dlJgJCaVeXH0/eZjYVJvQiLVVrPO4U1ZGqlATtx6QGO3b5eNM6+JgUKa7oStBTdYuGTk7gVoABCW6Tp+dhRdw==}
+    dependencies:
+      '@daybrush/utils': 1.13.0
+    dev: false
+
  /p-limit@2.3.0:
    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
    engines: {node: '>=6'}
@ -7727,10 +7871,41 @@ packages:
      safe-buffer: 5.2.1
    dev: true

+  /react-css-styled@1.1.9:
+    resolution: {integrity: sha512-M7fJZ3IWFaIHcZEkoFOnkjdiUFmwd8d+gTh2bpqMOcnxy/0Gsykw4dsL4QBiKsxcGow6tETUa4NAUcmJF+/nfw==}
+    dependencies:
+      css-styled: 1.0.8
+      framework-utils: 1.1.0
+    dev: false
+
  /react-is@18.2.0:
    resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
    dev: true

+  /react-moveable@0.56.0:
+    resolution: {integrity: sha512-FmJNmIOsOA36mdxbrc/huiE4wuXSRlmon/o+/OrfNhSiYYYL0AV5oObtPluEhb2Yr/7EfYWBHTxF5aWAvjg1SA==}
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@egjs/agent': 2.4.4
+      '@egjs/children-differ': 1.0.1
+      '@egjs/list-differ': 1.0.1
+      '@scena/dragscroll': 1.4.0
+      '@scena/event-emitter': 1.0.5
+      '@scena/matrix': 1.1.1
+      css-to-mat: 1.1.1
+      framework-utils: 1.1.0
+      gesto: 1.19.4
+      overlap-area: 1.1.0
+      react-css-styled: 1.1.9
+      react-selecto: 1.26.3
+    dev: false
+
+  /react-selecto@1.26.3:
+    resolution: {integrity: sha512-Ubik7kWSnZyQEBNro+1k38hZaI1tJarE+5aD/qsqCOA1uUBSjgKVBy3EWRzGIbdmVex7DcxznFZLec/6KZNvwQ==}
+    dependencies:
+      selecto: 1.26.3
+    dev: false
+
  /read-pkg-up@7.0.1:
    resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
    engines: {node: '>=8'}
@ -7999,6 +8174,21 @@ packages:
    resolution: {integrity: sha512-lEV5VB8BUKTo/AfktXJcy+JeXns26ylbMkIUco8CYREsQijuz4mrXres2Q+vMLdwkuLxJdIPQ8IlCIxLYm71Yw==}
    dev: false

+  /selecto@1.26.3:
+    resolution: {integrity: sha512-gZHgqMy5uyB6/2YDjv3Qqaf7bd2hTDOpPdxXlrez4R3/L0GiEWDCFaUfrflomgqdb3SxHF2IXY0Jw0EamZi7cw==}
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@egjs/children-differ': 1.0.1
+      '@scena/dragscroll': 1.4.0
+      '@scena/event-emitter': 1.0.5
+      css-styled: 1.0.8
+      css-to-mat: 1.1.1
+      framework-utils: 1.1.0
+      gesto: 1.19.4
+      keycon: 1.4.0
+      overlap-area: 1.1.0
+    dev: false
+
  /semver@5.7.2:
    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
    hasBin: true
@ -9144,6 +9334,15 @@ packages:
      vue: 3.3.4
    dev: false

+  /vue-color-wheel@0.1.1:
+    resolution: {integrity: sha512-FOZztY9puZM+cVWMd9JdOMDHQKCeOoD8qUeJOeSxw4FheOXuuaKpr9Kep2qSX2gTiLEpTgwiFaUkRQnSCVInAQ==}
+    dependencies:
+      colord: 2.9.3
+      gsap: 3.12.5
+      moveable: 0.53.0
+      vue-sonner: 1.1.4
+    dev: false
+
  /vue-demi@0.13.11(vue@3.3.4):
    resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
    engines: {node: '>=12'}
@ -9227,6 +9426,10 @@ packages:
      vue: 3.3.4
    dev: false

+  /vue-sonner@1.1.4:
+    resolution: {integrity: sha512-ATt+o38ALfPBfmaT3rfr10K+mkZ/7EdqZewEZVI3krSc1RaIDK8fI9gQro0Jlh8HZcOHv2oUDJufSIUl/qpdOA==}
+    dev: false
+
  /vue-template-compiler@2.7.14:
    resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
    dependencies:
--- a/src/tools/color-wheel/color-wheel.vue
+++ b/src/tools/color-wheel/color-wheel.vue
@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { colord, extend } from 'colord';
+import a11yPlugin from 'colord/plugins/a11y';
+
+import { computed, ref, watch } from 'vue';
+import { useDebounce } from '@vueuse/core';
+import type { Harmony, HarmonyType } from 'vue-color-wheel';
+import { VueColorWheel } from 'vue-color-wheel';
+
+extend([a11yPlugin]);
+
+const wheelColor = useDebounce(ref('#40ffff')); // { hue: 0, saturation: 0.68, value: 1 }
+const colors = ref<Array<Harmony>>([]);
+const currentType = ref<HarmonyType>('analogous');
+const isColorReadable = ref(false);
+const isDarkTheme = useDark();
+
+const harmonyTypes: { type: HarmonyType; label: string }[] = [
+  { type: 'monochromatic', label: 'Monochromatic' },
+  { type: 'complementary', label: 'Complementary' },
+  { type: 'analogous', label: 'Analogous' },
+  { type: 'triad', label: 'Triad' },
+  { type: 'split', label: 'Split' },
+  { type: 'compound', label: 'Compound' },
+  { type: 'tetradic', label: 'Tetradic' },
+  { type: 'square', label: 'Square' },
+  { type: 'doubleSplit', label: 'Double Split' },
+];
+
+const colorList = computed(() => {
+  return colors.value.map(item => colord(item.rgb).toHex());
+});
+
+function handleChangeGradient(harmonyColors: Harmony[]) {
+  const newColors = harmonyColors.map(color => colord(color.rgb).toHex());
+
+  const [base, secondary] = newColors;
+
+  const rootEl = document.documentElement;
+
+  // change the colors variables
+  harmonyColors.map((color, index) => {
+    const { r, g, b } = colord(color.rgb).toRgb();
+    rootEl.style.setProperty(`--color${index + 1}`, `${r}, ${g}, ${b}`);
+    return null;
+  });
+  const secondaryRgb = colord(secondary).toRgb();
+  rootEl.style.setProperty(
+    '--color-interactive',
+    `${secondaryRgb.r}, ${secondaryRgb.g}, ${secondaryRgb.b}`,
+  );
+  if (newColors.length === 3) {
+    const lightColor = colord(base).saturate(0.25).toRgb();
+    const darkColor = colord(base).desaturate(0.25).toRgb();
+    rootEl.style.setProperty(
+      '--color4',
+      `${lightColor.r}, ${lightColor.g}, ${lightColor.b}`,
+    );
+    rootEl.style.setProperty(
+      '--color5',
+      `${darkColor.r}, ${darkColor.g}, ${darkColor.b}`,
+    );
+  }
+
+  isColorReadable.value = colord(base).isReadable(
+    isDarkTheme.value ? '#fff' : '#000',
+    { level: 'AAA' },
+  );
+}
+
+function handleChangeColors(harmonyColors: Harmony[]) {
+  colors.value = harmonyColors;
+}
+
+watch(
+  () => colors.value,
+  (newColors) => {
+    handleChangeGradient(newColors);
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+
+<template>
+  <div style="max-width: 600px">
+    <c-card title="Pick a color" mb-2>
+      <n-color-picker :value="wheelColor" :show-alpha="false" />
+      <div
+        :style="{ backgroundColor: wheelColor }"
+      />
+    </c-card>
+
+    <c-card title="Pick a palette type" mb-2>
+      <n-radio-group v-model:value="currentType" name="radiogroup">
+        <n-space>
+          <n-radio
+            v-for="v in harmonyTypes"
+            :key="v.type"
+            :value="v.type"
+            :label="v.label"
+          />
+        </n-space>
+      </n-radio-group>
+    </c-card>
+    <c-card title="Wheel" mb-2 style="text-align: center">
+      <div style="display: inline-block">
+        <VueColorWheel
+          v-model:color="wheelColor"
+          wheel="aurora"
+          :harmony="currentType"
+          :radius="160"
+          :default-color="wheelColor"
+          :show-brightness="false"
+          @change="handleChangeColors"
+        />
+      </div>
+    </c-card>
+    <div
+      v-for="(color, i) in colorList"
+      :key="i"
+      mt-1 flex items-center justify-center gap-1
+    >
+      <div
+        p-1
+        :style="{
+          backgroundColor: `${color}`,
+          color: isColorReadable ? '#000' : '#fff',
+        }"
+      >
+        {{ color }}
+      </div>
+      <input-copyable :value="color" />
+    </div>
+  </div>
+</template>
--- a/src/tools/color-wheel/index.ts
+++ b/src/tools/color-wheel/index.ts
@ -0,0 +1,12 @@
+import { ColorPicker } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Color Wheel',
+  path: '/color-wheel',
+  description: 'Choose a color palette/theme using a wheel and mode',
+  keywords: ['color', 'wheel', 'palette', 'theme'],
+  component: () => import('./color-wheel.vue'),
+  icon: ColorPicker,
+  createdAt: new Date('2024-08-15'),
+});
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as emailNormalizer } from './email-normalizer';
+import { tool as colorWheel } from './color-wheel';

 import { tool as asciiTextDrawer } from './ascii-text-drawer';

@ -133,6 +134,7 @@ export const toolsByCategory: ToolCategory[] = [
      httpStatusCodes,
      jsonDiff,
      safelinkDecoder,
+      colorWheel,
    ],
  },
  {