diff --git a/lib/components/src/blocks/ColorPalette.stories.tsx b/lib/components/src/blocks/ColorPalette.stories.tsx
index e09e42c91f02..f5a12b214aad 100644
--- a/lib/components/src/blocks/ColorPalette.stories.tsx
+++ b/lib/components/src/blocks/ColorPalette.stories.tsx
@@ -27,3 +27,29 @@ export const defaultStyle = () => (
     />
   </ColorPalette>
 );
+
+export const NamedColors = () => (
+  <ColorPalette>
+    <ColorItem
+      title="theme.color.greyscale"
+      subtitle="Some of the greys"
+      colors={{ White: '#FFFFFF', Alabaster: '#F8F8F8', Concrete: '#F3F3F3' }}
+    />
+    <ColorItem
+      title="theme.color.primary"
+      subtitle="Coral"
+      colors={{ WildWatermelon: '#FF4785' }}
+    />
+    <ColorItem title="theme.color.secondary" subtitle="Ocean" colors={{ DodgerBlue: '#1EA7FD' }} />
+    <ColorItem
+      title="theme.color.positive"
+      subtitle="Green"
+      colors={{
+        Apple: 'rgba(102,191,60,1)',
+        Apple80: 'rgba(102,191,60,.8)',
+        Apple60: 'rgba(102,191,60,.6)',
+        Apple30: 'rgba(102,191,60,.3)',
+      }}
+    />
+  </ColorPalette>
+);
diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
index e4deaaef8fa2..246c0133fbb4 100644
--- a/lib/components/src/blocks/ColorPalette.tsx
+++ b/lib/components/src/blocks/ColorPalette.tsx
@@ -35,10 +35,8 @@ const SwatchLabel = styled.div(({ theme }) => ({
       ? transparentize(0.4, theme.color.defaultText)
       : transparentize(0.6, theme.color.defaultText),
 
-  '> div': {
-    display: 'inline-block',
-    overflow: 'hidden',
-    maxWidth: '100%',
+  small: {
+    display: 'block',
   },
 }));
 
@@ -107,10 +105,52 @@ const List = styled.div(({ theme }) => ({
   flexDirection: 'column',
 }));
 
+type Colors = string[] | { [key: string]: string };
+
 interface ColorProps {
   title: string;
   subtitle: string;
-  colors: string[];
+  colors: Colors;
+}
+
+function renderSwatch(color: string) {
+  return (
+    <Swatch
+      key={color}
+      title={color}
+      style={{
+        backgroundColor: color,
+      }}
+    />
+  );
+}
+
+function renderSwatchLabel(color: string, colorDescription?: string) {
+  return (
+    <SwatchLabel key={color} title={color}>
+      {color}
+      {colorDescription && <small>{colorDescription}</small>}
+    </SwatchLabel>
+  );
+}
+
+function renderSwatchSpecimen(colors: Colors) {
+  if (Array.isArray(colors)) {
+    return (
+      <SwatchSpecimen>
+        <SwatchColors>{colors.map(color => renderSwatch(color))}</SwatchColors>
+        <SwatchLabels>{colors.map(color => renderSwatchLabel(color))}</SwatchLabels>
+      </SwatchSpecimen>
+    );
+  }
+  return (
+    <SwatchSpecimen>
+      <SwatchColors>{Object.values(colors).map(color => renderSwatch(color))}</SwatchColors>
+      <SwatchLabels>
+        {Object.keys(colors).map(color => renderSwatchLabel(color, colors[color]))}
+      </SwatchLabels>
+    </SwatchSpecimen>
+  );
 }
 
 /**
@@ -124,29 +164,7 @@ export const ColorItem: FunctionComponent<ColorProps> = ({ title, subtitle, colo
         <ItemTitle>{title}</ItemTitle>
         <ItemSubtitle>{subtitle}</ItemSubtitle>
       </ItemDescription>
-
-      <Swatches>
-        <SwatchSpecimen>
-          <SwatchColors>
-            {colors.map(color => (
-              <Swatch
-                key={color}
-                title={color}
-                style={{
-                  backgroundColor: color,
-                }}
-              />
-            ))}
-          </SwatchColors>
-          <SwatchLabels>
-            {colors.map(color => (
-              <SwatchLabel key={color} title={color}>
-                <div>{color}</div>
-              </SwatchLabel>
-            ))}
-          </SwatchLabels>
-        </SwatchSpecimen>
-      </Swatches>
+      <Swatches>{renderSwatchSpecimen(colors)}</Swatches>
     </Item>
   );
 };