diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index e93858e..fe7fb04 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -22,6 +22,7 @@ model Board {
   name String
   preview Json
   code Json
+  isColorful Boolean
 }
 
 model Code {
diff --git a/src/iframe/life-game.js b/src/iframe/life-game.js
index 96a318e..cddd278 100644
--- a/src/iframe/life-game.js
+++ b/src/iframe/life-game.js
@@ -8,6 +8,7 @@ let patternShape = [];
 let patternHeight = 0;
 let patternWidth = 0;
 let previewCells = [];
+let isColorful = false;
 
 //盤面の大きさ
 const boardSize = 20;
@@ -262,11 +263,23 @@ on.place_template = (template) => {
 };
 
 on.save_board = async () => {
-  window.parent.postMessage({ type: "save_board", data: board }, "*");
+  window.parent.postMessage(
+    {
+      type: "save_board",
+      data: {
+        board: board,
+        isColorful: isColorful,
+      },
+    },
+    "*",
+  );
 };
-
 on.apply_board = (newBoard) => {
   board = newBoard;
   renderBoard();
   generationChange(0);
 };
+
+on.request_colorful_status = () => {
+  window.parent.postMessage({ type: "colorful_status", data: isColorful }, "*");
+};
diff --git a/src/lib/api/board.ts b/src/lib/api/board.ts
index bbe477c..9b7fbe6 100644
--- a/src/lib/api/board.ts
+++ b/src/lib/api/board.ts
@@ -1,7 +1,7 @@
 import { toast } from "$lib/models/ToastStore.svelte";
 
 export async function saveBoard(
-  data: { board: number[][]; name: string; code: string },
+  data: { board: number[][]; name: string; code: string; isColorful: boolean },
   isJapanese: boolean,
 ) {
   try {
@@ -67,6 +67,7 @@ export async function fetchBoardList(isJapanese: boolean): Promise<BoardListItem
 export type LoadedBoardData = {
   board: number[][];
   code: string;
+  isColorful: boolean;
 };
 
 export async function loadBoardById(
diff --git a/src/lib/assets/life-game-rules/colorful.js b/src/lib/assets/life-game-rules/colorful.js
new file mode 100644
index 0000000..c8e6f5b
--- /dev/null
+++ b/src/lib/assets/life-game-rules/colorful.js
@@ -0,0 +1,340 @@
+"use strict";
+
+let generationFigure = 0;
+let isDragging = false;
+let dragColor = 0; // ドラッグ中に設定する色
+let isPlacingTemplate = false;
+let patternShape = [];
+let patternHeight = 0;
+let patternWidth = 0;
+let previewCells = [];
+let isColorful = true;
+
+//盤面の大きさ
+const boardSize = 20;
+const cellSize = 450 / boardSize;
+
+//セルの誕生/生存条件
+const birthCounts = [3];
+const survivalCounts = [2, 3];
+
+// 色の定数定義
+const WHITE = 0xffffff; // 死んだセル（白）
+const BLACK = 0x000000; // 生きたセル（黒）
+let currentSelectedColor = BLACK; // 描かれるセルの色
+
+// around: 周囲の生きたセル数 self: 自身が生きているかどうか
+function isNextAlive(around, self) {
+  // 自身が死んでいる & 周囲が birthCounts で誕生
+  if (!isAlive(self) && birthCounts.includes(around)) {
+    return true;
+  }
+  // 自身が生きている & 周囲が survivalCounts で生存
+  if (isAlive(self) && survivalCounts.includes(around)) {
+    return true;
+  }
+  return false;
+}
+
+function isAlive(self) {
+  return self !== WHITE ? true : false;
+}
+
+// cellの状態に応じた色を返す関数
+function getStyle(cell) {
+  if (cell === WHITE) return "white";
+  // 16進数を#付きの色文字列に変換
+  return "#" + cell.toString(16).padStart(6, "0");
+}
+
+// 誕生時の色を計算
+function getBirthColor(aroundCells) {
+  const aliveCells = aroundCells.filter((cell) => isAlive(cell));
+
+  let totalR = 0;
+  let totalG = 0;
+  let totalB = 0;
+
+  for (const cell of aliveCells) {
+    totalR += (cell >> 16) & 0xff;
+    totalG += (cell >> 8) & 0xff;
+    totalB += cell & 0xff;
+  }
+
+  const avgR = Math.round(totalR / aliveCells.length);
+  const avgG = Math.round(totalG / aliveCells.length);
+  const avgB = Math.round(totalB / aliveCells.length);
+
+  return (avgR << 16) | (avgG << 8) | avgB;
+}
+
+//Boardの初期化
+let board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => WHITE));
+const table = document.getElementById("game-board");
+
+//盤面をBoardに従って変更する関数達(Boardを変更したら実行する)
+function renderBoard() {
+  // bodyを中央配置に設定
+  document.body.style.display = "flex";
+  document.body.style.justifyContent = "center";
+  document.body.style.alignItems = "center";
+  document.body.style.minHeight = "100vh";
+  document.body.style.margin = "0";
+  document.body.style.padding = "0";
+
+  // 初回の盤面生成
+  table.innerHTML = "";
+  for (let i = 0; i < boardSize; i++) {
+    const tr = document.createElement("tr");
+    tr.style.padding = "0";
+    for (let j = 0; j < boardSize; j++) {
+      const td = document.createElement("td");
+      td.style.padding = "0";
+      const button = document.createElement("button");
+      button.style.backgroundColor = getStyle(board[i][j]); //Boardの対応する値によって色を変更
+      // ボードが大きいときは border をつけない
+      if (boardSize >= 50) {
+        button.style.border = "none";
+        table.style.border = "1px solid black";
+      } else {
+        button.style.border = "0.5px solid black";
+      }
+      button.style.width = `${cellSize}px`;
+      button.style.height = `${cellSize}px`;
+      button.style.padding = "0";
+      button.style.display = "block";
+      button.onclick = () => {
+        if (isPlacingTemplate) {
+          clearPreview();
+          isPlacingTemplate = false;
+          if (i + patternHeight < boardSize + 1 && j + patternWidth < boardSize + 1) {
+            for (let r = 0; r < patternHeight; r++) {
+              for (let c = 0; c < patternWidth; c++) {
+                const boardRow = i + r;
+                const boardCol = j + c;
+                board[boardRow][boardCol] = patternShape[r][c] ? currentSelectedColor : WHITE;
+              }
+            }
+            rerender();
+          } else {
+            window.parent.postMessage(
+              {
+                type: "Size shortage",
+                data: {},
+              },
+              "*",
+            );
+          }
+        }
+      };
+      button.onmousedown = (e) => {
+        e.preventDefault();
+        if (!isPlacingTemplate) {
+          isDragging = true;
+          board[i][j] = board[i][j] === WHITE ? currentSelectedColor : WHITE;
+          dragColor = board[i][j];
+          button.style.backgroundColor = getStyle(board[i][j]);
+        }
+      };
+      button.onmouseenter = () => {
+        if (isDragging && board[i][j] !== dragColor && !isPlacingTemplate) {
+          board[i][j] = dragColor;
+          button.style.backgroundColor = getStyle(board[i][j]);
+        }
+        if (isPlacingTemplate) {
+          drawPreview(i, j);
+        }
+      };
+      td.appendChild(button);
+      tr.appendChild(td);
+    }
+    table.appendChild(tr);
+  }
+}
+
+table.onmouseleave = () => {
+  if (isPlacingTemplate) {
+    clearPreview();
+  }
+};
+
+function drawPreview(row, col) {
+  clearPreview();
+  for (let r = 0; r < patternHeight; r++) {
+    for (let c = 0; c < patternWidth; c++) {
+      if (patternShape[r][c] === 1) {
+        const boardRow = row + r;
+        const boardCol = col + c;
+        if (boardRow < boardSize && boardCol < boardSize) {
+          const cell = table.rows[boardRow].cells[boardCol].firstChild;
+          cell.style.backgroundColor = "gray";
+          previewCells.push({ row: boardRow, col: boardCol });
+        }
+      }
+    }
+  }
+}
+
+function clearPreview() {
+  previewCells.forEach((cellPos) => {
+    const cell = table.rows[cellPos.row].cells[cellPos.col].firstChild;
+    cell.style.backgroundColor = getStyle(board[cellPos.row][cellPos.col]);
+  });
+  previewCells = [];
+}
+
+function rerender() {
+  // ２回目以降の盤面生成
+  for (let i = 0; i < boardSize; i++) {
+    for (let j = 0; j < boardSize; j++) {
+      const button = table.children[i].children[j].children[0];
+
+      // 色の更新
+      const currentCellColor = button.style.backgroundColor;
+      const expectedCellColor = getStyle(board[i][j]);
+      if (currentCellColor !== expectedCellColor) {
+        button.style.backgroundColor = expectedCellColor;
+      }
+    }
+  }
+}
+
+document.addEventListener("mouseup", () => {
+  isDragging = false;
+});
+
+renderBoard();
+
+function generationChange(num) {
+  //現在の世代を表すgenerationFigureを変更し、文章も変更
+  generationFigure = num;
+  window.parent.postMessage(
+    {
+      type: "generation_change",
+      data: generationFigure,
+    },
+    "*",
+  );
+}
+
+function progressBoard() {
+  const newBoard = structuredClone(board);
+  for (let i = 0; i < boardSize; i++) {
+    for (let j = 0; j < boardSize; j++) {
+      //周囲のマスに生きたセルが何個あるかを計算(aroundに格納)↓
+      let around = 0;
+      const aroundCells = [];
+      let tate, yoko;
+      if (i === 0) {
+        tate = [0, 1];
+      } else if (i === boardSize - 1) {
+        tate = [0, -1];
+      } else {
+        tate = [-1, 0, 1];
+      }
+      if (j === 0) {
+        yoko = [0, 1];
+      } else if (j === boardSize - 1) {
+        yoko = [0, -1];
+      } else {
+        yoko = [-1, 0, 1];
+      }
+
+      for (let ii = 0; ii < tate.length; ii++) {
+        for (let jj = 0; jj < yoko.length; jj++) {
+          if (tate[ii] !== 0 || yoko[jj] !== 0) {
+            if (isAlive(board[i + tate[ii]][j + yoko[jj]])) {
+              around += 1;
+              aroundCells.push(board[i + tate[ii]][j + yoko[jj]]);
+            }
+          }
+        }
+      }
+      //↑周囲のマスに生きたセルが何個あるかを計算(aroundに格納)
+
+      // 生死を判定
+      if (isNextAlive(around, board[i][j])) {
+        // 生きている場合
+        newBoard[i][j] = isAlive(board[i][j]) ? board[i][j] : getBirthColor(aroundCells);
+      } else {
+        // 死んでいる場合
+        newBoard[i][j] = WHITE;
+      }
+    }
+  }
+  board = newBoard;
+  generationChange(generationFigure + 1);
+  rerender();
+}
+
+//イベント
+
+on.progress = () => {
+  progressBoard();
+};
+
+on.board_reset = () => {
+  //すべて死んだセルにBoardを変更
+  board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => WHITE));
+  renderBoard();
+  generationChange(0);
+};
+
+on.board_randomize = () => {
+  //生きたセル死んだセルランダムにBoardを変更
+  board = Array.from({ length: boardSize }, () =>
+    Array.from({ length: boardSize }, () => {
+      if (Math.random() > 0.5) {
+        // 生きたセル：ランダムな色を生成
+        const r = Math.floor(Math.random() * 256);
+        const g = Math.floor(Math.random() * 256);
+        const b = Math.floor(Math.random() * 256);
+        return (r << 16) | (g << 8) | b;
+      } else {
+        // 死んだセル
+        return WHITE;
+      }
+    }),
+  );
+  renderBoard();
+  generationChange(0);
+};
+
+on.get_boardsize = () => {
+  window.parent.postMessage({ type: "get_boardsize", data: boardSize }, "*");
+};
+
+on.place_template = (template) => {
+  patternShape = template;
+  patternHeight = patternShape.length;
+  patternWidth = patternShape[0].length;
+  isPlacingTemplate = true;
+  table.style.cursor = "crosshair";
+};
+
+on.save_board = async () => {
+  window.parent.postMessage(
+    {
+      type: "save_board",
+      data: {
+        board: board,
+        isColorful: isColorful,
+      },
+    },
+    "*",
+  );
+};
+
+on.apply_board = (newBoard) => {
+  board = newBoard;
+  renderBoard();
+  generationChange(0);
+};
+
+on.apply_color = (colorValue) => {
+  currentSelectedColor = colorValue;
+};
+
+on.request_colorful_status = () => {
+  window.parent.postMessage({ type: "colorful_status", data: isColorful }, "*");
+};
diff --git a/src/lib/assets/life-game-rules/lifespan.js b/src/lib/assets/life-game-rules/lifespan.js
index 8cb95ff..cbbc34e 100644
--- a/src/lib/assets/life-game-rules/lifespan.js
+++ b/src/lib/assets/life-game-rules/lifespan.js
@@ -8,6 +8,7 @@ let patternShape = [];
 let patternHeight = 0;
 let patternWidth = 0;
 let previewCells = [];
+let isColorful = false;
 
 //変数設定
 const boardSize = 20; //盤面の大きさ(20x20)
@@ -297,7 +298,16 @@ on.place_template = (template) => {
 };
 
 on.save_board = async () => {
-  window.parent.postMessage({ type: "save_board", data: board }, "*");
+  window.parent.postMessage(
+    {
+      type: "save_board",
+      data: {
+        board: board,
+        isColorful: isColorful,
+      },
+    },
+    "*",
+  );
 };
 
 on.apply_board = (newBoard) => {
@@ -305,3 +315,7 @@ on.apply_board = (newBoard) => {
   renderBoard();
   generationChange(0);
 };
+
+on.request_colorful_status = () => {
+  window.parent.postMessage({ type: "colorful_status", data: isColorful }, "*");
+};
diff --git a/src/lib/assets/life-game-rules/probabilistics.js b/src/lib/assets/life-game-rules/probabilistics.js
index 92ff0bb..62ab014 100644
--- a/src/lib/assets/life-game-rules/probabilistics.js
+++ b/src/lib/assets/life-game-rules/probabilistics.js
@@ -8,6 +8,7 @@ let patternShape = [];
 let patternHeight = 0;
 let patternWidth = 0;
 let previewCells = [];
+let isColorful = false;
 
 //変数設定
 const boardSize = 20; //盤面の大きさ(20x20)
@@ -260,7 +261,16 @@ on.place_template = (template) => {
 };
 
 on.save_board = async () => {
-  window.parent.postMessage({ type: "save_board", data: board }, "*");
+  window.parent.postMessage(
+    {
+      type: "save_board",
+      data: {
+        board: board,
+        isColorful: isColorful,
+      },
+    },
+    "*",
+  );
 };
 
 on.apply_board = (newBoard) => {
@@ -268,3 +278,7 @@ on.apply_board = (newBoard) => {
   renderBoard();
   generationChange(0);
 };
+
+on.request_colorful_status = () => {
+  window.parent.postMessage({ type: "colorful_status", data: isColorful }, "*");
+};
diff --git a/src/lib/assets/life-game-rules/score.js b/src/lib/assets/life-game-rules/score.js
index cee8c2a..cccc6a5 100644
--- a/src/lib/assets/life-game-rules/score.js
+++ b/src/lib/assets/life-game-rules/score.js
@@ -15,6 +15,7 @@ let patternHeight = 0;
 let patternWidth = 0;
 let previewCells = [];
 let previousBoard = [];
+let isColorful = false;
 let score = 0;
 
 //変数設定
@@ -317,7 +318,16 @@ on.place_template = (template) => {
 };
 
 on.save_board = async () => {
-  window.parent.postMessage({ type: "save_board", data: board }, "*");
+  window.parent.postMessage(
+    {
+      type: "save_board",
+      data: {
+        board: board,
+        isColorful: isColorful,
+      },
+    },
+    "*",
+  );
 };
 
 on.apply_board = (newBoard) => {
@@ -336,3 +346,7 @@ function showToast(jMessage, eMessage) {
     "*",
   );
 }
+
+on.request_colorful_status = () => {
+  window.parent.postMessage({ type: "colorful_status", data: isColorful }, "*");
+};
diff --git a/src/lib/assets/life-game-rules/wolframcode.js b/src/lib/assets/life-game-rules/wolframcode.js
index 5c735e3..bdd797e 100644
--- a/src/lib/assets/life-game-rules/wolframcode.js
+++ b/src/lib/assets/life-game-rules/wolframcode.js
@@ -2,6 +2,7 @@
 
 let generationFigure = 0;
 let currentRow = 0;
+let isColorful = false;
 
 //盤面の大きさ
 const boardSize = 201; //奇数に設定する
@@ -128,5 +129,18 @@ on.board_randomize = () => {
 };
 
 on.save_board = async () => {
-  window.parent.postMessage({ type: "save_board", data: board }, "*");
+  window.parent.postMessage(
+    {
+      type: "save_board",
+      data: {
+        board: board,
+        isColorful: isColorful,
+      },
+    },
+    "*",
+  );
+};
+
+on.request_colorful_status = () => {
+  window.parent.postMessage({ type: "colorful_status", data: isColorful }, "*");
 };
diff --git a/src/lib/board-preview.ts b/src/lib/board-preview.ts
index b21dbe8..36bce95 100644
--- a/src/lib/board-preview.ts
+++ b/src/lib/board-preview.ts
@@ -5,6 +5,7 @@ const PREVIEW_SIZE = 20;
  * 20x20 に満たない場合は、中央に配置し、周囲を false (空白) で埋めます。
  */
 export function createBoardPreview(boardData: number[][]): number[][] {
+  console.log("Input board sample:", boardData[0]?.slice(0, 3));
   const boardHeight = boardData.length;
   const boardWidth = boardData[0]?.length || 0;
 
diff --git a/src/lib/components/BoardModals.svelte b/src/lib/components/BoardModals.svelte
index 791271e..5f01c3f 100644
--- a/src/lib/components/BoardModals.svelte
+++ b/src/lib/components/BoardModals.svelte
@@ -5,10 +5,12 @@
     manager,
     isJapanese,
     onSelect,
+    isColorful,
   }: {
     manager: BoardManager;
     isJapanese: boolean;
     onSelect: (id: number) => void;
+    isColorful: boolean;
   } = $props();
 
   let showConfirmation = $state(false);
@@ -26,6 +28,21 @@
     showConfirmation = false;
     selectedBoardId = null;
   }
+
+  function getCellColor(cell: number): string {
+    const WHITE = 0xffffff;
+
+    if (isColorful) {
+      // 色対応版（0xFFFFFF形式）
+      if (cell === WHITE) return "white";
+      return "#" + cell.toString(16).padStart(6, "0");
+    } else {
+      // レガシー版（0/1形式）への互換性
+      if (cell === 0) return "white";
+      if (cell === 1) return "black";
+    }
+    return "white"; // 不明な値の場合
+  }
 </script>
 
 <dialog class="modal" open={manager.saveState.saving}>
@@ -54,7 +71,7 @@
             {#each manager.saveState.preview as row, i (i)}
               <div class="preview-row">
                 {#each row as cell, j (j)}
-                  <div class="preview-cell {cell ? 'alive' : ''}"></div>
+                  <div class="preview-cell" style="background-color: {getCellColor(cell)}"></div>
                 {/each}
               </div>
             {/each}
@@ -110,7 +127,10 @@
                     {#each item.preview as row, i (i)}
                       <div class="preview-row">
                         {#each row as cell, j (j)}
-                          <div class="preview-cell {cell ? 'alive' : ''}"></div>
+                          <div
+                            class="preview-cell"
+                            style="background-color: {getCellColor(cell)}"
+                          ></div>
                         {/each}
                       </div>
                     {/each}
@@ -179,7 +199,4 @@
     width: 3px;
     height: 3px;
   }
-  .preview-cell.alive {
-    background-color: black;
-  }
 </style>
diff --git a/src/lib/icons/index.ts b/src/lib/icons/index.ts
index e930bc2..525e10a 100644
--- a/src/lib/icons/index.ts
+++ b/src/lib/icons/index.ts
@@ -10,3 +10,4 @@ export { default as reset } from "./reset.svg";
 export { default as accelerate } from "./accelerate.svg";
 export { default as decelerate } from "./decelerate.svg";
 export { default as questionmark } from "./questionmark.svg";
+export { default as paintBrush } from "./paint-brush.svg";
diff --git a/src/lib/icons/paint-brush.svg b/src/lib/icons/paint-brush.svg
new file mode 100644
index 0000000..6add0c0
--- /dev/null
+++ b/src/lib/icons/paint-brush.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" />
+</svg>
\ No newline at end of file
diff --git a/src/lib/models/BoardManager.svelte.ts b/src/lib/models/BoardManager.svelte.ts
index f608637..0e751e4 100644
--- a/src/lib/models/BoardManager.svelte.ts
+++ b/src/lib/models/BoardManager.svelte.ts
@@ -15,6 +15,7 @@ type SaveState =
       name: string;
       preview: number[][];
       code: string;
+      isColorful: boolean;
     };
 
 type LoadState =
@@ -28,7 +29,7 @@ export class BoardManager {
 
   constructor() {}
 
-  openSaveModal(board: number[][], code: string) {
+  openSaveModal(board: number[][], code: string, isColorful: boolean) {
     const preview = createBoardPreview(board);
     this.saveState = {
       saving: true,
@@ -36,6 +37,7 @@ export class BoardManager {
       name: "",
       preview: preview,
       code: code,
+      isColorful: isColorful,
     };
   }
 
@@ -51,6 +53,7 @@ export class BoardManager {
         board: this.saveState.board,
         name: name,
         code: this.saveState.code,
+        isColorful: this.saveState.isColorful,
       },
       isJapanese,
     );
diff --git a/src/lib/rules-explanation.ts b/src/lib/rules-explanation.ts
index 25f2901..d110e89 100644
--- a/src/lib/rules-explanation.ts
+++ b/src/lib/rules-explanation.ts
@@ -1,6 +1,7 @@
 import lifespan from "$lib/assets/life-game-rules/lifespan.js?raw";
 import probabilistics from "$lib/assets/life-game-rules/probabilistics.js?raw";
 import wolframcode from "$lib/assets/life-game-rules/wolframcode.js?raw";
+import colorful from "$lib/assets/life-game-rules/colorful.js?raw";
 import score from "$lib/assets/life-game-rules/score.js?raw";
 
 export type RuleExplanation = {
@@ -28,8 +29,8 @@ export const rulesExplanation = {
   },
   probabilistics: {
     name: {
-      ja: "確率システム",
-      en: "Probabilistic system",
+      ja: "確率的オートマトン",
+      en: "Probabilistic automaton",
     },
     description: {
       ja: "生死に確率を導入できます",
@@ -48,6 +49,17 @@ export const rulesExplanation = {
     },
     code: wolframcode,
   },
+  colorful: {
+    name: {
+      ja: "カラフル",
+      en: "Colorful",
+    },
+    description: {
+      ja: "多彩な色付けを可能にするシステムです",
+      en: "A system that enables colorful coloring",
+    },
+    code: colorful,
+  },
   score: {
     name: {
       ja: "得点システム",
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e3e8fd6..21e1a1d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -33,6 +33,10 @@
   let generationFigure = $state(0);
   let sizeValue = $state(20);
 
+  let showColorPicker = $state(false);
+  let selectedColor = $state("#000000");
+  let isColorful = $state(false);
+
   const boardManager = new BoardManager();
   const codeManager = new CodeManager();
 
@@ -63,13 +67,16 @@
     | "save_board"
     | "apply_board"
     | "get_boardsize"
-    | "progress";
+    | "progress"
+    | "apply_color"
+    | "request_colorful_status";
 
   type IncomingEvent =
     | "generation_change"
     | "get_boardsize"
     | "Size shortage"
     | "save_board"
+    | "colorful_status"
     | "show_toast"
     | "timer_change";
 
@@ -94,7 +101,12 @@
         break;
       }
       case "save_board": {
-        boardManager.openSaveModal(event.data.data as number[][], appliedCode as string);
+        const data = event.data.data as { board: number[][]; isColorful?: boolean };
+        boardManager.openSaveModal(data.board, appliedCode, data.isColorful ?? false);
+        break;
+      }
+      case "colorful_status": {
+        isColorful = event.data.data as boolean;
         break;
       }
       case "show_toast": {
@@ -129,6 +141,7 @@
     if (data) {
       editingCode = data.code;
       appliedCode = data.code;
+      isColorful = data.isColorful;
       sendEvent("apply_board", data.board);
     }
   }
@@ -158,6 +171,14 @@
     editingCode = rule.code;
     appliedCode = rule.code;
   }
+
+  function applyColor(color: string) {
+    // 16進数文字列を数値に変換して送信
+    const hex = color.startsWith("#") ? color.slice(1) : color;
+    const hexValue = parseInt(hex, 16);
+    sendEvent("apply_color", hexValue);
+    showColorPicker = false;
+  }
 </script>
 
 <div class="navbar bg-[#E0E0E0] shadow-sm">
@@ -167,8 +188,19 @@
 
   <div class="font-semibold text-black text-[20px] ml-5">Life code</div>
 
+  <label
+    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap ml-auto"
+    class:invisible={!isColorful}
+    class:pointer-events-none={!isColorful}
+  >
+    <input type="checkbox" bind:checked={showColorPicker} />
+    <div class="text-black">
+      <img class="size-6" src={icons.paintBrush} alt="Paint Brush" />
+    </div>
+  </label>
+
   <button
-    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] ml-auto"
+    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] ml-10"
     onclick={() => {
       resetModalOpen = true;
     }}
@@ -276,7 +308,7 @@
   </div>
 </div>
 
-<BoardModals manager={boardManager} {isJapanese} onSelect={onBoardSelect} />
+<BoardModals manager={boardManager} {isJapanese} onSelect={onBoardSelect} {isColorful} />
 <CodeModals manager={codeManager} {isJapanese} onSelect={onCodeSelect} />
 <HelpModal open={helpModalOpen} {isJapanese} onClose={() => (helpModalOpen = false)} />
 
@@ -321,6 +353,7 @@
       onload={() => {
         setTimeout(() => {
           sendEvent("get_boardsize");
+          sendEvent("request_colorful_status");
         }, 50);
       }}
     ></iframe>
@@ -520,3 +553,30 @@
     </button>
   </div>
 </div>
+
+{#if showColorPicker}
+  <div
+    class="absolute top-16 right-32 z-50 bg-white p-4 rounded-lg shadow-lg border border-gray-300"
+  >
+    <h3 class="font-bold mb-2">
+      {isJapanese
+        ? "色選択可能時のみ利用できます"
+        : "Available only when color selection is enabled"}
+    </h3>
+    <input type="color" bind:value={selectedColor} class="w-full h-12 cursor-pointer" />
+    <div class="flex gap-2 mt-3">
+      <button
+        class="btn btn-sm btn-primary flex-1"
+        onclick={() => {
+          applyColor(selectedColor);
+          console.log("Applied color:", selectedColor);
+        }}
+      >
+        {isJapanese ? "適用" : "Apply"}
+      </button>
+      <button class="btn btn-sm flex-1" onclick={() => (showColorPicker = false)}>
+        {isJapanese ? "キャンセル" : "Cancel"}
+      </button>
+    </div>
+  </div>
+{/if}
diff --git a/src/routes/api/board/+server.ts b/src/routes/api/board/+server.ts
index 6176f5e..5ced9d9 100644
--- a/src/routes/api/board/+server.ts
+++ b/src/routes/api/board/+server.ts
@@ -7,6 +7,7 @@ const BoardSchema = v.object({
   board: v.array(v.array(v.number())),
   name: v.pipe(v.string(), v.minLength(1, "盤面名は必須です。")),
   code: v.string(),
+  isColorful: v.boolean(),
 });
 
 export async function POST({ request }) {
@@ -24,7 +25,7 @@ export async function POST({ request }) {
     return json({ message: "無効なリクエストデータです。" }, { status: 400 });
   }
 
-  const { board, name, code } = result.output;
+  const { board, name, code, isColorful } = result.output;
   const preview = createBoardPreview(board);
 
   const newState = await prisma.board.create({
@@ -33,6 +34,7 @@ export async function POST({ request }) {
       name: name,
       preview: preview,
       code: code,
+      isColorful: isColorful,
     },
   });
 
@@ -51,7 +53,7 @@ export async function GET({ url }) {
 
     const state = await prisma.board.findUnique({
       where: { id: id },
-      select: { board: true, code: true },
+      select: { board: true, code: true, isColorful: true },
     });
 
     if (!state) {