From b6845d9f6fae379dbda74a38a426256ce7f30cec Mon Sep 17 00:00:00 2001
From: Eugene Volynko <volynko.ua@gmail.com>
Date: Thu, 23 Jan 2025 19:40:55 +0200
Subject: [PATCH 1/4] Increment app version to 1.0.12

---
 README.md                 | 2 +-
 package.json              | 2 +-
 src-tauri/Cargo.lock      | 2 +-
 src-tauri/Cargo.toml      | 2 +-
 src-tauri/tauri.conf.json | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 3f7b3c9..397187e 100644
--- a/README.md
+++ b/README.md
@@ -23,7 +23,7 @@
 
 ## ⬇️ Download
 
-- macOS: <a href="https://github.com/ModuleArt/plain-color/releases/download/v1.0.11/PlainColor_1.0.11_aarch64.dmg">dmg</a>
+- macOS: <a href="https://github.com/ModuleArt/plain-color/releases/download/v1.0.12/PlainColor_1.0.12_aarch64.dmg">dmg</a>
 - Windows: exe | microsoft store - Coming soon...
 - Linux: deb | flathub - Coming soon...
 
diff --git a/package.json b/package.json
index f39fb89..17850e9 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "plain-color",
   "description": "Lightweight, versatile, cross-platform color picker app",
   "private": false,
-  "version": "1.0.11",
+  "version": "1.0.12",
   "license": "GPL-3.0-only",
   "type": "module",
   "scripts": {
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 52225d7..c8ac110 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -4,7 +4,7 @@ version = 3
 
 [[package]]
 name = "PlainColor"
-version = "1.0.11"
+version = "1.0.12"
 dependencies = [
  "base64 0.22.1",
  "cocoa",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 990ccbd..74faf39 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "PlainColor"
-version = "1.0.11"
+version = "1.0.12"
 description = "Lightweight, versatile, cross-platform color picker app"
 authors = ["Eugene Volynko <volynko.ua@gmail.com>"]
 edition = "2021"
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 8b30033..31bd1b0 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.11",
+  "version": "1.0.12",
   "identifier": "com.moduleart.plaincolor",
   "build": {
     "beforeDevCommand": "yarn dev",

From 26f96070c57cd39d95fadb03a699089254c0c684 Mon Sep 17 00:00:00 2001
From: Eugene Volynko <volynko.ua@gmail.com>
Date: Thu, 23 Jan 2025 23:43:31 +0200
Subject: [PATCH 2/4] Updater: Add progress bar & Fix progress indicator text
 (always set to 0%)

---
 README.md                                |  4 ---
 package.json                             |  1 -
 src/components/PaletteCard/index.scss    |  6 ++++
 src/components/PaletteCard/index.tsx     |  5 ++-
 src/components/ProgressBar/index.scss    | 13 ++++++++
 src/components/ProgressBar/index.tsx     | 11 +++++++
 src/components/ProgressBar/props.ts      |  4 +++
 src/components/Updater/index.tsx         | 39 +++++++++++++++++++++---
 src/components/VirtualScroller/index.tsx |  3 +-
 9 files changed, 73 insertions(+), 13 deletions(-)
 create mode 100644 src/components/ProgressBar/index.scss
 create mode 100644 src/components/ProgressBar/index.tsx
 create mode 100644 src/components/ProgressBar/props.ts

diff --git a/README.md b/README.md
index 397187e..a092fed 100644
--- a/README.md
+++ b/README.md
@@ -95,7 +95,3 @@ If you want to report a bug, first, thank you, that helps us a lot. Please open
 - Instant copy shortcut `CommandOrControl+Alt+C`
 - Instant pick shortcut `CommandOrControl+Shift+C`
 - <a href="https://github.com/tauri-apps/tauri-action">Build app releases with GitHub action</a>
-- New color formats:
-  - Oklab `oklch(40.1% 0.123 21.57)`
-  - HSB/HSV `268, 69, 57`
-- Control Select component with arrows keys (up/down)
diff --git a/package.json b/package.json
index 17850e9..af98ba7 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,6 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview",
     "t:dev": "tauri dev",
     "t:build:debug": "tauri build --debug",
     "t:build:release": "tauri build && node src-tauri/updater/generate-artifacts.js"
diff --git a/src/components/PaletteCard/index.scss b/src/components/PaletteCard/index.scss
index 61db1a1..5ee9bc2 100644
--- a/src/components/PaletteCard/index.scss
+++ b/src/components/PaletteCard/index.scss
@@ -8,6 +8,12 @@
     height: 1.75rem;
   }
 
+  &__empty {
+    background-image: var(--bgImg_checkerboard);
+    background-color: var(--color_element);
+    height: 100%;
+  }
+
   &__color {
     height: 100%;
     flex: 1;
diff --git a/src/components/PaletteCard/index.tsx b/src/components/PaletteCard/index.tsx
index 25df17a..9606e9d 100644
--- a/src/components/PaletteCard/index.tsx
+++ b/src/components/PaletteCard/index.tsx
@@ -119,10 +119,9 @@ export const PaletteCard: FC<IPaletteCardProps> = ({ palette, onDelete, onDuplic
       </Stack>
       <Stack gap="none" className="palette-card__colors">
         {uniqueColors.length === 0 && (
-          <button className="palette-card__color" onClick={openPalette}>
-            <div className="palette-card__color-bg" />
+          <Stack className="palette-card__empty" align="center" padding="medium" grow>
             <Text text="Empty" tinted size="small" />
-          </button>
+          </Stack>
         )}
         {uniqueColors.map((color, index) => (
           <button
diff --git a/src/components/ProgressBar/index.scss b/src/components/ProgressBar/index.scss
new file mode 100644
index 0000000..48165af
--- /dev/null
+++ b/src/components/ProgressBar/index.scss
@@ -0,0 +1,13 @@
+.progress-bar {
+  height: 0.25rem;
+  overflow: hidden;
+  position: relative;
+
+  &__value {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: var(--color_primary);
+  }
+}
diff --git a/src/components/ProgressBar/index.tsx b/src/components/ProgressBar/index.tsx
new file mode 100644
index 0000000..147f4b5
--- /dev/null
+++ b/src/components/ProgressBar/index.tsx
@@ -0,0 +1,11 @@
+import { FC } from 'react'
+import { IProgressBarProps } from './props'
+import './index.scss'
+
+export const ProgressBar: FC<IProgressBarProps> = ({ value, maxValue = 1 }) => {
+  return (
+    <div className="progress-bar">
+      <div className="progress-bar__value" style={{ width: `${(value / maxValue) * 100}%` }} />
+    </div>
+  )
+}
diff --git a/src/components/ProgressBar/props.ts b/src/components/ProgressBar/props.ts
new file mode 100644
index 0000000..3618aab
--- /dev/null
+++ b/src/components/ProgressBar/props.ts
@@ -0,0 +1,4 @@
+export interface IProgressBarProps {
+  value: number
+  maxValue?: number
+}
diff --git a/src/components/Updater/index.tsx b/src/components/Updater/index.tsx
index c2b794f..cc87de1 100644
--- a/src/components/Updater/index.tsx
+++ b/src/components/Updater/index.tsx
@@ -4,8 +4,12 @@ import { relaunch } from '@tauri-apps/plugin-process'
 import { Text } from '@/components/Text'
 import { Stack } from '@/components/Stack'
 import { Button } from '@/components/Button'
+import { app } from '@tauri-apps/api'
+import { ProgressBar } from '@/components/ProgressBar'
 
 export const Updater: FC = () => {
+  const [version, setVersion] = useState('0')
+  const [isCheckingForUpdates, setIsCheckingForUpdates] = useState(true)
   const [updateAvailable, setUpdateAvailable] = useState<Update | null>(null)
   const [isDownloading, setIsDownloading] = useState(false)
   const [contentLength, setContentLength] = useState(0)
@@ -13,10 +17,15 @@ export const Updater: FC = () => {
   const [isFinished, setIsFinished] = useState(false)
 
   useEffect(() => {
+    setIsCheckingForUpdates(true)
+
+    app.getVersion().then((v) => setVersion(v))
+
     check().then((update) => {
       if (update) {
         setUpdateAvailable(update)
       }
+      setIsCheckingForUpdates(false)
     })
   }, [])
 
@@ -25,12 +34,13 @@ export const Updater: FC = () => {
 
     updateAvailable
       ?.downloadAndInstall((event) => {
+        console.log(event)
         switch (event.event) {
           case 'Started':
             setContentLength(event.data.contentLength || 0)
             break
           case 'Progress':
-            setDownloadedLength(downloadedLength + event.data.chunkLength)
+            setDownloadedLength((downloadedLength) => downloadedLength + event.data.chunkLength)
             break
           case 'Finished':
             setIsFinished(true)
@@ -42,7 +52,26 @@ export const Updater: FC = () => {
       })
   }
 
-  if (!updateAvailable) return null
+  if (isCheckingForUpdates) {
+    return (
+      <Stack dir="vertical" gap="extra-small">
+        <Stack dir="vertical">
+          <Text text="Checking for updates..." size="small" tinted />
+        </Stack>
+      </Stack>
+    )
+  }
+
+  if (!updateAvailable) {
+    return (
+      <Stack dir="vertical" gap="extra-small">
+        <Stack dir="vertical">
+          <Text text="You're up-to-date!" />
+          <Text text={`PlainColor v${version} is currently the newest version available`} size="small" tinted />
+        </Stack>
+      </Stack>
+    )
+  }
 
   return (
     <Stack dir="vertical" gap="extra-small">
@@ -54,14 +83,16 @@ export const Updater: FC = () => {
               ? 'Finished. Relaunching...'
               : isDownloading
               ? contentLength > 0
-                ? `Downloading: ${(downloadedLength / contentLength).toFixed(0)}%`
+                ? `Downloading... ${((downloadedLength / contentLength) * 100).toFixed(0)}%`
                 : 'Downloading...'
-              : `v${updateAvailable.version}`
+              : `The new version of PlainColor v${updateAvailable.version} is available`
           }
           size="small"
           tinted
         />
+        {isDownloading && <ProgressBar value={downloadedLength} maxValue={contentLength} />}
       </Stack>
+
       {!isDownloading && (
         <Stack>
           <Button label="Download and Install" padding="medium" onClick={downloadAndInstall} />
diff --git a/src/components/VirtualScroller/index.tsx b/src/components/VirtualScroller/index.tsx
index 7541ae4..213f856 100644
--- a/src/components/VirtualScroller/index.tsx
+++ b/src/components/VirtualScroller/index.tsx
@@ -60,8 +60,9 @@ export const VirtualScroller = <T extends any>({
         <div ref={virtualScroll.innerRef as any} className="virtual-scroller__inner">
           {virtualScroll.items.map((item) => (
             <div className="virtual-scroller__row">
-              {rows[item.index]?.map((cell) => (
+              {rows[item.index]?.map((cell, cellIndex) => (
                 <div
+                  key={cellIndex}
                   className="virtual-scroller__cell"
                   style={{ width: `calc((100% + 0.5rem) / ${columnCount} - 0.5rem)` }}
                 >

From 758012ad060f625b21c9146c2dbf7d15034c229d Mon Sep 17 00:00:00 2001
From: Eugene Volynko <volynko.ua@gmail.com>
Date: Fri, 24 Jan 2025 05:17:59 +0200
Subject: [PATCH 3/4] Add oklch() color format

---
 src/types/settings.types.ts         |  3 ++
 src/utils/color/cmyk.color.util.ts  |  2 +-
 src/utils/color/oklch.color.util.ts | 78 +++++++++++++++++++++++++++++
 src/utils/copyVariants.util.ts      |  9 ++++
 4 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/color/oklch.color.util.ts

diff --git a/src/types/settings.types.ts b/src/types/settings.types.ts
index b080d62..3c4dc98 100644
--- a/src/types/settings.types.ts
+++ b/src/types/settings.types.ts
@@ -17,4 +17,7 @@ export enum ECopyVariant {
   // cmyk
   CMYK_FUNCTION = 'CMYK_FUNCTION',
   CMYK_COMMA_SEPARATED = 'CMYK_COMMA_SEPARATED',
+
+  // oklch
+  CSS_OKLCH = 'CSS_OKLCH',
 }
diff --git a/src/utils/color/cmyk.color.util.ts b/src/utils/color/cmyk.color.util.ts
index d7aa5d3..0d34462 100644
--- a/src/utils/color/cmyk.color.util.ts
+++ b/src/utils/color/cmyk.color.util.ts
@@ -5,7 +5,7 @@ export interface TColorCmyk {
   key: number
 }
 
-export const hexToCmykObj = (hexColor: string) => {
+export const hexToCmykObj = (hexColor: string): TColorCmyk => {
   let C = 0,
     M = 0,
     Y = 0,
diff --git a/src/utils/color/oklch.color.util.ts b/src/utils/color/oklch.color.util.ts
new file mode 100644
index 0000000..4b33e13
--- /dev/null
+++ b/src/utils/color/oklch.color.util.ts
@@ -0,0 +1,78 @@
+import { hexToRgbObj } from './rgb.color.util'
+
+export interface TColorOklch {
+  lightness: number // 0–1
+  chroma: number
+  hue: number // in degrees, 0–360
+  alpha: number // 0–1
+}
+
+const multiplyMatrices = (A: number[], B: number[]) => {
+  return [
+    A[0] * B[0] + A[1] * B[1] + A[2] * B[2],
+    A[3] * B[0] + A[4] * B[1] + A[5] * B[2],
+    A[6] * B[0] + A[7] * B[1] + A[8] * B[2],
+  ]
+}
+
+const oklab2oklch = ([l, a, b]: number[]) => [
+  l,
+  Math.sqrt(a ** 2 + b ** 2),
+  Math.abs(a) < 0.0002 && Math.abs(b) < 0.0002 ? NaN : ((((Math.atan2(b, a) * 180) / Math.PI) % 360) + 360) % 360,
+]
+
+const rgb2srgbLinear = (rgb: number[]) =>
+  rgb.map((c) => (Math.abs(c) <= 0.04045 ? c / 12.92 : (c < 0 ? -1 : 1) * ((Math.abs(c) + 0.055) / 1.055) ** 2.4))
+
+const xyz2oklab = (xyz: number[]) => {
+  const LMS = multiplyMatrices(
+    [
+      0.819022437996703, 0.3619062600528904, -0.1288737815209879, 0.0329836539323885, 0.9292868615863434,
+      0.0361446663506424, 0.0481771893596242, 0.2642395317527308, 0.6335478284694309,
+    ],
+    xyz
+  )
+  const LMSg = LMS.map((val) => Math.cbrt(val))
+  return multiplyMatrices(
+    [
+      0.210454268309314, 0.7936177747023054, -0.0040720430116193, 1.9779985324311684, -2.4285922420485799,
+      0.450593709617411, 0.0259040424655478, 0.7827717124575296, -0.8086757549230774,
+    ],
+    LMSg
+  )
+}
+
+const rgbLinear2xyz = (rgb: number[]) => {
+  return multiplyMatrices(
+    [
+      0.41239079926595934, 0.357584339383878, 0.1804807884018343, 0.21263900587151027, 0.715168678767756,
+      0.07219231536073371, 0.01933081871559182, 0.11919477979462598, 0.9505321522496607,
+    ],
+    rgb
+  )
+}
+
+export const hexToOklchObj = (hexColor: string): TColorOklch => {
+  const rgb = hexToRgbObj(hexColor)
+
+  const r = rgb.red / 255
+  const g = rgb.green / 255
+  const b = rgb.blue / 255
+
+  const rgbArr = [r, g, b]
+
+  const oklch = oklab2oklch(xyz2oklab(rgbLinear2xyz(rgb2srgbLinear(rgbArr))))
+
+  return { lightness: oklch[0], chroma: oklch[1], hue: oklch[2], alpha: rgb.alpha }
+}
+
+export const hexToOklchStr = (hexColor: string): string => {
+  const oklch = hexToOklchObj(hexColor)
+
+  const lightness = (oklch.lightness * 100).toFixed(2) // Convert to percentage
+  const chroma = oklch.chroma.toFixed(4)
+  const hue = oklch.hue.toFixed(2)
+  const alpha = oklch.alpha === 1 ? '' : ` / ${(oklch.alpha * 100).toFixed(2)}%`
+
+  return `oklch(${lightness}% ${chroma} ${hue}${alpha})`
+}
diff --git a/src/utils/copyVariants.util.ts b/src/utils/copyVariants.util.ts
index 1cece36..88477f3 100644
--- a/src/utils/copyVariants.util.ts
+++ b/src/utils/copyVariants.util.ts
@@ -2,6 +2,7 @@ import { ECopyVariant } from '@/types/settings.types'
 import { hexToRgbStr } from './color/rgb.color.util'
 import { hexToCmykStr } from './color/cmyk.color.util'
 import { hexToHslStr } from './color/hsl.color.util'
+import { hexToOklchStr } from './color/oklch.color.util'
 
 export const copyVariants = [
   // hex
@@ -22,6 +23,9 @@ export const copyVariants = [
   // cmyk
   { id: ECopyVariant.CMYK_FUNCTION, label: 'cmyk()', supportsAlpha: false },
   { id: ECopyVariant.CMYK_COMMA_SEPARATED, label: 'C,M,Y,K', supportsAlpha: false },
+
+  // oklch
+  { id: ECopyVariant.CSS_OKLCH, label: 'oklch()', supportsAlpha: true },
 ]
 
 export const formatCopyText = (colorHex: string, copyVariant: ECopyVariant) => {
@@ -66,5 +70,10 @@ export const formatCopyText = (colorHex: string, copyVariant: ECopyVariant) => {
     case ECopyVariant.CMYK_COMMA_SEPARATED: {
       return hexToCmykStr(colorHex)
     }
+
+    // oklch
+    case ECopyVariant.CSS_OKLCH: {
+      return hexToOklchStr(colorHex)
+    }
   }
 }

From daf2b4cbfd772a85a48ef583843fc8ace70babe0 Mon Sep 17 00:00:00 2001
From: Eugene Volynko <volynko.ua@gmail.com>
Date: Fri, 24 Jan 2025 06:41:10 +0200
Subject: [PATCH 4/4] Optimize color card layout

---
 README.md                           |  3 +++
 src/components/ColorCard/index.scss | 26 +++++++++++++++---
 src/components/ColorCard/index.tsx  | 41 +++++++++++++++++------------
 src/components/ColorCard/props.ts   |  2 ++
 src/components/Updater/index.tsx    |  1 -
 src/pages/ColorPage/index.tsx       |  2 +-
 6 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index a092fed..fc46ee5 100644
--- a/README.md
+++ b/README.md
@@ -39,6 +39,7 @@
   - `rgb()` `R,G,B` `color(display-p3)`
   - `hsl()` `H,S,L`
   - `cmyk()` `C,M,Y,K`
+  - `oklch()`
 - 🍎 <b>Great macOS support</b>
   - Works on top of menu bar and fullscreen windows
 
@@ -63,6 +64,7 @@ If you want to report a bug, first, thank you, that helps us a lot. Please open
 - Add ability to reorder palettes
 - More color formats:
   - Common:
+    - HSB/HSV `268, 69, 57`
     - RGB/RGBA from 0 to 1 `0,36; 0,18; 0,57`
     - LAB
     - RAL
@@ -95,3 +97,4 @@ If you want to report a bug, first, thank you, that helps us a lot. Please open
 - Instant copy shortcut `CommandOrControl+Alt+C`
 - Instant pick shortcut `CommandOrControl+Shift+C`
 - <a href="https://github.com/tauri-apps/tauri-action">Build app releases with GitHub action</a>
+- Better export preview (see ColorSlurp export)
diff --git a/src/components/ColorCard/index.scss b/src/components/ColorCard/index.scss
index f79c3e7..c0d12f2 100644
--- a/src/components/ColorCard/index.scss
+++ b/src/components/ColorCard/index.scss
@@ -15,6 +15,15 @@
     height: var(--size_basicHeight);
   }
 
+  &__bg {
+    padding-right: 0;
+    width: 100%;
+  }
+
+  &__header {
+    padding-right: 0.75rem;
+  }
+
   &__copied-overlay {
     animation-name: keyframes_messageOverlay;
     animation-duration: 1000ms;
@@ -31,10 +40,21 @@
   }
 
   &__copy-variants {
-    margin: -0.25rem;
+    overflow-x: auto;
+    width: fit-content;
+    max-width: calc(100% - 90px);
+    -ms-overflow-style: none; /* Internet Explorer 10+ */
+    scrollbar-width: none; /* Firefox */
+    overscroll-behavior-y: auto;
+    padding-right: 0.75rem;
+
+    &::-webkit-scrollbar {
+      display: none; /* Safari and Chrome */
+    }
 
-    & > * {
-      padding: 0.25rem;
+    &::before {
+      content: '';
+      flex: 1;
     }
   }
 }
diff --git a/src/components/ColorCard/index.tsx b/src/components/ColorCard/index.tsx
index dc72e60..1ed47a3 100644
--- a/src/components/ColorCard/index.tsx
+++ b/src/components/ColorCard/index.tsx
@@ -26,6 +26,8 @@ export const ColorCard: FC<IColorCardProps> = ({
   onColorChange,
   variant = 'list',
   colorCardRef,
+  showQuickCopyVariants = true,
+  showHex = true,
   ...props
 }) => {
   const [copied, setCopied] = useState('')
@@ -145,7 +147,7 @@ export const ColorCard: FC<IColorCardProps> = ({
         )}
         {variant === 'list' && (
           <>
-            <Stack>
+            <Stack className="color-card__header">
               <Text
                 text={color.label}
                 grow
@@ -162,23 +164,28 @@ export const ColorCard: FC<IColorCardProps> = ({
                 onClick={(event) => showOptions({ event })}
               />
             </Stack>
-            <Stack>
-              <Stack grow wrap gap="none" className="color-card__copy-variants">
-                {quickCopyVariants.map((copyVariant) => (
-                  <Button
-                    key={copyVariant.id}
-                    label={copyVariant.label}
-                    size="inline"
-                    variant="clear"
-                    iconPre={Copy}
-                    tinted
-                    onClick={() => copy(copyVariant.id)}
-                    nativeTooltip={copyVariant.label}
-                  />
-                ))}
+
+            {(showHex || showQuickCopyVariants) && (
+              <Stack justify="between" className="color-card__footer">
+                {showHex && <Text text={color.hex} tinted transform="uppercase" pointerEvents="disable" />}
+                {showQuickCopyVariants && (
+                  <Stack grow className="color-card__copy-variants">
+                    {quickCopyVariants.map((copyVariant) => (
+                      <Button
+                        key={copyVariant.id}
+                        label={copyVariant.label}
+                        size="inline"
+                        variant="clear"
+                        iconPre={Copy}
+                        tinted
+                        onClick={() => copy(copyVariant.id)}
+                        justify="end"
+                      />
+                    ))}
+                  </Stack>
+                )}
               </Stack>
-              <Text text={color.hex} tinted transform="uppercase" pointerEvents="disable" />
-            </Stack>
+            )}
           </>
         )}
       </Stack>
diff --git a/src/components/ColorCard/props.ts b/src/components/ColorCard/props.ts
index 3f8f2b1..bedaca1 100644
--- a/src/components/ColorCard/props.ts
+++ b/src/components/ColorCard/props.ts
@@ -9,4 +9,6 @@ export interface IColorCardProps extends IPlainlibComponentProps {
   onColorChange?: (color: IColor) => void
   variant?: 'list' | 'grid'
   colorCardRef?: TPlainlibRef<HTMLDivElement>
+  showQuickCopyVariants?: boolean
+  showHex?: boolean
 }
diff --git a/src/components/Updater/index.tsx b/src/components/Updater/index.tsx
index cc87de1..2f1b1c0 100644
--- a/src/components/Updater/index.tsx
+++ b/src/components/Updater/index.tsx
@@ -34,7 +34,6 @@ export const Updater: FC = () => {
 
     updateAvailable
       ?.downloadAndInstall((event) => {
-        console.log(event)
         switch (event.event) {
           case 'Started':
             setContentLength(event.data.contentLength || 0)
diff --git a/src/pages/ColorPage/index.tsx b/src/pages/ColorPage/index.tsx
index 94bed0c..9893122 100644
--- a/src/pages/ColorPage/index.tsx
+++ b/src/pages/ColorPage/index.tsx
@@ -81,7 +81,7 @@ export const ColorPage: FC = () => {
     <Stack dir="vertical" gap="none" grow>
       <Scroller grow>
         <Stack dir="vertical" gap="medium" grow padding="medium">
-          <ColorCard color={color} onColorChange={onColorChange} />
+          <ColorCard color={color} onColorChange={onColorChange} showQuickCopyVariants={false} showHex={false} />
           <ColorPicker hexValue={color.hex} onChange={(hex) => setColor({ ...color, hex })} grow />
           <ColorInput colorHex={color.hex} onChange={(hex) => setColor({ ...color, hex })} />
           <Stack>