From 77ccbc34b15e9e54dbf0e7b38dd9a2a521c597be Mon Sep 17 00:00:00 2001
From: Eugene Volynko <volynko.ua@gmail.com>
Date: Sun, 29 Dec 2024 05:46:24 +0200
Subject: [PATCH] v1.0.4

---
 README.md                           | 64 +++++++++------------
 package.json                        |  2 +-
 src-tauri/Cargo.lock                |  2 +-
 src-tauri/Cargo.toml                |  2 +-
 src-tauri/src/lib.rs                |  2 +-
 src-tauri/tauri.conf.json           |  7 ++-
 src/components/ColorCard/index.scss |  8 +++
 src/components/ColorCard/index.tsx  |  4 +-
 src/components/Stack/index.scss     |  4 ++
 src/components/Stack/index.tsx      |  2 +
 src/components/Stack/props.ts       |  1 +
 src/layouts/AppLayout/index.tsx     | 22 +++++++-
 src/layouts/PickerLayout/index.scss | 18 +++---
 src/layouts/PickerLayout/index.tsx  | 50 ++++++++++++++---
 src/pages/SettingsPage/index.tsx    |  8 +--
 src/types/settings.types.ts         | 19 ++++---
 src/utils/color.util.ts             | 87 +++++++++++++++++++++++++++++
 src/utils/copyVariants.util.ts      | 56 +++++++++++++++----
 18 files changed, 267 insertions(+), 91 deletions(-)

diff --git a/README.md b/README.md
index c587191..8d76dea 100644
--- a/README.md
+++ b/README.md
@@ -23,7 +23,7 @@
 
 ## Download
 
-- <a href="https://github.com/ModuleArt/plain-color/releases/download/v1.0.3/PlainColor_1.0.3_aarch64.dmg">macOS: dmg</a>
+- <a href="https://github.com/ModuleArt/plain-color/releases/download/v1.0.4/PlainColor_1.0.4_aarch64.dmg">macOS: dmg</a>
 - Windows: Coming soon...
 - Linux: Coming soon...
 
@@ -35,49 +35,14 @@
 
 ## Todo
 
-### v1.0.4
-
-- Fix: “PlainColor.app” is damaged and can’t be opened
-- macOS permissions: Better user experience
-- More quick copy options
-  - Common:
-    - ✅ #HEX/HEXA `#5C2D91`
-    - ✅ HEX/HEXA `5C2D91`
-    - ✅ RGB/RGBA `92, 45, 145`
-    - RGB/RGBA from 0 to 1 `0,36; 0,18; 0,57`
-    - CMYK % `37, 69, 0, 43`
-    - HSL/HSLA `268, 53, 37`
-    - HSB/HSV `268, 69, 57`
-  - WEB:
-    - ✅ 🌐 CSS RGB/RGBA
-    - 🌐 CSS HSL/HSLA
-    - 🌐 CSS Display P3
-  - Native:
-    - 🖥️ NSColor RGB
-    - 🖥️ NSColor HSB
-    - 📱 UIColor RGB
-    - 📱 UIColor HSB
-    - 🐦‍⬛ SwiftUI Color HSB
-    - 🐦‍⬛ Swift Color Literal
-    - 🖥️ Obj-C NSColor Calibrated RGB
-    - 📱 Obj-C UIColor RGB
-    - 🌊 .NET RGB/ARGB
-    - ☕ Java RGB/RGBA
-    - 📱 Android RGB/ARGB
-- Lense: Control zoom level with `+` and `-` keys
-- Lense: Move picker with arrows (step = 1px) (make sure it cannot be out of screen bounds)
-
-### v1.0.5
-
-- Lense: Press `C` to copy color instantly (what to copy? - need a setting for this)
-- ColorCard: Checkboard background for alpha colors
-
 ### Critical
 
+- macOS permissions: Better user experience
 - Lense cannot be dragged on top of fullscreen windows
 - Lense is lagging when picking on another screen and virtual desktop
   - Optimize picker loop: Move `setInterval` to rust, FE invokes only event loop start and end
 - PlainColor process is active after app closed (?)
+- ColorCard: Checkboard background for alpha colors
 
 ### Palette
 
@@ -85,6 +50,11 @@
 - Save color to palette
 - Manage palettes
 
+### Lense
+
+- Move picker with arrows (step = 1px) (make sure it cannot be out of screen bounds)
+- Press `C` to copy color instantly (what to copy? - need a setting for this)
+
 ### Shortcuts (?)
 
 - Tray icon
@@ -97,3 +67,21 @@
 - Prepend one color (Use different color on every new release)
 - Prepend default palette (Apple colors)
 - <a href="https://v2.tauri.app/plugin/updater/">Add updater</a>
+- More quick copy options
+  - Common:
+    - RGB/RGBA from 0 to 1 `0,36; 0,18; 0,57`
+    - HSB/HSV `268, 69, 57`
+  - WEB:
+    - 🌐 CSS Display P3
+  - Native:
+    - 🖥️ NSColor RGB
+    - 🖥️ NSColor HSB
+    - 📱 UIColor RGB
+    - 📱 UIColor HSB
+    - 🐦‍⬛ SwiftUI Color HSB
+    - 🐦‍⬛ Swift Color Literal
+    - 🖥️ Obj-C NSColor Calibrated RGB
+    - 📱 Obj-C UIColor RGB
+    - 🌊 .NET RGB/ARGB
+    - ☕ Java RGB/RGBA
+    - 📱 Android RGB/ARGB
diff --git a/package.json b/package.json
index 5f85dbd..485c61b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "plain-color",
   "private": false,
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 557d3ce..b6ca06a 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -4,7 +4,7 @@ version = 3
 
 [[package]]
 name = "PlainColor"
-version = "1.0.3"
+version = "1.0.4"
 dependencies = [
  "appkit-nsworkspace-bindings",
  "base64 0.22.1",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index c0cd807..e6f291f 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "PlainColor"
-version = "1.0.3"
+version = "1.0.4"
 description = "A Tauri App"
 authors = ["Eugene Volynko <volynko.ua@gmail.com>"]
 edition = "2021"
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index e00c2f1..6007456 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -159,7 +159,7 @@ fn fetch_preview(app: AppHandle, size: u32) {
             app.emit_to(
                 EventTarget::labeled("picker"),
                 "preview_fetched",
-                (img_base64, color),
+                (img_base64, color, size),
             )
             .unwrap();
         }
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 465b2fe..4c6596d 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "PlainColor",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "identifier": "com.moduleart.plaincolor",
   "build": {
     "beforeDevCommand": "yarn dev",
@@ -65,6 +65,9 @@
   "bundle": {
     "active": true,
     "targets": "all",
-    "icon": ["icons/32x32.png", "icons/128x128.png", "icons/128x128@2x.png", "icons/icon.icns", "icons/icon.ico"]
+    "icon": ["icons/32x32.png", "icons/128x128.png", "icons/128x128@2x.png", "icons/icon.icns", "icons/icon.ico"],
+    "macOS": {
+      "signingIdentity": "-"
+    }
   }
 }
diff --git a/src/components/ColorCard/index.scss b/src/components/ColorCard/index.scss
index c4a6e97..b71b202 100644
--- a/src/components/ColorCard/index.scss
+++ b/src/components/ColorCard/index.scss
@@ -41,4 +41,12 @@
     z-index: 1;
     margin: 0;
   }
+
+  &__copy-variants {
+    margin: -0.25rem;
+
+    & > * {
+      padding: 0.25rem;
+    }
+  }
 }
diff --git a/src/components/ColorCard/index.tsx b/src/components/ColorCard/index.tsx
index a52766a..7944585 100644
--- a/src/components/ColorCard/index.tsx
+++ b/src/components/ColorCard/index.tsx
@@ -94,11 +94,11 @@ export const ColorCard: FC<IColorCardProps> = ({
         </Stack>
       </Stack>
       <Stack>
-        <Stack grow>
+        <Stack grow wrap gap="none" className="color-card__copy-variants">
           {quickCopyVariants.map((copyVariant) => (
             <Button
               key={copyVariant.id}
-              label={copyVariant.shortLabel}
+              label={copyVariant.label}
               size="inline"
               variant="clear"
               iconPre={Copy}
diff --git a/src/components/Stack/index.scss b/src/components/Stack/index.scss
index c258e31..3ee144e 100644
--- a/src/components/Stack/index.scss
+++ b/src/components/Stack/index.scss
@@ -1,6 +1,10 @@
 .stack {
   display: flex;
 
+  &--wrap {
+    flex-wrap: wrap;
+  }
+
   &--justify-start {
     justify-content: flex-start;
   }
diff --git a/src/components/Stack/index.tsx b/src/components/Stack/index.tsx
index cfa7cb3..9315130 100644
--- a/src/components/Stack/index.tsx
+++ b/src/components/Stack/index.tsx
@@ -12,6 +12,7 @@ export const Stack: FC<PropsWithChildren<IStackProps>> = ({
   align,
   gap = 'small',
   padding = 'none',
+  wrap = false,
   containerRef,
   ...props
 }) => {
@@ -26,6 +27,7 @@ export const Stack: FC<PropsWithChildren<IStackProps>> = ({
         [`stack--padding-${padding}`],
         {
           [`stack--align-${align}`]: align,
+          'stack--wrap': wrap,
         },
         commonComponentClasses(props)
       )}
diff --git a/src/components/Stack/props.ts b/src/components/Stack/props.ts
index fc8d0d8..0995a5f 100644
--- a/src/components/Stack/props.ts
+++ b/src/components/Stack/props.ts
@@ -8,4 +8,5 @@ export interface IStackProps extends IPlainlibComponentProps<HTMLDivElement> {
   align?: 'start' | 'end' | 'center'
   gap?: 'none' | 'extra-small' | 'small' | 'medium' | 'large'
   padding?: 'none' | 'extra-small' | 'small' | 'medium' | 'large'
+  wrap?: boolean
 }
diff --git a/src/layouts/AppLayout/index.tsx b/src/layouts/AppLayout/index.tsx
index be4fd10..5407e0c 100644
--- a/src/layouts/AppLayout/index.tsx
+++ b/src/layouts/AppLayout/index.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useRef, useState } from 'react'
 import { WindowTitlebar } from '@/components/WindowTitlebar'
 import { WindowContent } from '@/components/WindowContent'
 import { Outlet } from 'react-router-dom'
@@ -20,6 +20,7 @@ export const AppLayout: FC = () => {
   const colorsStore = useColorsStore()
   const [pickingInterval, setPickingInterval] = useState<NodeJS.Timeout | null>(null)
   const platform = getPlatform()
+  const previewSize = useRef(12) // should be even
 
   useEffect(() => {
     if (pickerStore.isPicking) {
@@ -29,7 +30,8 @@ export const AppLayout: FC = () => {
             pickerWindow.show()
 
             const interval = setInterval(() => {
-              invoke('fetch_preview', { size: 12 }) // should be even
+              console.log('previewSize.current', previewSize.current)
+              invoke('fetch_preview', { size: previewSize.current })
             }, 50)
             setPickingInterval(interval)
           }
@@ -74,6 +76,22 @@ export const AppLayout: FC = () => {
       })
     )
 
+    listeners.push(
+      listen<string>('preview_zoom_out', () => {
+        if (previewSize.current < 32) {
+          previewSize.current += 2
+        }
+      })
+    )
+
+    listeners.push(
+      listen<string>('preview_zoom_in', () => {
+        if (previewSize.current > 4) {
+          previewSize.current -= 2
+        }
+      })
+    )
+
     listeners.push(
       listen<string>('color_canceled', () => {
         pickerStore.closePicker()
diff --git a/src/layouts/PickerLayout/index.scss b/src/layouts/PickerLayout/index.scss
index 3cb226b..6a68e47 100644
--- a/src/layouts/PickerLayout/index.scss
+++ b/src/layouts/PickerLayout/index.scss
@@ -1,11 +1,9 @@
 .picker-layout {
-  $pixel: calc(100% / 11);
-
   position: fixed;
   left: 0;
   top: 0;
-  width: calc(100% + $pixel);
-  height: calc(100% + $pixel);
+  width: calc(100% + var(--pixel));
+  height: calc(100% + var(--pixel));
   cursor: none;
 
   &__image {
@@ -26,17 +24,19 @@
 
   &__color-text {
     &--inverted {
-      color: var(--color_window);
+      * {
+        color: var(--color_window);
+      }
     }
   }
 
   &::after {
     content: '';
     position: fixed;
-    left: calc(50% - calc($pixel / 2));
-    top: calc(50% - calc($pixel / 2));
-    width: $pixel;
-    height: $pixel;
+    left: calc(50% - calc(var(--pixel) / 2));
+    top: calc(50% - calc(var(--pixel) / 2));
+    width: var(--pixel);
+    height: var(--pixel);
     border: var(--size_borderWidth) solid var(--color_text);
     display: block;
     pointer-events: none;
diff --git a/src/layouts/PickerLayout/index.tsx b/src/layouts/PickerLayout/index.tsx
index e056f36..8fdaefa 100644
--- a/src/layouts/PickerLayout/index.tsx
+++ b/src/layouts/PickerLayout/index.tsx
@@ -10,30 +10,50 @@ import { Image } from '@/components/Image'
 export const PickerLayout: FC = () => {
   const [image, setImage] = useState('')
   const [color, setColor] = useState('000000')
+  const [previewSize, setPreviewSize] = useState(1)
+
+  const listenHotkeys = (e: KeyboardEvent) => {
+    switch (e.key) {
+      case 'Escape':
+        cancel()
+        break
+
+      case '-':
+      case '_':
+        zoomOut()
+        break
+
+      case '=':
+      case '+':
+        zoomIn()
+        break
+    }
+  }
 
   useEffect(() => {
     const listeners: Promise<UnlistenFn>[] = []
 
     listeners.push(
-      listen<[string, [number, number, number, number]?]>('preview_fetched', (event) => {
-        if (event.payload.length) {
+      listen<[string, [number, number, number, number], number]>('preview_fetched', (event) => {
+        if (event.payload.length > 0 && event.payload[0]) {
           setImage(event.payload[0])
 
-          if (event.payload[1]) {
+          if (event.payload.length > 1 && event.payload[1]) {
             const color = rgbToHex({ red: event.payload[1][0], green: event.payload[1][1], blue: event.payload[1][2] })
             setColor(color)
+
+            if (event.payload.length > 2 && event.payload[2]) {
+              setPreviewSize(event.payload[2])
+            }
           }
         }
       })
     )
 
-    document.addEventListener('keypress', (e) => {
-      if (e.key === 'Escape') {
-        cancel()
-      }
-    })
+    document.addEventListener('keypress', listenHotkeys)
 
     return () => {
+      document.removeEventListener('keypress', listenHotkeys)
       listeners.map((unlisten) => unlisten.then((f) => f()))
     }
   }, [])
@@ -42,12 +62,24 @@ export const PickerLayout: FC = () => {
     emitTo('main', 'color_picked', color)
   }
 
+  const zoomIn = () => {
+    emitTo('main', 'preview_zoom_in')
+  }
+
+  const zoomOut = () => {
+    emitTo('main', 'preview_zoom_out')
+  }
+
   const cancel = () => {
     emitTo('main', 'color_canceled')
   }
 
   return (
-    <div className="picker-layout" onClick={pickColor}>
+    <div
+      className="picker-layout"
+      onClick={pickColor}
+      style={{ '--pixel': `calc(100% / ${previewSize - 1}` } as React.CSSProperties}
+    >
       <Image src={image} className="picker-layout__image" pointerEvents="disable" />
       <Stack
         className="picker-layout__color"
diff --git a/src/pages/SettingsPage/index.tsx b/src/pages/SettingsPage/index.tsx
index 8948ec8..cd9fa25 100644
--- a/src/pages/SettingsPage/index.tsx
+++ b/src/pages/SettingsPage/index.tsx
@@ -57,16 +57,14 @@ export const SettingsPage: FC = () => {
           <Select
             options={copyVariants.map((copyVariant) => ({
               ...copyVariant,
-              description: `Examples: ${formatCopyText(exampleColor, copyVariant.id)} or ${formatCopyText(
-                exampleColorTransparent,
-                copyVariant.id
-              )}`,
+              description: `${formatCopyText(exampleColor, copyVariant.id)}${
+                copyVariant.supportsAlpha ? ` or ${formatCopyText(exampleColorTransparent, copyVariant.id)}` : ''
+              }`,
             }))}
             value={settingsStore.quickCopyVariants}
             onChange={settingsStore.setQuickCopyVariants}
             multiple
           />
-          <Text size="small" tinted text="You can select up to 3 options" />
         </Stack>
         {platform === 'macos' && (
           <Stack dir="vertical" align="start">
diff --git a/src/types/settings.types.ts b/src/types/settings.types.ts
index d365779..383dae5 100644
--- a/src/types/settings.types.ts
+++ b/src/types/settings.types.ts
@@ -1,13 +1,16 @@
 export enum ECopyVariant {
-  // common
+  // hex
   HEX_WITH_SHARP = 'HEX_WITH_SHARP',
   HEX_WITHOUT_SHARP = 'HEX_WITHOUT_SHARP',
-  RGB_COMMA_SEPARATED = 'RGB_COMMA_SEPARATED',
-  // CMYK_PERCENTS = 'CMYK_PERCENTS',
-  // HSL = 'HSL',
-  // HSB = 'HSB',
-  // web
+  HEX_LOWERCASE_WITH_SHARP = 'HEX_LOWERCASE_WITH_SHARP',
+  HEX_LOWERCASE_WITHOUT_SHARP = 'HEX_LOWERCASE_WITHOUT_SHARP',
+  // rgb
   CSS_RGB = 'CSS_RGB',
-  // CSS_HSL = 'CSS_HSL',
-  // CSS_DISPLAY_P3 = 'CSS_DISPLAY_P3',
+  RGB_COMMA_SEPARATED = 'RGB_COMMA_SEPARATED',
+  // hsl
+  CSS_HSL = 'CSS_HSL',
+  HSL_COMMA_SEPARATED = 'HSL_COMMA_SEPARATED',
+  // cmyk
+  CMYK_FUNCTION = 'CMYK_FUNCTION',
+  CMYK_COMMA_SEPARATED = 'CMYK_COMMA_SEPARATED',
 }
diff --git a/src/utils/color.util.ts b/src/utils/color.util.ts
index cbe2f3c..f191c75 100644
--- a/src/utils/color.util.ts
+++ b/src/utils/color.util.ts
@@ -27,6 +27,93 @@ export const hexToRgbStr = (hex: string, wrapWithCssFunc?: boolean) => {
     : `${main},${alpha === '0.00' ? '0' : alpha}`
 }
 
+export const hexToCmykStr = (hex: string, wrapWithCssFunc?: boolean) => {
+  let C = 0,
+    M = 0,
+    Y = 0,
+    K = 0
+
+  const r = parseInt(hex.substring(0, 2), 16)
+  const g = parseInt(hex.substring(2, 4), 16)
+  const b = parseInt(hex.substring(4, 6), 16)
+
+  if (r === 0 && g === 0 && b === 0) {
+    K = 1
+  } else {
+    C = 1 - r / 255
+    M = 1 - g / 255
+    Y = 1 - b / 255
+
+    const minCMY = Math.min(C, M, Y)
+    C = (C - minCMY) / (1 - minCMY)
+    M = (M - minCMY) / (1 - minCMY)
+    Y = (Y - minCMY) / (1 - minCMY)
+    K = minCMY
+  }
+  C = C * 100
+  M = M * 100
+  Y = Y * 100
+  K = K * 100
+
+  const resC = C === 0 ? '0' : Math.round(C)
+  const resM = M === 0 ? '0' : Math.round(M)
+  const resY = Y === 0 ? '0' : Math.round(Y)
+  const resK = K === 0 ? 0 : Math.round(K)
+
+  if (wrapWithCssFunc) {
+    return `cmyk(${resC}%,${resM}%,${resY}%,${resK}%)`
+  }
+
+  return `${resC},${resM},${resY},${resK}`
+}
+
+export const rgbToHslStr = (r: number, g: number, b: number, a: number, wrapWithCssFunc?: boolean) => {
+  ;(r /= 255), (g /= 255), (b /= 255)
+  let max = Math.max(r, g, b),
+    min = Math.min(r, g, b)
+  let h = 0,
+    s,
+    l = (max + min) / 2
+
+  if (max == min) {
+    h = s = 0 // achromatic
+  } else {
+    let d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0)
+        break
+      case g:
+        h = (b - r) / d + 2
+        break
+      case b:
+        h = (r - g) / d + 4
+        break
+    }
+    h /= 6
+  }
+
+  s = s * 100
+  s = Math.round(s)
+  l = l * 100
+  l = Math.round(l)
+  h = Math.round(360 * h)
+
+  if (a !== 1) {
+    const alpha = a.toFixed(2)
+    if (wrapWithCssFunc) {
+      return `hsla(${h},${s}%,${l}%,${alpha === '0.00' ? '0' : alpha})`
+    }
+    return `${h},${s},${l},${alpha === '0.00' ? '0' : alpha}`
+  }
+
+  if (wrapWithCssFunc) {
+    return `hsl(${h},${s}%,${l}%)`
+  }
+  return `${h},${s},${l}`
+}
+
 export const rgbToHex = (rgb: TColorRgb) => {
   let hexa = ''
   if (typeof rgb === 'string') {
diff --git a/src/utils/copyVariants.util.ts b/src/utils/copyVariants.util.ts
index c7c33a4..754c0e3 100644
--- a/src/utils/copyVariants.util.ts
+++ b/src/utils/copyVariants.util.ts
@@ -1,24 +1,56 @@
 import { ECopyVariant } from '@/types/settings.types'
-import { hexToRgbStr } from './color.util'
+import { hexToCmykStr, hexToRgbObj, hexToRgbStr, rgbToHslStr } from './color.util'
 
 export const copyVariants = [
-  { id: ECopyVariant.HEX_WITH_SHARP, label: 'HEX/HEXA with hash', shortLabel: 'HEX' },
-  { id: ECopyVariant.HEX_WITHOUT_SHARP, label: 'HEX/HEXA', shortLabel: 'HEX' },
-  { id: ECopyVariant.RGB_COMMA_SEPARATED, label: 'RGB/RGBA comma separated', shortLabel: 'RGB' },
-  { id: ECopyVariant.CSS_RGB, label: 'CSS RGB/RGBA', shortLabel: 'RGB' },
+  // hex
+  { id: ECopyVariant.HEX_WITH_SHARP, label: '#HEX', supportsAlpha: true },
+  { id: ECopyVariant.HEX_WITHOUT_SHARP, label: 'HEX', supportsAlpha: true },
+  { id: ECopyVariant.HEX_LOWERCASE_WITH_SHARP, label: '#hex', supportsAlpha: true },
+  { id: ECopyVariant.HEX_LOWERCASE_WITHOUT_SHARP, label: 'hex', supportsAlpha: true },
+  // rgb
+  { id: ECopyVariant.CSS_RGB, label: 'rgb()', supportsAlpha: true },
+  { id: ECopyVariant.RGB_COMMA_SEPARATED, label: 'R,G,B', supportsAlpha: true },
+  // hsl
+  { id: ECopyVariant.CSS_HSL, label: 'hsl()', supportsAlpha: true },
+  { id: ECopyVariant.HSL_COMMA_SEPARATED, label: 'H,S,L', supportsAlpha: true },
+  // cmyk
+  { id: ECopyVariant.CMYK_FUNCTION, label: 'cmyk()', supportsAlpha: false },
+  { id: ECopyVariant.CMYK_COMMA_SEPARATED, label: 'C,M,Y,K', supportsAlpha: false },
 ]
 
 export const formatCopyText = (colorHex: string, copyVariant: ECopyVariant) => {
   switch (copyVariant) {
-    case ECopyVariant.HEX_WITH_SHARP:
+    case ECopyVariant.HEX_WITH_SHARP: {
       return `#${colorHex.toUpperCase()}`
-    case ECopyVariant.HEX_WITHOUT_SHARP:
+    }
+    case ECopyVariant.HEX_WITHOUT_SHARP: {
       return colorHex.toUpperCase()
-    case ECopyVariant.RGB_COMMA_SEPARATED:
-      return hexToRgbStr(colorHex)
-    case ECopyVariant.CSS_RGB:
+    }
+    case ECopyVariant.HEX_LOWERCASE_WITH_SHARP: {
+      return `#${colorHex.toLowerCase()}`
+    }
+    case ECopyVariant.HEX_LOWERCASE_WITHOUT_SHARP: {
+      return colorHex.toLowerCase()
+    }
+    case ECopyVariant.CSS_RGB: {
       return hexToRgbStr(colorHex, true)
+    }
+    case ECopyVariant.RGB_COMMA_SEPARATED: {
+      return hexToRgbStr(colorHex)
+    }
+    case ECopyVariant.CMYK_FUNCTION: {
+      return hexToCmykStr(colorHex, true)
+    }
+    case ECopyVariant.CMYK_COMMA_SEPARATED: {
+      return hexToCmykStr(colorHex)
+    }
+    case ECopyVariant.CSS_HSL: {
+      const rgb = hexToRgbObj(colorHex)
+      return rgbToHslStr(rgb.red, rgb.green, rgb.blue, rgb.alpha, true)
+    }
+    case ECopyVariant.HSL_COMMA_SEPARATED: {
+      const rgb = hexToRgbObj(colorHex)
+      return rgbToHslStr(rgb.red, rgb.green, rgb.blue, rgb.alpha)
+    }
   }
-
-  return ''
 }