diff --git a/packages/web/src/components/modals/settingsPanels/AccountPanel.tsx b/packages/web/src/components/modals/settingsPanels/AccountPanel.tsx
index 014a83d5..8ff0e82e 100644
--- a/packages/web/src/components/modals/settingsPanels/AccountPanel.tsx
+++ b/packages/web/src/components/modals/settingsPanels/AccountPanel.tsx
@@ -3,16 +3,10 @@ import { useAuthStore } from '../../../stores/authStore';
 import { Avatar } from '../../ui/Avatar';
 import { ImageCropModal } from '../../ui/ImageCropModal';
 import { api } from '../../../api/client';
-import { getAvatarGradient, adjustColor, AVATAR_GRADIENT_MAP } from '../../../utils/gradients';
+import { getAvatarGradient, adjustColor, AVATAR_GRADIENT_MAP, ACCENT_PRESETS } from '../../../utils/gradients';
 import { AVATAR_COLORS } from '@backspace/shared';
 import type { User, UserStatus, AvatarColor } from '@backspace/shared';
 
-const ACCENT_PRESETS = [
-  '#86efac', '#fca5a5', '#c4b5fd', '#7dd3fc',
-  '#fcd34d', '#fda4af', '#fb923c', '#7c6cf6',
-  '#ef4444', '#f97316', '#22d3ee', '#a3e635',
-  '#f472b6', '#818cf8', '#2dd4bf', '#e879f9',
-];
 
 export function AccountPanel() {
   const user = useAuthStore((s) => s.user);
@@ -419,7 +413,7 @@ export function AccountPanel() {
           {/* Accent Color */}
           <div>
             <label className="block text-xs text-txt-secondary mb-1.5">Accent Color</label>
-            <div className="grid grid-cols-8 gap-1.5 mb-2">
+            <div className="grid grid-cols-7 gap-1.5 mb-2">
               {ACCENT_PRESETS.map((color) => (
                 <button
                   key={color}
diff --git a/packages/web/src/utils/gradients.ts b/packages/web/src/utils/gradients.ts
index e430fc0d..13652802 100644
--- a/packages/web/src/utils/gradients.ts
+++ b/packages/web/src/utils/gradients.ts
@@ -72,6 +72,12 @@ export function getSpaceGradient(id?: string | null, name?: string): GradientEnt
   return SPACE_GRADIENTS[hashString(key) % SPACE_GRADIENTS.length]!;
 }
 
+/** Flat accent-color presets derived from the avatar gradient palette. Both stops per gradient. */
+export const ACCENT_PRESETS: string[] = AVATAR_GRADIENTS.flatMap(g => {
+  const matches = g.gradient.match(/#[0-9a-fA-F]{6}/g);
+  return matches ?? [];
+});
+
 /** Shift each RGB component of a hex color by `amount` (positive = lighter, negative = darker). */
 export function adjustColor(hex: string, amount: number): string {
   const r = Math.max(0, Math.min(255, parseInt(hex.slice(1, 3), 16) + amount));