From a97355ee03f5e563b0a73a672fe3506559fe6b81 Mon Sep 17 00:00:00 2001
From: freesemar93 <46578442-freesemar93@users.noreply.replit.com>
Date: Mon, 18 Aug 2025 12:23:36 +0000
Subject: [PATCH] Add the official r/place color palette for pixel art creation

Update the client-side color palette component and configuration file to include the 32 official colors from r/place, adjusting grid layout and selected color defaults.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0385ea33-cde8-4bbd-8fce-8d192d30eb41
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/870d08ce-da3b-4822-9874-c2fe2b7628b1/0385ea33-cde8-4bbd-8fce-8d192d30eb41/cRSBTLz
---
 client/src/components/color-palette.tsx     |  8 ++--
 client/src/lib/config.ts                    | 49 ++++++++++++++-------
 exports/canvas-2025-08-18T12-22-35-760Z.svg |  1 +
 3 files changed, 38 insertions(+), 20 deletions(-)
 create mode 100644 exports/canvas-2025-08-18T12-22-35-760Z.svg

diff --git a/client/src/components/color-palette.tsx b/client/src/components/color-palette.tsx
index 0817c36..e0013da 100644
--- a/client/src/components/color-palette.tsx
+++ b/client/src/components/color-palette.tsx
@@ -37,14 +37,14 @@ export function ColorPalette({
           </div>
         </div>
 
-        {/* Color Grid */}
-        <div className="grid grid-cols-8 gap-2 mb-4">
+        {/* Color Grid - 8x4 layout for 32 colors */}
+        <div className="grid grid-cols-8 gap-1 mb-4">
           {COLORS.map((color) => (
             <button
               key={color}
               className={cn(
-                "w-8 h-8 rounded hover:scale-110 transition-transform border-2",
-                selectedColor === color ? "border-white" : "border-transparent hover:border-white"
+                "w-7 h-7 rounded hover:scale-110 transition-transform border-2",
+                selectedColor === color ? "border-white border-2" : "border-gray-600 hover:border-white"
               )}
               style={{ backgroundColor: color }}
               onClick={() => onColorSelect(color)}
diff --git a/client/src/lib/config.ts b/client/src/lib/config.ts
index 03e5598..f685149 100644
--- a/client/src/lib/config.ts
+++ b/client/src/lib/config.ts
@@ -1,23 +1,40 @@
+// Official r/place 2022 color palette (32 colors)
 export const COLORS = [
-  "#FF0000", // Red
-  "#FFA500", // Orange
-  "#FFFF00", // Yellow
-  "#00FF00", // Green
-  "#0000FF", // Blue
-  "#800080", // Purple
-  "#FFC0CB", // Pink
-  "#A52A2A", // Brown
+  "#6d001a", // Dark Red
+  "#be0039", // Red
+  "#ff4500", // Orange
+  "#ffa800", // Yellow Orange
+  "#ffd635", // Yellow
+  "#fff8b8", // Pale Yellow
+  "#00a368", // Dark Green
+  "#00cc78", // Green
+  "#7eed56", // Light Green
+  "#00756f", // Dark Teal
+  "#009eaa", // Teal
+  "#00ccc0", // Light Teal
+  "#2450a4", // Dark Blue
+  "#3690ea", // Blue
+  "#51e9f4", // Light Blue
+  "#493ac1", // Indigo
+  "#6a5cff", // Periwinkle
+  "#94b3ff", // Lavender
+  "#811e9f", // Dark Purple
+  "#b44ac0", // Purple
+  "#e4abff", // Pale Purple
+  "#de107f", // Magenta
+  "#ff3881", // Pink
+  "#ff99aa", // Light Pink
+  "#6d482f", // Dark Brown
+  "#9c6926", // Brown
+  "#ffb470", // Beige
   "#000000", // Black
-  "#404040", // Dark Gray
-  "#808080", // Gray
-  "#C0C0C0", // Light Gray
-  "#FFFFFF", // White
-  "#00FFFF", // Cyan
-  "#00FF80", // Lime
-  "#4B0082", // Indigo
+  "#515252", // Dark Gray
+  "#898d90", // Gray
+  "#d4d7d9", // Light Gray
+  "#ffffff", // White
 ] as const;
 
-export const DEFAULT_SELECTED_COLOR = "#FF0000";
+export const DEFAULT_SELECTED_COLOR = "#be0039"; // Official r/place red
 
 export function generateUserId(): string {
   const stored = localStorage.getItem("r-place-user-id");
diff --git a/exports/canvas-2025-08-18T12-22-35-760Z.svg b/exports/canvas-2025-08-18T12-22-35-760Z.svg
new file mode 100644
index 0000000..d00a164
--- /dev/null
+++ b/exports/canvas-2025-08-18T12-22-35-760Z.svg
@@ -0,0 +1 @@
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="#FFFFFF"/></svg>
\ No newline at end of file