diff --git a/src/components/block/BlockSwatches.js b/src/components/block/BlockSwatches.js
index 2ed6ee12..f85388d1 100644
--- a/src/components/block/BlockSwatches.js
+++ b/src/components/block/BlockSwatches.js
@@ -26,9 +26,9 @@ export const BlockSwatches = ({ colors, onClick, onSwatchHover }) => {
 
   return (
     <div style={ styles.swatches }>
-      { map(colors, c => (
+      { map(colors, (c, i) => (
         <Swatch
-          key={ c }
+          key={ i }
           color={ c }
           style={ styles.swatch }
           onClick={ onClick }
diff --git a/src/components/circle/Circle.js b/src/components/circle/Circle.js
index 58e0b6ba..48f9d9f8 100644
--- a/src/components/circle/Circle.js
+++ b/src/components/circle/Circle.js
@@ -26,9 +26,9 @@ export const Circle = ({ width, onChange, onSwatchHover, colors, hex, circleSize
 
   return (
     <div style={ styles.card } className={ `circle-picker ${ className }` }>
-      { map(colors, c => (
+      { map(colors, (c, i) => (
         <CircleSwatch
-          key={ c }
+          key={ i }
           color={ c }
           onClick={ handleChange }
           onSwatchHover={ onSwatchHover }
diff --git a/src/components/compact/Compact.js b/src/components/compact/Compact.js
index bbdaceed..fbc68414 100644
--- a/src/components/compact/Compact.js
+++ b/src/components/compact/Compact.js
@@ -44,9 +44,9 @@ export const Compact = ({ onChange, onSwatchHover, colors, hex, rgb,
     <Raised style={ styles.Compact } styles={ passedStyles }>
       <div style={ styles.compact } className={ `compact-picker ${ className }` }>
         <div>
-          { map(colors, (c) => (
+          { map(colors, (c, i) => (
             <CompactColor
-              key={ c }
+              key={ i }
               color={ c }
               active={ c.toLowerCase() === hex }
               onClick={ handleChange }
diff --git a/src/components/github/Github.js b/src/components/github/Github.js
index 07ec0ce6..a137db28 100644
--- a/src/components/github/Github.js
+++ b/src/components/github/Github.js
@@ -99,10 +99,10 @@ export const Github = ({ width, colors, onChange, onSwatchHover, triangle,
     <div style={ styles.card } className={ `github-picker ${ className }` }>
       <div style={ styles.triangleShadow } />
       <div style={ styles.triangle } />
-      { map(colors, c => (
+      { map(colors, (c, i) => (
         <GithubSwatch
           color={ c }
-          key={ c }
+          key={ i }
           onClick={ handleChange }
           onSwatchHover={ onSwatchHover }
         />