diff --git a/src/hooks/common/useRoofFn.js b/src/hooks/common/useRoofFn.js
index eb932106..a35ef9fc 100644
--- a/src/hooks/common/useRoofFn.js
+++ b/src/hooks/common/useRoofFn.js
@@ -3,7 +3,12 @@ import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { selectedRoofMaterialSelector } from '@/store/settingAtom'
 import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 import { POLYGON_TYPE } from '@/common/common'
-
+const ROOF_COLOR = {
+  0: 'rgb(199,240,213)',
+  1: 'rgb(178,238,255)',
+  2: 'rgb(187,204,255)',
+  3: 'rgb(228,202,255)',
+}
 export function useRoofFn() {
   const canvas = useRecoilValue(canvasState)
   const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
@@ -16,6 +21,7 @@ export function useRoofFn() {
 
     let width = (roofMaterial.width ?? 226) / 10
     let height = (roofMaterial.length ?? 158) / 10
+    const index = roofMaterial.index ?? 0
     let roofStyle = 2
     const inputPatternSize = { width: width, height: height } //임시 사이즈
     const patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해
@@ -35,7 +41,7 @@ export function useRoofFn() {
     const rows = Math.floor(patternSourceCanvas.height / patternSize.height)
     const cols = Math.floor(patternSourceCanvas.width / patternSize.width)
 
-    ctx.strokeStyle = mode === 'allPainted' ? 'black' : 'blue'
+    ctx.strokeStyle = mode === 'allPainted' ? 'black' : ROOF_COLOR[index]
     ctx.lineWidth = mode === 'allPainted' ? 1 : 0.4
     ctx.fillStyle = mode === 'allPainted' ? 'rgba(0, 159, 64, 0.7)' : 'white'