diff --git a/packages/visx-xychart/src/components/series/private/BaseAreaSeries.tsx b/packages/visx-xychart/src/components/series/private/BaseAreaSeries.tsx
index dae620afb..11a097be3 100644
--- a/packages/visx-xychart/src/components/series/private/BaseAreaSeries.tsx
+++ b/packages/visx-xychart/src/components/series/private/BaseAreaSeries.tsx
@@ -26,6 +26,8 @@ export type BaseAreaSeriesProps<
   renderLine?: boolean;
   /** Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear. */
   curve?: AreaProps<Datum>['curve'];
+  /** Given a datakey, returns its color. Falls back to theme color if unspecified or if a null-ish value is returned. */
+  colorAccessor?: (dataKey: string) => string | undefined | null;
   /** Props to be passed to the Line, if rendered. */
   lineProps?: Omit<
     LinePathProps<Datum> & React.SVGProps<SVGPathElement>,
@@ -38,6 +40,7 @@ export type BaseAreaSeriesProps<
 function BaseAreaSeries<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
   PathComponent = 'path',
   curve,
+  colorAccessor,
   data,
   dataKey,
   lineProps,
@@ -130,7 +133,7 @@ function BaseAreaSeries<XScale extends AxisScale, YScale extends AxisScale, Datu
           <PathComponent
             className="visx-area"
             stroke="transparent"
-            fill={color}
+            fill={colorAccessor?.(dataKey) ?? color}
             strokeLinecap="round" // without this a datum surrounded by nulls will not be visible
             {...areaProps}
             d={path(data) || ''}
@@ -150,7 +153,7 @@ function BaseAreaSeries<XScale extends AxisScale, YScale extends AxisScale, Datu
             <PathComponent
               className="visx-line"
               fill="transparent"
-              stroke={color}
+              stroke={colorAccessor?.(dataKey) ?? color}
               strokeWidth={2}
               pointerEvents="none"
               strokeLinecap="round" // without this a datum surrounded by nulls will not be visible
diff --git a/packages/visx-xychart/test/components/AreaSeries.test.tsx b/packages/visx-xychart/test/components/AreaSeries.test.tsx
index 1ba333a49..a79de33a4 100644
--- a/packages/visx-xychart/test/components/AreaSeries.test.tsx
+++ b/packages/visx-xychart/test/components/AreaSeries.test.tsx
@@ -116,6 +116,18 @@ describe('<AreaSeries />', () => {
       { showTooltip, hideTooltip },
     );
   });
+
+  it('should use colorAccessor if passed', () => {
+    const { container } = render(
+      <DataContext.Provider value={getDataContext(series)}>
+        <svg>
+          <AreaSeries dataKey={series.key} {...series} colorAccessor={(_) => 'banana'} />
+        </svg>
+      </DataContext.Provider>,
+    );
+    expect(container.querySelector('.visx-area')).toHaveAttribute('fill', 'banana');
+    expect(container.querySelector('.visx-line')).toHaveAttribute('stroke', 'banana');
+  });
 });
 
 describe('<AnimatedAreaSeries />', () => {