improve contrast on generated color palettes

src/fragments.js

@@ -2,35 +2,11 @@ import { graphql } from 'gatsby';
 
 export const VibrantColorsFragment = graphql`
   fragment VibrantColors on ImageSharpFieldsImageMetaVibrant {
-    DarkMuted {
-      titleTextColor
-      bodyTextColor
-      rgb
-    }
-    DarkVibrant {
-      titleTextColor
-      bodyTextColor
-      rgb
-    }
-    LightMuted {
-      titleTextColor
-      bodyTextColor
-      rgb
-    }
-    LightVibrant {
-      titleTextColor
-      bodyTextColor
-      rgb
-    }
-    Vibrant {
-      titleTextColor
-      bodyTextColor
-      rgb
-    }
-    Muted {
-      titleTextColor
-      bodyTextColor
-      rgb
-    }
+    DarkMuted
+    DarkVibrant
+    LightMuted
+    LightVibrant
+    Vibrant
+    Muted
   }
 `;

src/utils.js

@@ -16,12 +16,12 @@ export const getRgba = (palette, alpha) => `rgba(${palette[0]}, ${palette[1]}, $
 // work around SSR bug in react-helmet
 export const getVibrantToHelmetSafeBodyStyle = (vibrant) => {
   const style = {
-    '--muted': vibrant.Muted.rgb,
-    '--dark-muted': vibrant.DarkMuted.rgb,
-    '--light-muted': vibrant.LightMuted.rgb,
-    '--vibrant': vibrant.Vibrant.rgb,
-    '--dark-vibrant': vibrant.DarkVibrant.rgb,
-    '--light-vibrant': vibrant.LightVibrant.rgb,
+    '--muted': vibrant.Muted,
+    '--dark-muted': vibrant.DarkMuted,
+    '--light-muted': vibrant.LightMuted,
+    '--vibrant': vibrant.Vibrant,
+    '--dark-vibrant': vibrant.DarkVibrant,
+    '--light-vibrant': vibrant.LightVibrant,
   };
   if (typeof window === 'undefined') {
     return style;