diff --git a/apps/desktop/src/settings/DesktopClientSettings.test.ts b/apps/desktop/src/settings/DesktopClientSettings.test.ts
index f666e692860..4c9e99e6de1 100644
--- a/apps/desktop/src/settings/DesktopClientSettings.test.ts
+++ b/apps/desktop/src/settings/DesktopClientSettings.test.ts
@@ -24,6 +24,10 @@ const clientSettings: ClientSettings = {
   sidebarProjectGroupingOverrides: {
     "environment-1:/tmp/project-a": "separate",
   },
+  sidebarProjectColorizing: false,
+  sidebarProjectColorOverrides: {
+    "environment-1:/tmp/project-a": "indigo",
+  },
   sidebarProjectSortOrder: "manual",
   sidebarThreadSortOrder: "created_at",
   sidebarThreadPreviewCount: 6,
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index e8c5bbe0b11..c7fc23f56a6 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -56,6 +56,7 @@ import { Link, useLocation, useNavigate, useParams, useRouter } from "@tanstack/
 import {
   MAX_SIDEBAR_THREAD_PREVIEW_COUNT,
   MIN_SIDEBAR_THREAD_PREVIEW_COUNT,
+  type SidebarProjectColor,
   type SidebarProjectSortOrder,
   type SidebarThreadPreviewCount,
   type SidebarThreadSortOrder,
@@ -64,7 +65,7 @@ import { usePrimaryEnvironmentId } from "../environments/primary";
 import { isElectron } from "../env";
 import { APP_STAGE_LABEL, APP_VERSION } from "../branding";
 import { isTerminalFocused } from "../lib/terminalFocus";
-import { isMacPlatform, newCommandId } from "../lib/utils";
+import { cn, isMacPlatform, newCommandId } from "../lib/utils";
 import {
   selectProjectByRef,
   selectProjectsAcrossEnvironments,
@@ -125,6 +126,7 @@ import { Input } from "./ui/input";
 import {
   Menu,
   MenuGroup,
+  MenuItem,
   MenuPopup,
   MenuRadioGroup,
   MenuRadioItem,
@@ -197,6 +199,12 @@ import {
   type SidebarProjectSnapshot,
 } from "../sidebarProjectGrouping";
 import { SidebarProviderUpdatePill } from "./sidebar/SidebarProviderUpdatePill";
+import {
+  buildSidebarProjectColorMap,
+  EMPTY_SIDEBAR_PROJECT_COLOR_MAP,
+  SIDEBAR_PROJECT_COLOR_PALETTE,
+  type SidebarProjectColorIdentity,
+} from "../sidebarProjectColors";
 const SIDEBAR_SORT_LABELS: Record<SidebarProjectSortOrder, string> = {
   updated_at: "Last user message",
   created_at: "Created at",
@@ -246,6 +254,109 @@ function projectGroupingModeDescription(mode: SidebarProjectGroupingMode): strin
   }
 }
 
+interface ProjectColorDotProps {
+  identity: SidebarProjectColorIdentity;
+  projectName: string;
+  onSelect: (color: SidebarProjectColor | null) => void;
+  /**
+   * Extra classes for the trigger itself — typically the absolute positioning
+   * applied by the parent. Putting positioning on the trigger directly (rather
+   * than a wrapping div) keeps this dot's box dimensions identical to the
+   * sibling new-thread button so they line up vertically.
+   */
+  className?: string;
+}
+
+/**
+ * Always-visible color dot rendered to the left of the per-project new-thread
+ * button when "Sidebar project colors" is enabled. Clicking opens a palette
+ * menu; selecting a swatch persists the override; selecting "Auto" clears it.
+ */
+const ProjectColorDot = memo(function ProjectColorDot({
+  identity,
+  projectName,
+  onSelect,
+  className,
+}: ProjectColorDotProps) {
+  return (
+    <Menu>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <MenuTrigger
+              type="button"
+              aria-label={`Project color for ${projectName}`}
+              className={cn(
+                "inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-md outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
+                className,
+              )}
+              onPointerDown={(event) => {
+                // The wrapping project header treats unhandled pointerdown as
+                // the start of a row drag. Stop the event so opening the
+                // picker doesn't also begin a sortable drag.
+                event.stopPropagation();
+              }}
+              onClick={(event) => {
+                event.stopPropagation();
+              }}
+            />
+          }
+        >
+          <span
+            aria-hidden="true"
+            className={cn("block size-2.5 rounded-full", identity.palette.dotClass)}
+          />
+        </TooltipTrigger>
+        <TooltipPopup side="top">
+          {identity.override
+            ? `Color: ${identity.palette.label}`
+            : `Color: ${identity.palette.label} (auto)`}
+        </TooltipPopup>
+      </Tooltip>
+      <MenuPopup align="end" side="bottom" className="min-w-44">
+        <MenuGroup>
+          <div className="px-2 py-1 sm:text-xs font-medium text-muted-foreground">
+            Project color
+          </div>
+          <MenuItem
+            onClick={() => onSelect(null)}
+            className={cn(
+              "min-h-7 py-1 sm:text-xs",
+              identity.override === undefined && "font-medium",
+            )}
+          >
+            <span
+              aria-hidden="true"
+              className="inline-flex size-3 items-center justify-center rounded-full border border-dashed border-muted-foreground/40"
+            />
+            <span className="flex-1">Auto</span>
+            {identity.override === undefined ? (
+              <span className="text-muted-foreground/60">{identity.palette.label}</span>
+            ) : null}
+          </MenuItem>
+          <MenuSeparator />
+          {SIDEBAR_PROJECT_COLOR_PALETTE.map((entry) => {
+            const isSelected = identity.override === entry.key;
+            return (
+              <MenuItem
+                key={entry.key}
+                onClick={() => onSelect(entry.key)}
+                className={cn("min-h-7 py-1 sm:text-xs", isSelected && "font-medium")}
+              >
+                <span
+                  aria-hidden="true"
+                  className={cn("inline-block size-3 rounded-full", entry.dotClass)}
+                />
+                <span className="flex-1">{entry.label}</span>
+              </MenuItem>
+            );
+          })}
+        </MenuGroup>
+      </MenuPopup>
+    </Menu>
+  );
+});
+
 function buildThreadJumpLabelMap(input: {
   keybindings: ReturnType<typeof useServerKeybindings>;
   platform: string;
@@ -763,6 +874,12 @@ interface SidebarProjectThreadListProps {
   openPrLink: (event: React.MouseEvent<HTMLElement>, prUrl: string) => void;
   expandThreadListForProject: (projectKey: string) => void;
   collapseThreadListForProject: (projectKey: string) => void;
+  /**
+   * When true, hides the vertical guide line on the left of the thread list.
+   * Used to declutter the sidebar when project tints provide their own
+   * grouping cue.
+   */
+  hideThreadListBorder: boolean;
 }
 
 const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
@@ -802,6 +919,7 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
     openPrLink,
     expandThreadListForProject,
     collapseThreadListForProject,
+    hideThreadListBorder,
   } = props;
   const showMoreButtonRender = useMemo(() => <button type="button" />, []);
   const showLessButtonRender = useMemo(() => <button type="button" />, []);
@@ -809,7 +927,10 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
   return (
     <SidebarMenuSub
       ref={attachThreadListAutoAnimateRef}
-      className="mx-1 my-0 w-full translate-x-0 gap-0.5 overflow-hidden px-1.5 py-0"
+      className={cn(
+        "mx-1 my-0 w-full translate-x-0 gap-0.5 overflow-hidden px-1.5 py-0",
+        hideThreadListBorder && "border-l-0",
+      )}
     >
       {shouldShowThreadPanel && showEmptyThreadState ? (
         <SidebarMenuSubItem className="w-full" data-thread-selection-safe>
@@ -908,6 +1029,13 @@ interface SidebarProjectItemProps {
   suppressProjectClickForContextMenuRef: React.RefObject<boolean>;
   isManualProjectSorting: boolean;
   dragHandleProps: SortableProjectHandleProps | null;
+  /** Resolved color for this group, or null when colorizing is disabled. */
+  colorIdentity: SidebarProjectColorIdentity | null;
+  /**
+   * Called when the user picks a color from this project's swatch menu.
+   * `color` is `null` for "Auto" (clears the override).
+   */
+  onColorSelect: (overrideKey: string, color: SidebarProjectColor | null) => void;
 }
 
 const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjectItemProps) {
@@ -928,6 +1056,8 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
     suppressProjectClickForContextMenuRef,
     isManualProjectSorting,
     dragHandleProps,
+    colorIdentity,
+    onColorSelect,
   } = props;
   const threadSortOrder = useSettings<SidebarThreadSortOrder>(
     (settings) => settings.sidebarThreadSortOrder,
@@ -1900,6 +2030,19 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
     updateSettings,
   ]);
 
+  // Per-row wrapper around the parent's stable `onColorSelect`. Depending on
+  // `overrideKey` (a string) instead of `colorIdentity` (an object reference
+  // that changes every parent render) keeps this callback stable across
+  // unrelated re-renders, so the memoized ProjectColorDot doesn't churn.
+  const colorOverrideKey = colorIdentity?.overrideKey;
+  const handleColorSelect = useCallback(
+    (color: SidebarProjectColor | null) => {
+      if (!colorOverrideKey) return;
+      onColorSelect(colorOverrideKey, color);
+    },
+    [colorOverrideKey, onColorSelect],
+  );
+
   const handleThreadContextMenu = useCallback(
     async (threadRef: ScopedThreadRef, position: { x: number; y: number }) => {
       const api = readLocalApi();
@@ -2050,6 +2193,21 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
             </TooltipPopup>
           </Tooltip>
         )}
+        {colorIdentity ? (
+          <ProjectColorDot
+            className={cn(
+              "absolute top-1 right-7",
+              // On narrow viewports the cloud badge for remote-only projects
+              // moves from right-1.5 to right-7 (where it stays visible even on
+              // hover), so shift the color dot one slot further left to avoid
+              // overlapping it.
+              project.environmentPresence === "remote-only" && "max-sm:right-12",
+            )}
+            identity={colorIdentity}
+            projectName={project.displayName}
+            onSelect={handleColorSelect}
+          />
+        ) : null}
         <Tooltip>
           <TooltipTrigger
             render={
@@ -2106,6 +2264,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
         openPrLink={openPrLink}
         expandThreadListForProject={expandThreadListForProject}
         collapseThreadListForProject={collapseThreadListForProject}
+        hideThreadListBorder={colorIdentity !== null}
       />
 
       <Dialog
@@ -2230,8 +2389,12 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
 });
 
 const SidebarProjectListRow = memo(function SidebarProjectListRow(props: SidebarProjectItemProps) {
+  // The `p-1` is intentionally only applied alongside the tint: it gives the
+  // colored block uniform breathing room around the project header. Without a
+  // tint there's nothing to "pad", so the layout stays compact.
+  const tintClass = props.colorIdentity?.palette.tintClass;
   return (
-    <SidebarMenuItem className="rounded-md">
+    <SidebarMenuItem className={cn("rounded-md", tintClass, tintClass && "p-1")}>
       <SidebarProjectItem {...props} />
     </SidebarMenuItem>
   );
@@ -2410,10 +2573,12 @@ function ProjectSortMenu({
 function SortableProjectItem({
   projectId,
   disabled = false,
+  colorIdentity,
   children,
 }: {
   projectId: string;
   disabled?: boolean;
+  colorIdentity: SidebarProjectColorIdentity | null;
   children: (handleProps: SortableProjectHandleProps) => React.ReactNode;
 }) {
   const {
@@ -2426,6 +2591,7 @@ function SortableProjectItem({
     isDragging,
     isOver,
   } = useSortable({ id: projectId, disabled });
+  const tintClass = colorIdentity?.palette.tintClass;
   return (
     <li
       ref={setNodeRef}
@@ -2433,9 +2599,13 @@ function SortableProjectItem({
         transform: CSS.Translate.toString(transform),
         transition,
       }}
-      className={`group/menu-item relative rounded-md ${
-        isDragging ? "z-20 opacity-80" : ""
-      } ${isOver && !isDragging ? "ring-1 ring-primary/40" : ""}`}
+      className={cn(
+        "group/menu-item relative rounded-md",
+        tintClass,
+        tintClass && "p-1",
+        isDragging && "z-20 opacity-80",
+        isOver && !isDragging && "ring-1 ring-primary/40",
+      )}
       data-sidebar="menu-item"
       data-slot="sidebar-menu-item"
     >
@@ -2552,6 +2722,18 @@ interface SidebarProjectsContentProps {
   suppressProjectClickForContextMenuRef: React.RefObject<boolean>;
   attachProjectListAutoAnimateRef: (node: HTMLElement | null) => void;
   projectsLength: number;
+  /**
+   * Per-project color identity, indexed by the snapshot's `projectKey`. The
+   * map is empty when the colorizing setting is off, in which case neither
+   * the tint nor the color dot are rendered.
+   */
+  projectColorByKey: ReadonlyMap<string, SidebarProjectColorIdentity>;
+  /**
+   * Persists (or clears) a per-project color override. Stable callback —
+   * defined once at the Sidebar root so individual rows don't have to
+   * subscribe to the override map themselves.
+   */
+  onProjectColorSelect: (overrideKey: string, color: SidebarProjectColor | null) => void;
 }
 
 const SidebarProjectsContent = memo(function SidebarProjectsContent(
@@ -2593,6 +2775,8 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
     suppressProjectClickForContextMenuRef,
     attachProjectListAutoAnimateRef,
     projectsLength,
+    projectColorByKey,
+    onProjectColorSelect,
   } = props;
 
   const handleProjectSortOrderChange = useCallback(
@@ -2717,34 +2901,45 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
                 items={sortedProjects.map((project) => project.projectKey)}
                 strategy={verticalListSortingStrategy}
               >
-                {sortedProjects.map((project) => (
-                  <SortableProjectItem key={project.projectKey} projectId={project.projectKey}>
-                    {(dragHandleProps) => (
-                      <SidebarProjectItem
-                        project={project}
-                        isThreadListExpanded={expandedThreadListsByProject.has(project.projectKey)}
-                        activeRouteThreadKey={
-                          activeRouteProjectKey === project.projectKey ? routeThreadKey : null
-                        }
-                        newThreadShortcutLabel={newThreadShortcutLabel}
-                        handleNewThread={handleNewThread}
-                        archiveThread={archiveThread}
-                        deleteThread={deleteThread}
-                        threadJumpLabelByKey={threadJumpLabelByKey}
-                        attachThreadListAutoAnimateRef={attachThreadListAutoAnimateRef}
-                        expandThreadListForProject={expandThreadListForProject}
-                        collapseThreadListForProject={collapseThreadListForProject}
-                        dragInProgressRef={dragInProgressRef}
-                        suppressProjectClickAfterDragRef={suppressProjectClickAfterDragRef}
-                        suppressProjectClickForContextMenuRef={
-                          suppressProjectClickForContextMenuRef
-                        }
-                        isManualProjectSorting={isManualProjectSorting}
-                        dragHandleProps={dragHandleProps}
-                      />
-                    )}
-                  </SortableProjectItem>
-                ))}
+                {sortedProjects.map((project) => {
+                  const colorIdentity = projectColorByKey.get(project.projectKey) ?? null;
+                  return (
+                    <SortableProjectItem
+                      key={project.projectKey}
+                      projectId={project.projectKey}
+                      colorIdentity={colorIdentity}
+                    >
+                      {(dragHandleProps) => (
+                        <SidebarProjectItem
+                          project={project}
+                          isThreadListExpanded={expandedThreadListsByProject.has(
+                            project.projectKey,
+                          )}
+                          activeRouteThreadKey={
+                            activeRouteProjectKey === project.projectKey ? routeThreadKey : null
+                          }
+                          newThreadShortcutLabel={newThreadShortcutLabel}
+                          handleNewThread={handleNewThread}
+                          archiveThread={archiveThread}
+                          deleteThread={deleteThread}
+                          threadJumpLabelByKey={threadJumpLabelByKey}
+                          attachThreadListAutoAnimateRef={attachThreadListAutoAnimateRef}
+                          expandThreadListForProject={expandThreadListForProject}
+                          collapseThreadListForProject={collapseThreadListForProject}
+                          dragInProgressRef={dragInProgressRef}
+                          suppressProjectClickAfterDragRef={suppressProjectClickAfterDragRef}
+                          suppressProjectClickForContextMenuRef={
+                            suppressProjectClickForContextMenuRef
+                          }
+                          isManualProjectSorting={isManualProjectSorting}
+                          dragHandleProps={dragHandleProps}
+                          colorIdentity={colorIdentity}
+                          onColorSelect={onProjectColorSelect}
+                        />
+                      )}
+                    </SortableProjectItem>
+                  );
+                })}
               </SortableContext>
             </SidebarMenu>
           </DndContext>
@@ -2771,6 +2966,8 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
                 suppressProjectClickForContextMenuRef={suppressProjectClickForContextMenuRef}
                 isManualProjectSorting={isManualProjectSorting}
                 dragHandleProps={null}
+                colorIdentity={projectColorByKey.get(project.projectKey) ?? null}
+                onColorSelect={onProjectColorSelect}
               />
             ))}
           </SidebarMenu>
@@ -2800,6 +2997,8 @@ export default function Sidebar() {
   const sidebarProjectGroupingMode = useSettings((s) => s.sidebarProjectGroupingMode);
   const projectGroupingSettings = useSettings(selectProjectGroupingSettings);
   const sidebarThreadPreviewCount = useSettings((s) => s.sidebarThreadPreviewCount);
+  const sidebarProjectColorizing = useSettings((s) => s.sidebarProjectColorizing);
+  const sidebarProjectColorOverrides = useSettings((s) => s.sidebarProjectColorOverrides);
   const { updateSettings } = useUpdateSettings();
   const { handleNewThread } = useNewThreadHandler();
   const { archiveThread, deleteThread } = useThreadActions();
@@ -3070,6 +3269,42 @@ export default function Sidebar() {
     visibleThreads,
   ]);
   const isManualProjectSorting = sidebarProjectSortOrder === "manual";
+  // Resolve each visible project group's color identity once per render. Stays
+  // empty when colorizing is disabled so consumers can use map size as the
+  // toggle and avoid touching identity logic at all. The builder spreads auto
+  // colors across the palette so adjacent projects don't end up sharing a hue
+  // until the palette is exhausted.
+  const projectColorByKey = useMemo<ReadonlyMap<string, SidebarProjectColorIdentity>>(() => {
+    if (!sidebarProjectColorizing) {
+      // Reuse the module-level empty map so the prop reference stays stable
+      // across renders for users who never enable colorizing.
+      return EMPTY_SIDEBAR_PROJECT_COLOR_MAP;
+    }
+    return buildSidebarProjectColorMap({
+      projects: sortedProjects.map((project) => ({
+        projectKey: project.projectKey,
+        overrideKey: deriveProjectGroupingOverrideKey(project),
+      })),
+      overrides: sidebarProjectColorOverrides,
+    });
+  }, [sidebarProjectColorizing, sidebarProjectColorOverrides, sortedProjects]);
+  // Stable color-select handler shared across all rows. Reading the latest
+  // override map through a ref keeps the callback identity fixed, so flipping
+  // one project's color doesn't re-render every other row's color picker.
+  const sidebarProjectColorOverridesRef = useRef(sidebarProjectColorOverrides);
+  sidebarProjectColorOverridesRef.current = sidebarProjectColorOverrides;
+  const handleProjectColorSelect = useCallback(
+    (overrideKey: string, color: SidebarProjectColor | null) => {
+      const next = { ...sidebarProjectColorOverridesRef.current };
+      if (color === null) {
+        delete next[overrideKey];
+      } else {
+        next[overrideKey] = color;
+      }
+      updateSettings({ sidebarProjectColorOverrides: next });
+    },
+    [updateSettings],
+  );
   const visibleSidebarThreadKeys = useMemo(
     () =>
       sortedProjects.flatMap((project) => {
@@ -3456,6 +3691,8 @@ export default function Sidebar() {
             suppressProjectClickForContextMenuRef={suppressProjectClickForContextMenuRef}
             attachProjectListAutoAnimateRef={attachProjectListAutoAnimateRef}
             projectsLength={projects.length}
+            projectColorByKey={projectColorByKey}
+            onProjectColorSelect={handleProjectColorSelect}
           />
 
           <SidebarSeparator />
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index e7f21da4809..9336a9d4490 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -402,6 +402,13 @@ export function useSettingsRestore(onRestored?: () => void) {
       ...(settings.diffIgnoreWhitespace !== DEFAULT_UNIFIED_SETTINGS.diffIgnoreWhitespace
         ? ["Diff whitespace changes"]
         : []),
+      // Either the toggle is non-default, or the user has picked custom colors
+      // for one or more projects — both flow through Restore defaults so the
+      // single label covers both pieces of state.
+      ...(settings.sidebarProjectColorizing !== DEFAULT_UNIFIED_SETTINGS.sidebarProjectColorizing ||
+      Object.keys(settings.sidebarProjectColorOverrides).length > 0
+        ? ["Sidebar project colors"]
+        : []),
       ...(settings.autoOpenPlanSidebar !== DEFAULT_UNIFIED_SETTINGS.autoOpenPlanSidebar
         ? ["Auto-open task panel"]
         : []),
@@ -438,6 +445,8 @@ export function useSettingsRestore(onRestored?: () => void) {
       settings.automaticGitFetchInterval,
       settings.enableAssistantStreaming,
       settings.sidebarThreadPreviewCount,
+      settings.sidebarProjectColorizing,
+      settings.sidebarProjectColorOverrides,
       settings.timestampFormat,
       theme,
     ],
@@ -642,6 +651,36 @@ export function GeneralSettingsPanel() {
           }
         />
 
+        <SettingsRow
+          title="Sidebar project colors"
+          description="Tint each project with its own muted color and show a color dot you can click to change it."
+          resetAction={
+            settings.sidebarProjectColorizing !==
+              DEFAULT_UNIFIED_SETTINGS.sidebarProjectColorizing ||
+            Object.keys(settings.sidebarProjectColorOverrides).length > 0 ? (
+              <SettingResetButton
+                label="sidebar project colors"
+                onClick={() =>
+                  updateSettings({
+                    sidebarProjectColorizing: DEFAULT_UNIFIED_SETTINGS.sidebarProjectColorizing,
+                    sidebarProjectColorOverrides:
+                      DEFAULT_UNIFIED_SETTINGS.sidebarProjectColorOverrides,
+                  })
+                }
+              />
+            ) : null
+          }
+          control={
+            <Switch
+              checked={settings.sidebarProjectColorizing}
+              onCheckedChange={(checked) =>
+                updateSettings({ sidebarProjectColorizing: Boolean(checked) })
+              }
+              aria-label="Color each sidebar project group"
+            />
+          }
+        />
+
         <SettingsRow
           title="Assistant output"
           description="Show token-by-token output while a response is in progress."
diff --git a/apps/web/src/localApi.test.ts b/apps/web/src/localApi.test.ts
index 8bfb0e599ad..b321aff5654 100644
--- a/apps/web/src/localApi.test.ts
+++ b/apps/web/src/localApi.test.ts
@@ -611,6 +611,10 @@ describe("wsApi", () => {
       sidebarProjectGroupingOverrides: {
         "environment-local:/tmp/project": "separate" as const,
       },
+      sidebarProjectColorizing: false,
+      sidebarProjectColorOverrides: {
+        "environment-local:/tmp/project": "indigo" as const,
+      },
       sidebarProjectSortOrder: "manual" as const,
       sidebarThreadSortOrder: "created_at" as const,
       sidebarThreadPreviewCount: 6,
@@ -674,6 +678,10 @@ describe("wsApi", () => {
       sidebarProjectGroupingOverrides: {
         "environment-local:/tmp/project": "separate" as const,
       },
+      sidebarProjectColorizing: false,
+      sidebarProjectColorOverrides: {
+        "environment-local:/tmp/project": "indigo" as const,
+      },
       sidebarProjectSortOrder: "manual" as const,
       sidebarThreadSortOrder: "created_at" as const,
       sidebarThreadPreviewCount: 6,
diff --git a/apps/web/src/sidebarProjectColors.test.ts b/apps/web/src/sidebarProjectColors.test.ts
new file mode 100644
index 00000000000..ededc1481b8
--- /dev/null
+++ b/apps/web/src/sidebarProjectColors.test.ts
@@ -0,0 +1,137 @@
+import { describe, expect, it } from "vitest";
+import type { SidebarProjectColor } from "@t3tools/contracts/settings";
+import { buildSidebarProjectColorMap, SIDEBAR_PROJECT_COLOR_PALETTE } from "./sidebarProjectColors";
+
+/**
+ * Helper: returns the auto color the builder would pick for `seed` if it were
+ * the only project in the visible set. Lets tests construct collision
+ * scenarios without depending on the builder's internal hash directly.
+ */
+function autoColorForSeed(seed: string): SidebarProjectColor {
+  const map = buildSidebarProjectColorMap({
+    projects: [{ projectKey: seed, overrideKey: seed }],
+    overrides: {},
+  });
+  return map.get(seed)!.palette.key;
+}
+
+describe("buildSidebarProjectColorMap", () => {
+  it("returns an empty map when no projects are passed", () => {
+    expect(buildSidebarProjectColorMap({ projects: [], overrides: {} }).size).toBe(0);
+  });
+
+  it("gives each project a distinct auto color when the palette has room", () => {
+    const projects = SIDEBAR_PROJECT_COLOR_PALETTE.map((_, index) => ({
+      projectKey: `key-${index}`,
+      overrideKey: `override-${index}`,
+    }));
+    const map = buildSidebarProjectColorMap({ projects, overrides: {} });
+    const keys = Array.from(map.values()).map((identity) => identity.palette.key);
+    expect(new Set(keys).size).toBe(SIDEBAR_PROJECT_COLOR_PALETTE.length);
+  });
+
+  it("spreads similar seeds across multiple palette entries", () => {
+    const projects = Array.from({ length: 24 }, (_, index) => ({
+      projectKey: `key-${index}`,
+      overrideKey: `env:/tmp/project-${index}`,
+    }));
+    const map = buildSidebarProjectColorMap({ projects, overrides: {} });
+    const usedKeys = new Set(Array.from(map.values()).map((identity) => identity.palette.key));
+    // Beyond the first 10 projects the palette is full, but every slot should
+    // be in use — that's the strongest spread guarantee the builder makes.
+    expect(usedKeys.size).toBe(SIDEBAR_PROJECT_COLOR_PALETTE.length);
+  });
+
+  it("walks past colors already claimed by overrides", () => {
+    // Find an override-key whose auto color collides with the override below —
+    // that's the case where naive resolution would assign the same hue twice.
+    const targetColor: SidebarProjectColor = "rose";
+    const collidingSeed = (() => {
+      for (let i = 0; i < 1000; i++) {
+        const seed = `seed-${i}`;
+        if (autoColorForSeed(seed) === targetColor) {
+          return seed;
+        }
+      }
+      throw new Error("Failed to find a colliding seed for the test fixture");
+    })();
+
+    const map = buildSidebarProjectColorMap({
+      projects: [
+        { projectKey: "with-override", overrideKey: "override-key" },
+        { projectKey: "auto", overrideKey: collidingSeed },
+      ],
+      overrides: {
+        "override-key": targetColor,
+      },
+    });
+
+    expect(map.get("with-override")?.palette.key).toBe(targetColor);
+    expect(map.get("auto")?.palette.key).not.toBe(targetColor);
+  });
+
+  it("gives 11 projects 10 distinct colors plus one unavoidable repeat", () => {
+    const projects = Array.from({ length: SIDEBAR_PROJECT_COLOR_PALETTE.length + 1 }, (_, i) => ({
+      projectKey: `key-${i}`,
+      overrideKey: `override-${i}`,
+    }));
+    const map = buildSidebarProjectColorMap({ projects, overrides: {} });
+    const keys = Array.from(map.values()).map((identity) => identity.palette.key);
+    expect(keys).toHaveLength(SIDEBAR_PROJECT_COLOR_PALETTE.length + 1);
+    expect(new Set(keys).size).toBe(SIDEBAR_PROJECT_COLOR_PALETTE.length);
+  });
+
+  it("preserves an existing project's color when a later-sorted project is added", () => {
+    const before = buildSidebarProjectColorMap({
+      projects: [{ projectKey: "alpha", overrideKey: "aaa" }],
+      overrides: {},
+    });
+    const after = buildSidebarProjectColorMap({
+      projects: [
+        { projectKey: "alpha", overrideKey: "aaa" },
+        { projectKey: "beta", overrideKey: "zzz" },
+      ],
+      overrides: {},
+    });
+    // The earlier-sorted overrideKey ("aaa") gets first pick in both runs, so
+    // its color must not change when "zzz" is added.
+    expect(after.get("alpha")?.palette.key).toBe(before.get("alpha")?.palette.key);
+  });
+
+  it("processes auto-colors in overrideKey order regardless of input order", () => {
+    const aRun = buildSidebarProjectColorMap({
+      projects: [
+        { projectKey: "a", overrideKey: "aaa" },
+        { projectKey: "b", overrideKey: "zzz" },
+      ],
+      overrides: {},
+    });
+    const bRun = buildSidebarProjectColorMap({
+      projects: [
+        { projectKey: "b", overrideKey: "zzz" },
+        { projectKey: "a", overrideKey: "aaa" },
+      ],
+      overrides: {},
+    });
+    expect(aRun.get("a")?.palette.key).toBe(bRun.get("a")?.palette.key);
+    expect(aRun.get("b")?.palette.key).toBe(bRun.get("b")?.palette.key);
+  });
+
+  it("records the explicit override on the identity entry", () => {
+    const map = buildSidebarProjectColorMap({
+      projects: [{ projectKey: "p", overrideKey: "k" }],
+      overrides: { k: "indigo" },
+    });
+    const identity = map.get("p");
+    expect(identity?.override).toBe("indigo");
+    expect(identity?.palette.key).toBe("indigo");
+  });
+
+  it("leaves auto entries with undefined override", () => {
+    const map = buildSidebarProjectColorMap({
+      projects: [{ projectKey: "p", overrideKey: "k" }],
+      overrides: {},
+    });
+    expect(map.get("p")?.override).toBeUndefined();
+  });
+});
diff --git a/apps/web/src/sidebarProjectColors.ts b/apps/web/src/sidebarProjectColors.ts
new file mode 100644
index 00000000000..33eaf6b4ec8
--- /dev/null
+++ b/apps/web/src/sidebarProjectColors.ts
@@ -0,0 +1,202 @@
+import { type SidebarProjectColor } from "@t3tools/contracts/settings";
+
+/**
+ * Tailwind classes used to render a sidebar project's color identity. The
+ * palette keys are persisted as `SidebarProjectColor` literals in client
+ * settings; this module is the single mapping point from those keys to
+ * concrete classes used by the sidebar UI.
+ *
+ * - `tintClass`: Applied to the group's `<li>` wrapper. Uses very low alpha
+ *   so the color reads as a faint wash, not a card surface.
+ * - `dotClass`: Applied to the always-visible color dot next to the new-thread
+ *   button (and the swatches in the picker). Renders as a transparent
+ *   interior with a saturated hue-matched ring, so the dot's interior shows
+ *   whatever sits behind it (the tinted row, the popover surface, etc.) and
+ *   only the ring carries the color identity.
+ *
+ * The class strings are written as literals so Tailwind's JIT can extract them.
+ */
+export interface SidebarProjectColorClasses {
+  readonly key: SidebarProjectColor;
+  readonly label: string;
+  readonly tintClass: string;
+  readonly dotClass: string;
+}
+
+export const SIDEBAR_PROJECT_COLOR_PALETTE: readonly SidebarProjectColorClasses[] = [
+  {
+    key: "slate",
+    label: "Slate",
+    tintClass: "bg-slate-500/8 dark:bg-slate-400/10",
+    dotClass: "ring-2 ring-inset ring-slate-500/70 dark:ring-slate-400/70",
+  },
+  {
+    key: "rose",
+    label: "Rose",
+    tintClass: "bg-rose-500/8 dark:bg-rose-400/10",
+    dotClass: "ring-2 ring-inset ring-rose-500/70 dark:ring-rose-400/70",
+  },
+  {
+    key: "orange",
+    label: "Orange",
+    tintClass: "bg-orange-500/8 dark:bg-orange-400/10",
+    dotClass: "ring-2 ring-inset ring-orange-500/70 dark:ring-orange-400/70",
+  },
+  {
+    key: "amber",
+    label: "Amber",
+    tintClass: "bg-amber-500/8 dark:bg-amber-400/10",
+    dotClass: "ring-2 ring-inset ring-amber-500/70 dark:ring-amber-400/70",
+  },
+  {
+    key: "emerald",
+    label: "Emerald",
+    tintClass: "bg-emerald-500/8 dark:bg-emerald-400/10",
+    dotClass: "ring-2 ring-inset ring-emerald-500/70 dark:ring-emerald-400/70",
+  },
+  {
+    key: "teal",
+    label: "Teal",
+    tintClass: "bg-teal-500/8 dark:bg-teal-400/10",
+    dotClass: "ring-2 ring-inset ring-teal-500/70 dark:ring-teal-400/70",
+  },
+  {
+    key: "sky",
+    label: "Sky",
+    tintClass: "bg-sky-500/8 dark:bg-sky-400/10",
+    dotClass: "ring-2 ring-inset ring-sky-500/70 dark:ring-sky-400/70",
+  },
+  {
+    key: "indigo",
+    label: "Indigo",
+    tintClass: "bg-indigo-500/8 dark:bg-indigo-400/10",
+    dotClass: "ring-2 ring-inset ring-indigo-500/70 dark:ring-indigo-400/70",
+  },
+  {
+    key: "violet",
+    label: "Violet",
+    tintClass: "bg-violet-500/8 dark:bg-violet-400/10",
+    dotClass: "ring-2 ring-inset ring-violet-500/70 dark:ring-violet-400/70",
+  },
+  {
+    key: "pink",
+    label: "Pink",
+    tintClass: "bg-pink-500/8 dark:bg-pink-400/10",
+    dotClass: "ring-2 ring-inset ring-pink-500/70 dark:ring-pink-400/70",
+  },
+];
+
+const PALETTE_BY_KEY = new Map<SidebarProjectColor, SidebarProjectColorClasses>(
+  SIDEBAR_PROJECT_COLOR_PALETTE.map((entry) => [entry.key, entry] as const),
+);
+
+/**
+ * 32-bit FNV-1a hash. Cheap, deterministic, and good enough for spreading
+ * project keys across the palette without obvious clustering.
+ */
+function hashStringToUint32(value: string): number {
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < value.length; i++) {
+    hash ^= value.charCodeAt(i);
+    // 32-bit FNV prime multiply (Math.imul keeps the result inside int32).
+    hash = Math.imul(hash, 0x01000193);
+  }
+  return hash >>> 0;
+}
+
+/**
+ * Per-project color identity passed through the sidebar render tree. Carries
+ * everything the row needs to paint the tint + dot and update overrides.
+ */
+export interface SidebarProjectColorIdentity {
+  /** Stable key (physical project key) under which the override is stored. */
+  readonly overrideKey: string;
+  /** Resolved palette entry — auto if no override, else the user's pick. */
+  readonly palette: SidebarProjectColorClasses;
+  /** The user's explicit override key, or undefined when on auto. */
+  readonly override: SidebarProjectColor | undefined;
+}
+
+/**
+ * Shared empty map returned by callers when colorizing is disabled. Hoisted so
+ * consumers can pass a stable reference to memoized children (e.g.
+ * SidebarProjectsContent) without rebuilding an empty Map every render.
+ */
+export const EMPTY_SIDEBAR_PROJECT_COLOR_MAP: ReadonlyMap<string, SidebarProjectColorIdentity> =
+  new Map();
+
+export interface SidebarProjectColorInput {
+  /** UI-scoped key the sidebar uses to look the entry back up. */
+  readonly projectKey: string;
+  /** Stable identity used both for the override map and the auto-color hash. */
+  readonly overrideKey: string;
+}
+
+/**
+ * Builds a color identity for every visible project group, with collision
+ * avoidance across the auto-colored set.
+ *
+ * Algorithm:
+ *  1. Pass 1 — claim every override's color before assigning auto colors so
+ *     auto-projects never reuse a slot the user explicitly picked.
+ *  2. Pass 2 — sort auto-projects by `overrideKey` (a stable, UI-independent
+ *     order) and, for each, start at the FNV-1a hash position and walk
+ *     forward through the palette until an unused slot is found. Sorting by
+ *     `overrideKey` rather than by sidebar order means changing UI sort or
+ *     grouping doesn't reshuffle established colors.
+ *
+ * If more than `palette.length` projects need auto colors, the overflow falls
+ * back to the bare hash position (collisions are unavoidable past 10).
+ */
+export function buildSidebarProjectColorMap(input: {
+  projects: ReadonlyArray<SidebarProjectColorInput>;
+  overrides: Readonly<Record<string, SidebarProjectColor>>;
+}): Map<string, SidebarProjectColorIdentity> {
+  const palette = SIDEBAR_PROJECT_COLOR_PALETTE;
+  const result = new Map<string, SidebarProjectColorIdentity>();
+  const usedKeys = new Set<SidebarProjectColor>();
+
+  // Pass 1: explicit overrides claim their slot first.
+  const autoCandidates: SidebarProjectColorInput[] = [];
+  for (const project of input.projects) {
+    const override = input.overrides[project.overrideKey];
+    const entry = override ? PALETTE_BY_KEY.get(override) : undefined;
+    if (entry && override) {
+      result.set(project.projectKey, {
+        overrideKey: project.overrideKey,
+        palette: entry,
+        override,
+      });
+      usedKeys.add(override);
+    } else {
+      autoCandidates.push(project);
+    }
+  }
+
+  // Pass 2: auto-color the rest in stable identity order so adding/removing
+  // projects only perturbs colors that genuinely need to move.
+  const sortedAuto = autoCandidates.toSorted((left, right) =>
+    left.overrideKey.localeCompare(right.overrideKey),
+  );
+  for (const project of sortedAuto) {
+    const startIndex = hashStringToUint32(project.overrideKey) % palette.length;
+    let chosen = palette[startIndex]!;
+    if (usedKeys.size < palette.length) {
+      for (let step = 0; step < palette.length; step++) {
+        const candidate = palette[(startIndex + step) % palette.length]!;
+        if (!usedKeys.has(candidate.key)) {
+          chosen = candidate;
+          break;
+        }
+      }
+    }
+    result.set(project.projectKey, {
+      overrideKey: project.overrideKey,
+      palette: chosen,
+      override: undefined,
+    });
+    usedKeys.add(chosen.key);
+  }
+
+  return result;
+}
diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts
index 2d115eed98e..9880492447b 100644
--- a/packages/contracts/src/settings.ts
+++ b/packages/contracts/src/settings.ts
@@ -39,6 +39,24 @@ export const SidebarThreadPreviewCount = Schema.Int.check(
 export type SidebarThreadPreviewCount = typeof SidebarThreadPreviewCount.Type;
 export const DEFAULT_SIDEBAR_THREAD_PREVIEW_COUNT: SidebarThreadPreviewCount = 6;
 
+// Curated palette of muted hues used to tint sidebar project groups when
+// "Sidebar project colors" is enabled. The web app maps these literal keys to
+// concrete Tailwind classes; keeping the literal set in `contracts` keeps the
+// persisted override values strongly typed across the client/server boundary.
+export const SidebarProjectColor = Schema.Literals([
+  "slate",
+  "rose",
+  "orange",
+  "amber",
+  "emerald",
+  "teal",
+  "sky",
+  "indigo",
+  "violet",
+  "pink",
+]);
+export type SidebarProjectColor = typeof SidebarProjectColor.Type;
+
 export const ClientSettingsSchema = Schema.Struct({
   autoOpenPlanSidebar: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(true))),
   confirmThreadArchive: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))),
@@ -73,6 +91,10 @@ export const ClientSettingsSchema = Schema.Struct({
       modelOrder: Schema.Array(Schema.String).pipe(Schema.withDecodingDefault(Effect.succeed([]))),
     }),
   ).pipe(Schema.withDecodingDefault(Effect.succeed({}))),
+  sidebarProjectColorizing: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))),
+  sidebarProjectColorOverrides: Schema.Record(TrimmedNonEmptyString, SidebarProjectColor).pipe(
+    Schema.withDecodingDefault(Effect.succeed({})),
+  ),
   sidebarProjectGroupingMode: SidebarProjectGroupingMode.pipe(
     Schema.withDecodingDefault(Effect.succeed(DEFAULT_SIDEBAR_PROJECT_GROUPING_MODE)),
   ),
@@ -501,6 +523,10 @@ export const ClientSettingsPatch = Schema.Struct({
       }),
     ),
   ),
+  sidebarProjectColorizing: Schema.optionalKey(Schema.Boolean),
+  sidebarProjectColorOverrides: Schema.optionalKey(
+    Schema.Record(TrimmedNonEmptyString, SidebarProjectColor),
+  ),
   sidebarProjectGroupingMode: Schema.optionalKey(SidebarProjectGroupingMode),
   sidebarProjectGroupingOverrides: Schema.optionalKey(
     Schema.Record(TrimmedNonEmptyString, SidebarProjectGroupingMode),