[autopilot-big] Image Color Extractor + Newsletter 142-145 + 2 collections + 3 guides — 2026-03-23

New feature: Image Color Extractor (/image-palette/)
- Full route at app/image-palette/page.tsx with metadata, structured data, breadcrumbs
- Component src/components/image-palette-page.tsx (~300 lines, pure client-side)
- Canvas API for pixel sampling — no image uploads, fully private
- Quantize-then-k-means color extraction algorithm with weighted RGB distance
- Adjustable color count (4, 5, 6, 7, 8, 10, or 12 colors)
- Each extracted color matched to closest ColorArchive color by perceptual distance
- Per-color detail cards: hex, RGB, HSL, percentage area, archive match link
- Export in HEX, RGB, HSL, CSS custom properties, or JSON (W3C token format)
- One-click copy for individual colors or full export
- 4 sample images (no upload required to try the tool)
- "How it works" section explaining the algorithm
- Related tools cross-links
- Added to site-header nav (tools group), tools page, sitemap, i18n (EN + ZH)

Content updates:
- Newsletter issues: 4 new issues (142-145), total now 146
  - sep-2028: Extracting brand color from photography (dominant vs anchor, four-scene test)
  - sep-2028: Color in data visualization (four semantic roles, perceptual uniformity)
  - sep-2028: Print color management (CMYK gamut, ink limits, Pantone, 6-value spec)
  - oct-2028: Color systems at scale (token tiers, change frequency, drift detection)
- Collections: 2 new, total now 59
  - data-dashboard: cobalt, teal, amber, crimson, slate — perceptually balanced dataviz palette
  - film-neutral: warm parchment, film beige, shadow gray-brown — analog photography register
- SEO guides: 3 new (extraGuides14), total now 100
  - extracting-color-from-photography-guide
  - color-for-data-visualization-guide
  - image-color-extraction-tools-guide

Files changed (9):
- app/image-palette/page.tsx (new)
- src/components/image-palette-page.tsx (new, ~300 lines)
- src/components/site-header.tsx (+currentPath type, +nav item)
- src/components/tools-page.tsx (+image-palette tool card)
- src/lib/i18n.ts (+nav.imagePalette, +tools.imagePalette.name/desc EN+ZH)
- app/sitemap.ts (+/image-palette/ route)
- src/data/newsletter-issues.json (4 new issues, now 146)
- src/lib/collections.ts (+data-dashboard, +film-neutral, now 59)
- src/lib/guides.ts (+3 guides in extraGuides14, now 100)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: JasonYeYuhe

app/image-palette/page.tsx

@@ -0,0 +1,55 @@
+import type { Metadata } from "next";
+import { SiteHeader } from "@/src/components/site-header";
+import { StructuredDataScript } from "@/src/components/structured-data-script";
+import { ImagePalettePage } from "@/src/components/image-palette-page";
+
+export const metadata: Metadata = {
+  title: { absolute: "Image Color Extractor — Extract Palette from Any Photo | ColorArchive" },
+  description:
+    "Upload any image to instantly extract its dominant color palette. Get hex, RGB, and HSL values. Find the closest ColorArchive match for each color. Free, private, runs in your browser.",
+  alternates: { canonical: "/image-palette/" },
+  openGraph: {
+    title: "Image Color Extractor — Extract Palette from Any Photo | ColorArchive",
+    description:
+      "Extract dominant colors from any image. Get hex/RGB/HSL values and find matching ColorArchive colors. Free and private — no uploads.",
+    images: ["https://colorarchive.me/og-image-v1.png"],
+  },
+  twitter: {
+    title: "Image Color Extractor | ColorArchive",
+    description:
+      "Extract a color palette from any photo or design. Find the closest ColorArchive match for each dominant color.",
+    images: ["https://colorarchive.me/og-image-v1.png"],
+  },
+};
+
+const structuredData = {
+  "@context": "https://schema.org",
+  "@type": "WebApplication",
+  name: "Image Color Extractor",
+  applicationCategory: "DesignApplication",
+  operatingSystem: "Any",
+  offers: { "@type": "Offer", price: "0", priceCurrency: "USD" },
+  url: "https://colorarchive.me/image-palette/",
+  description:
+    "Extract the dominant color palette from any image. Get hex, RGB, and HSL values. Find the closest ColorArchive match for each extracted color.",
+};
+
+const breadcrumbData = {
+  "@context": "https://schema.org",
+  "@type": "BreadcrumbList",
+  itemListElement: [
+    { "@type": "ListItem", position: 1, name: "ColorArchive", item: "https://colorarchive.me/" },
+    { "@type": "ListItem", position: 2, name: "Tools", item: "https://colorarchive.me/tools/" },
+    { "@type": "ListItem", position: 3, name: "Image Color Extractor", item: "https://colorarchive.me/image-palette/" },
+  ],
+};
+
+export default function ImagePaletteRoute() {
+  return (
+    <>
+      <SiteHeader currentPath="/image-palette" />
+      <StructuredDataScript data={[structuredData, breadcrumbData]} />
+      <ImagePalettePage />
+    </>
+  );
+}

app/sitemap.ts

@@ -162,6 +162,12 @@ export default function sitemap(): MetadataRoute.Sitemap {
       changeFrequency: "monthly",
       priority: 0.84,
     },
+    {
+      url: "https://colorarchive.me/image-palette/",
+      lastModified: BUILD_DATE,
+      changeFrequency: "monthly",
+      priority: 0.86,
+    },
     {
       url: "https://colorarchive.me/tokens/",
       lastModified: BUILD_DATE,