patternfly
diff --git a/packages/patternfly-4/react-charts/src/components/ChartArea/examples/ChartArea.md b/packages/patternfly-4/react-charts/src/components/ChartArea/examples/ChartArea.md
@@ -132,7 +132,7 @@ import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor } from '@patte
 </div>
 ```
 
-## Multi-color chart with bottom-left aligned legend and responsive container
+## Multi-color (unorderd) chart with bottom-left aligned legend and responsive container
 ```js
 import React from 'react';
 import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor } from '@patternfly/react-charts';
@@ -180,7 +180,7 @@ class MultiColorChart extends React.Component {
               top: 50,
             }}
             maxDomain={{y: 9}}
-            themeColor={ChartThemeColor.multi}
+            themeColor={ChartThemeColor.multiUnordered}
             width={width}
           >
             <ChartAxis />

diff --git a/packages/patternfly-4/react-charts/src/components/ChartBar/examples/ChartBar.md b/packages/patternfly-4/react-charts/src/components/ChartBar/examples/ChartBar.md
@@ -83,7 +83,7 @@ import { Chart, ChartBar, ChartGroup, ChartThemeColor, ChartVoronoiContainer } f
 </div>
 ```
 
-## Multi-color, horizontal bar chart with zoom and bottom-left aligned legend
+## Multi-color (ordered), horizontal bar chart with zoom and bottom-left aligned legend
 ```js
 import React from 'react';
 import { Chart, ChartBar, ChartGroup, ChartThemeColor } from '@patternfly/react-charts';
@@ -104,7 +104,7 @@ import { Chart, ChartBar, ChartGroup, ChartThemeColor } from '@patternfly/react-
         right: 100, // Adjusted to accomodate tooltip
         top: 50
       }}
-      themeColor={ChartThemeColor.multi}
+      themeColor={ChartThemeColor.multiOrdered}
       width={450}
     >
       <ChartAxis />

diff --git a/...ages/patternfly-4/react-charts/src/components/ChartDonut/examples/ChartDonut.md b/...ages/patternfly-4/react-charts/src/components/ChartDonut/examples/ChartDonut.md
@@ -50,7 +50,7 @@ import { ChartDonut } from '@patternfly/react-charts';
 </div>
 ```
 
-## Multi-color donut chart with right aligned legend
+## Multi-color (ordered) donut chart with right aligned legend
 ```js
 import React from 'react';
 import { ChartDonut, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts';
@@ -67,7 +67,7 @@ import { ChartDonut, ChartThemeColor, ChartThemeVariant } from '@patternfly/reac
       legendPosition="right"
       subTitle="Pets"
       title="100"
-      themeColor={ChartThemeColor.multi}
+      themeColor={ChartThemeColor.multiOrdered}
       themeVariant={ChartThemeVariant.light}
       width={350}
     />

diff --git a/packages/patternfly-4/react-charts/src/components/ChartLine/examples/ChartLine.md b/packages/patternfly-4/react-charts/src/components/ChartLine/examples/ChartLine.md
@@ -147,7 +147,7 @@ import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor } from '@patte
 </div>
 ```
 
-## Multi-color line chart with x-axis zoom, bottom-left aligned legend, and responsive container
+## Multi-color (unorderd) line chart with x-axis zoom, bottom-left aligned legend, and responsive container
 ```js
 import React from 'react';
 import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor } from '@patternfly/react-charts';
@@ -195,7 +195,7 @@ class MultiColorChart extends React.Component {
               right: 50,
               top: 50
             }}
-            themeColor={ChartThemeColor.multi}
+            themeColor={ChartThemeColor.multiUnordered}
             width={width}
            >
             <ChartAxis tickValues={[2, 3, 4]} />

diff --git a/packages/patternfly-4/react-charts/src/components/ChartPie/examples/ChartPie.md b/packages/patternfly-4/react-charts/src/components/ChartPie/examples/ChartPie.md
@@ -53,7 +53,7 @@ import { ChartPie, ChartThemeColor } from '@patternfly/react-charts';
 </div>
 ```
 
-## Multi-color pie chart with bottom aligned legend
+## Multi-color (ordered) pie chart with bottom aligned legend
 ```js
 import React from 'react';
 import { ChartPie, ChartThemeColor } from '@patternfly/react-charts';
@@ -69,7 +69,7 @@ import { ChartPie, ChartThemeColor } from '@patternfly/react-charts';
       legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
       legendPosition="bottom"
       pieHeight={230}
-      themeColor={ChartThemeColor.multi}
+      themeColor={ChartThemeColor.multiOrdered}
       width={300}
     />
   </div>

diff --git a/...ages/patternfly-4/react-charts/src/components/ChartStack/examples/ChartStack.md b/...ages/patternfly-4/react-charts/src/components/ChartStack/examples/ChartStack.md
@@ -143,7 +143,7 @@ import { Chart, ChartStack, ChartThemeColor } from '@patternfly/react-charts';
 </div>
 ```
 
-## Multi-color, horizontal stack chart with bottom-left aligned legend
+## Multi-color (ordered), horizontal stack chart with bottom-left aligned legend
 ```js
 import React from 'react';
 import { Chart, ChartStack, ChartThemeColor } from '@patternfly/react-charts';
@@ -163,7 +163,7 @@ import { Chart, ChartStack, ChartThemeColor } from '@patternfly/react-charts';
         right: 50, 
         top: 50
       }}
-      themeColor={ChartThemeColor.multi}
+      themeColor={ChartThemeColor.multiOrdered}
       width={450}
     >
       <ChartAxis />

diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/ChartTheme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/ChartTheme.ts
@@ -37,6 +37,8 @@ interface ChartThemeColorInterface {
   gray: string;
   green: string;
   multi: string;
+  multiOrdered: string;
+  multiUnordered: string;
   orange: string;
   purple: string;
 }
@@ -47,6 +49,12 @@ interface ChartThemeVariantInterface {
   light: string;
 }
 
+/**
+ * The multiOrdered theme is intended for ordered charts; donut, pie, bar, & stack
+ * The multiUnordered theme is intended for unordered charts; area & line
+ *
+ * Note: multi defaults to multiOrdered
+ */
 export const ChartThemeColor: ChartThemeColorInterface = {
   blue: 'blue',
   cyan: 'cyan',
@@ -55,6 +63,8 @@ export const ChartThemeColor: ChartThemeColorInterface = {
   gray: 'gray',
   green: 'green',
   multi: 'multi',
+  multiOrdered: 'multi-ordered',
+  multiUnordered: 'multi-unordered',
   orange: 'orange',
   purple: 'purple'
 };

diff --git a/...ternfly-4/react-charts/src/components/ChartTheme/themes/dark/multi-color-ordered-theme.ts b/...ternfly-4/react-charts/src/components/ChartTheme/themes/dark/multi-color-ordered-theme.ts
@@ -0,0 +1,63 @@
+/* eslint-disable camelcase */
+import {
+  chart_color_blue_100,
+  chart_color_blue_200,
+  chart_color_blue_300,
+  chart_color_blue_400,
+  chart_color_blue_500,
+  chart_color_green_100,
+  chart_color_green_200,
+  chart_color_green_300,
+  chart_color_green_400,
+  chart_color_green_500,
+  chart_color_cyan_100,
+  chart_color_cyan_200,
+  chart_color_cyan_300,
+  chart_color_cyan_400,
+  chart_color_cyan_500,
+  chart_color_gold_100,
+  chart_color_gold_200,
+  chart_color_gold_300,
+  chart_color_gold_400,
+  chart_color_gold_500,
+  chart_color_orange_100,
+  chart_color_orange_200,
+  chart_color_orange_300,
+  chart_color_orange_400,
+  chart_color_orange_500
+} from '@patternfly/react-tokens';
+import { ColorTheme } from '../color-theme';
+
+// The color order below (minus the purple color family) improves the color contrast in ordered charts; donut, pie, bar, & stack
+// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit
+const COLOR_SCALE = [
+  chart_color_blue_300.value,
+  chart_color_green_300.value,
+  chart_color_cyan_300.value,
+  chart_color_gold_300.value,
+  chart_color_orange_300.value,
+  chart_color_blue_100.value,
+  chart_color_green_500.value,
+  chart_color_cyan_100.value,
+  chart_color_gold_100.value,
+  chart_color_orange_500.value,
+  chart_color_blue_500.value,
+  chart_color_green_100.value,
+  chart_color_cyan_500.value,
+  chart_color_gold_500.value,
+  chart_color_orange_100.value,
+  chart_color_blue_200.value,
+  chart_color_green_400.value,
+  chart_color_cyan_200.value,
+  chart_color_gold_200.value,
+  chart_color_orange_400.value,
+  chart_color_blue_400.value,
+  chart_color_green_200.value,
+  chart_color_cyan_400.value,
+  chart_color_gold_400.value,
+  chart_color_orange_200.value
+];
+
+export const DarkMultiColorOrderedTheme = ColorTheme({
+  COLOR_SCALE
+});
diff --git a/...artTheme/themes/dark/multi-color-theme.ts → ...hemes/dark/multi-color-unordered-theme.ts b/...artTheme/themes/dark/multi-color-theme.ts → ...hemes/dark/multi-color-unordered-theme.ts
@@ -38,7 +38,7 @@ import {
 } from '@patternfly/react-tokens';
 import { ColorTheme } from '../color-theme';
 
-// The color order below improves the color contrast in unordered charts
+// The color order below improves the color contrast in unordered charts; area & line
 // See https://github.com/patternfly/patternfly-next/issues/1551
 const COLOR_SCALE = [
   chart_color_blue_300.value,
@@ -78,6 +78,6 @@ const COLOR_SCALE = [
   chart_color_black_400.value
 ];
 
-export const DarkMultiColorTheme = ColorTheme({
+export const DarkMultiColorUnorderedTheme = ColorTheme({
   COLOR_SCALE
 });
diff --git a/...ernfly-4/react-charts/src/components/ChartTheme/themes/light/multi-color-ordered-theme.ts b/...ernfly-4/react-charts/src/components/ChartTheme/themes/light/multi-color-ordered-theme.ts
@@ -0,0 +1,63 @@
+/* eslint-disable camelcase */
+import {
+  chart_color_blue_100,
+  chart_color_blue_200,
+  chart_color_blue_300,
+  chart_color_blue_400,
+  chart_color_blue_500,
+  chart_color_green_100,
+  chart_color_green_200,
+  chart_color_green_300,
+  chart_color_green_400,
+  chart_color_green_500,
+  chart_color_cyan_100,
+  chart_color_cyan_200,
+  chart_color_cyan_300,
+  chart_color_cyan_400,
+  chart_color_cyan_500,
+  chart_color_gold_100,
+  chart_color_gold_200,
+  chart_color_gold_300,
+  chart_color_gold_400,
+  chart_color_gold_500,
+  chart_color_orange_100,
+  chart_color_orange_200,
+  chart_color_orange_300,
+  chart_color_orange_400,
+  chart_color_orange_500
+} from '@patternfly/react-tokens';
+import { ColorTheme } from '../color-theme';
+
+// The color order below (minus the purple color family) improves the color contrast in ordered charts; donut, pie, bar, & stack
+// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit
+const COLOR_SCALE = [
+  chart_color_blue_300.value,
+  chart_color_green_300.value,
+  chart_color_cyan_300.value,
+  chart_color_gold_300.value,
+  chart_color_orange_300.value,
+  chart_color_blue_100.value,
+  chart_color_green_500.value,
+  chart_color_cyan_100.value,
+  chart_color_gold_100.value,
+  chart_color_orange_500.value,
+  chart_color_blue_500.value,
+  chart_color_green_100.value,
+  chart_color_cyan_500.value,
+  chart_color_gold_500.value,
+  chart_color_orange_100.value,
+  chart_color_blue_200.value,
+  chart_color_green_400.value,
+  chart_color_cyan_200.value,
+  chart_color_gold_200.value,
+  chart_color_orange_400.value,
+  chart_color_blue_400.value,
+  chart_color_green_200.value,
+  chart_color_cyan_400.value,
+  chart_color_gold_400.value,
+  chart_color_orange_200.value
+];
+
+export const LightMultiColorOrderedTheme = ColorTheme({
+  COLOR_SCALE
+});
diff --git a/...rtTheme/themes/light/multi-color-theme.ts → ...emes/light/multi-color-unordered-theme.ts b/...rtTheme/themes/light/multi-color-theme.ts → ...emes/light/multi-color-unordered-theme.ts
@@ -38,7 +38,7 @@ import {
 } from '@patternfly/react-tokens';
 import { ColorTheme } from '../color-theme';
 
-// The color order below improves the color contrast in unordered charts
+// The color order below improves the color contrast in unordered charts; area & line
 // See https://github.com/patternfly/patternfly-next/issues/1551
 const COLOR_SCALE = [
   chart_color_blue_300.value,
@@ -78,6 +78,6 @@ const COLOR_SCALE = [
   chart_color_black_400.value
 ];
 
-export const LightMultiColorTheme = ColorTheme({
+export const LightMultiColorUnorderedTheme = ColorTheme({
   COLOR_SCALE
 });
diff --git a/packages/patternfly-4/react-charts/src/components/ChartUtils/chart-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartUtils/chart-theme.ts
@@ -4,15 +4,17 @@ import { DarkCyanColorTheme } from '../ChartTheme/themes/dark/cyan-color-theme';
 import { DarkGoldColorTheme } from '../ChartTheme/themes/dark/gold-color-theme';
 import { DarkGrayColorTheme } from '../ChartTheme/themes/dark/gray-color-theme';
 import { DarkGreenColorTheme } from '../ChartTheme/themes/dark/green-color-theme';
-import { DarkMultiColorTheme } from '../ChartTheme/themes/dark/multi-color-theme';
+import { DarkMultiColorOrderedTheme } from '../ChartTheme/themes/dark/multi-color-ordered-theme';
+import { DarkMultiColorUnorderedTheme } from '../ChartTheme/themes/dark/multi-color-unordered-theme';
 import { DarkOrangeColorTheme } from '../ChartTheme/themes/dark/orange-color-theme';
 import { DarkPurpleColorTheme } from '../ChartTheme/themes/dark/purple-color-theme';
 import { LightBlueColorTheme } from '../ChartTheme/themes/light/blue-color-theme';
 import { LightCyanColorTheme } from '../ChartTheme/themes/light/cyan-color-theme';
 import { LightGoldColorTheme } from '../ChartTheme/themes/light/gold-color-theme';
 import { LightGrayColorTheme } from '../ChartTheme/themes/light/gray-color-theme';
 import { LightGreenColorTheme } from '../ChartTheme/themes/light/green-color-theme';
-import { LightMultiColorTheme } from '../ChartTheme/themes/light/multi-color-theme';
+import { LightMultiColorOrderedTheme } from '../ChartTheme/themes/light/multi-color-ordered-theme';
+import { LightMultiColorUnorderedTheme } from '../ChartTheme/themes/light/multi-color-unordered-theme';
 import { LightOrangeColorTheme } from '../ChartTheme/themes/light/orange-color-theme';
 import { LightPurpleColorTheme } from '../ChartTheme/themes/light/purple-color-theme';
 import {
@@ -91,7 +93,10 @@ export const getDarkThemeColors = (themeColor: string) => {
     case ChartThemeColor.green:
       return DarkGreenColorTheme;
     case ChartThemeColor.multi:
-      return DarkMultiColorTheme;
+    case ChartThemeColor.multiOrdered:
+      return DarkMultiColorOrderedTheme;
+    case ChartThemeColor.multiUnordered:
+      return DarkMultiColorUnorderedTheme;
     case ChartThemeColor.orange:
       return DarkOrangeColorTheme;
     case ChartThemeColor.purple:
@@ -115,7 +120,10 @@ export const getLightThemeColors = (themeColor: string) => {
     case ChartThemeColor.green:
       return LightGreenColorTheme;
     case ChartThemeColor.multi:
-      return LightMultiColorTheme;
+    case ChartThemeColor.multiOrdered:
+      return LightMultiColorOrderedTheme;
+    case ChartThemeColor.multiUnordered:
+      return LightMultiColorUnorderedTheme;
     case ChartThemeColor.orange:
       return LightOrangeColorTheme;
     case ChartThemeColor.purple: