+
{
{platform === 'macos' && (
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 ''
}