diff --git a/src/components/ColorPicker.vue b/src/components/ColorPicker.vue
index 0e087cb0d..6e55d6304 100644
--- a/src/components/ColorPicker.vue
+++ b/src/components/ColorPicker.vue
@@ -2,7 +2,7 @@
 import { ref, computed, watch } from 'vue'
 import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from 'reka-ui'
 
-import { colorToHex, parseColor } from '../engine/color'
+import { colorToHexRaw, parseColor } from '../engine/color'
 
 import type { Color } from '../types'
 
@@ -74,7 +74,7 @@ function emitColor() {
 }
 
 const hexValue = computed(() => {
-  return colorToHex(props.color).slice(1)
+  return colorToHexRaw(props.color)
 })
 
 function onHexInput(e: Event) {
diff --git a/src/components/properties/FillSection.vue b/src/components/properties/FillSection.vue
index be4643afc..f76e7f720 100644
--- a/src/components/properties/FillSection.vue
+++ b/src/components/properties/FillSection.vue
@@ -2,17 +2,13 @@
 import ColorPicker from '../ColorPicker.vue'
 import { useEditorStore } from '../../stores/editor'
 import { DEFAULT_SHAPE_FILL } from '../../constants'
-import { colorToHex, parseColor } from '../../engine/color'
+import { colorToHexRaw, parseColor } from '../../engine/color'
 
 import type { Color, Fill } from '../../engine/scene-graph'
 
 const props = defineProps<{ nodeId: string; fills: Fill[] }>()
 const store = useEditorStore()
 
-function hexString(c: Color) {
-  return colorToHex(c).slice(1).toUpperCase()
-}
-
 function updateColor(index: number, color: Color) {
   const fills = [...props.fills]
   fills[index] = { ...fills[index], color }
@@ -56,7 +52,7 @@ function remove(index: number) {
       <ColorPicker :color="fill.color" @update="updateColor(i, $event)" />
       <input
         class="min-w-0 flex-1 border-none bg-transparent font-mono text-xs text-surface outline-none"
-        :value="hexString(fill.color)"
+        :value="colorToHexRaw(fill.color)"
         @change="updateHex(i, ($event.target as HTMLInputElement).value)"
       />
       <input
diff --git a/src/components/properties/StrokeSection.vue b/src/components/properties/StrokeSection.vue
index 988415cf1..957543589 100644
--- a/src/components/properties/StrokeSection.vue
+++ b/src/components/properties/StrokeSection.vue
@@ -1,17 +1,13 @@
 <script setup lang="ts">
 import ColorPicker from '../ColorPicker.vue'
 import { useEditorStore } from '../../stores/editor'
-import { colorToHex, parseColor } from '../../engine/color'
+import { colorToHexRaw, parseColor } from '../../engine/color'
 
 import type { Color, Stroke } from '../../engine/scene-graph'
 
 const props = defineProps<{ nodeId: string; strokes: Stroke[] }>()
 const store = useEditorStore()
 
-function hexString(c: Color) {
-  return colorToHex(c).slice(1).toUpperCase()
-}
-
 function updateColor(index: number, color: Color) {
   const strokes = [...props.strokes]
   strokes[index] = { ...strokes[index], color }
@@ -62,7 +58,7 @@ function remove(index: number) {
       <ColorPicker :color="stroke.color" @update="updateColor(i, $event)" />
       <input
         class="min-w-0 flex-1 border-none bg-transparent font-mono text-xs text-surface outline-none"
-        :value="hexString(stroke.color)"
+        :value="colorToHexRaw(stroke.color)"
         @change="updateHex(i, ($event.target as HTMLInputElement).value)"
       />
       <input
diff --git a/src/engine/color.ts b/src/engine/color.ts
index a932c136e..5dbfd2d50 100644
--- a/src/engine/color.ts
+++ b/src/engine/color.ts
@@ -20,6 +20,10 @@ export function colorToHex(color: Color): string {
   return (formatHex({ mode: 'rgb', r: color.r, g: color.g, b: color.b }) ?? '#000000').toUpperCase()
 }
 
+export function colorToHexRaw(color: Color): string {
+  return colorToHex(color).slice(1)
+}
+
 export function colorToFill(color: string | Color) {
   const rgba = typeof color === 'string' ? parseColor(color) : color
   return {