diff --git a/packages/dye/components/Canvas/ColorCanvas.vue b/packages/dye/components/Canvas/ColorCanvas.vue
index b1e1197..cb998a1 100644
--- a/packages/dye/components/Canvas/ColorCanvas.vue
+++ b/packages/dye/components/Canvas/ColorCanvas.vue
@@ -18,8 +18,8 @@ const emit = defineEmits<{
 }>()
 
 const props = defineProps<{
-  getRef: () => Ref<HTMLCanvasElement | null>
-  setRef: (el: any) => void
+  colorCanvas: () => Ref<HTMLCanvasElement | null>
+  setColorCanvas: (el: any) => void
   color: {
     value: string
     name: string
@@ -39,14 +39,14 @@ function colorChange(e: MouseEvent, click = false) {
   if (click) mousedown.value = true
   if (offCanvas(e, click)) return
   if (isActiveCanvas(e.target)) return
-  const hex = canvasPixelColor(e, props.getRef().value)
+  const hex = canvasPixelColor(e, props.colorCanvas().value)
   updateCanvas(hex)
   mouseOn.value = true
 }
 
 //when outside canvas
 const { mouseOn } = outsideCanvas({
-  canvas: props.getRef(),
+  canvas: props.colorCanvas(),
   updateCanvas
 })
 
@@ -56,11 +56,11 @@ function getHue(color: string = props.color.value) {
 }
 
 const { width, height } = responsiveCanvas({
-  canvas: props.getRef(),
+  canvas: props.colorCanvas(),
   updateCanvas: () => {
     const hue = getHue()
     const data = { hue, saturation: 100, lightness: 100 }
-    fillColorCanvas(data, props.getRef().value)
+    fillColorCanvas(data, props.colorCanvas().value)
   }
 })
 
@@ -83,7 +83,7 @@ watch(width, () => {
   <div class="color-canvas-wrapper">
     <Handle :position="position" :color="color" />
     <canvas
-      :ref="setRef"
+      :ref="setColorCanvas"
       class="color-canvas"
       :width="width"
       :height="height"
diff --git a/packages/dye/components/DyePicker.vue b/packages/dye/components/DyePicker.vue
index 8afc309..ba5b8ce 100644
--- a/packages/dye/components/DyePicker.vue
+++ b/packages/dye/components/DyePicker.vue
@@ -4,9 +4,9 @@ import type { Colord } from 'colord'
 import { vOnClickOutside } from '@vueuse/components'
 
 import { umbra } from '@umbrajs/core'
-import { Ref, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { colorName } from '../composables/colorName'
-import { hexType } from '../composables/canvas'
+import { hexType, useColorCanvas } from '../composables/canvas'
 import Pallet from './Pallet.vue'
 import ColorCanvas from './Canvas/ColorCanvas.vue'
 import HueCanvas from './Canvas/HueCanvas.vue'
@@ -34,9 +34,8 @@ const props = withDefaults(defineProps<Props>(), {
   compactSize: 50
 })
 
+const [colorCanvas, setColorCanvas] = useColorCanvas()
 const pickerRef = ref<HTMLElement | null>(null)
-const colorCanvas = ref<HTMLCanvasElement | null>(null)
-
 const color = ref({
   name: 'red',
   value: props.default
@@ -49,18 +48,9 @@ watch(color, (c) => {
   }).apply({ target: pickerRef.value })
 })
 
-function getRef(): Ref<HTMLCanvasElement | null> {
-  return colorCanvas
-}
-
-function setRef(el: HTMLCanvasElement) {
-  colorCanvas.value = el
-}
-
 function handleChange(hex?: hexType, mounted = false) {
   if (!hex) return
-  const get = colorName(hex.color)
-  const { name, value } = get()
+  const { name, value } = colorName(hex.color)()
   color.value = { name, value }
 
   if (mounted) return
@@ -83,10 +73,15 @@ const compactSize = ref(props.compactSize)
     v-on-click-outside="() => (compact = true)"
   >
     <Pallet :color="color" :compact="compact" @click="() => (compact = false)" />
-    <ColorCanvas @change="handleChange" :getRef="getRef" :setRef="setRef" :color="color" />
+    <ColorCanvas
+      @change="handleChange"
+      :colorCanvas="colorCanvas"
+      :setColorCanvas="setColorCanvas"
+      :color="color"
+    />
     <HueCanvas
       @change="(props) => handleChange(props.hex, props.mounted)"
-      :colorCanvas="getRef"
+      :colorCanvas="colorCanvas"
       :color="color"
     />
   </div>
diff --git a/packages/dye/composables/canvas.ts b/packages/dye/composables/canvas.ts
index e76ba16..8e75f4e 100644
--- a/packages/dye/composables/canvas.ts
+++ b/packages/dye/composables/canvas.ts
@@ -169,3 +169,9 @@ export function getDimentions(canvas: HTMLCanvasElement, frame = { height: 100,
     }
   }
 }
+
+type UCCP = [() => Ref<HTMLCanvasElement | null>, (el: HTMLCanvasElement) => void]
+export function useColorCanvas(): UCCP {
+  const colorCanvas = ref<HTMLCanvasElement | null>(null)
+  return [() => colorCanvas, (el: HTMLCanvasElement) => (colorCanvas.value = el)]
+}