Add image example with background color using blurDataURL

docs/api-reference/next/image.md

@@ -152,6 +152,7 @@ Try it out:
 
 - [Demo the `blur` placeholder](https://image-component.nextjs.gallery/placeholder)
 - [Demo the shimmer effect with `blurDataURL` prop](https://image-component.nextjs.gallery/shimmer)
+- [Demo the color effect with `blurDataURL` prop](https://image-component.nextjs.gallery/color)
 
 ## Advanced Props
 
@@ -208,6 +209,7 @@ Try it out:
 
 - [Demo the default `blurDataURL` prop](https://image-component.nextjs.gallery/placeholder)
 - [Demo the shimmer effect with `blurDataURL` prop](https://image-component.nextjs.gallery/shimmer)
+- [Demo the color effect with `blurDataURL` prop](https://image-component.nextjs.gallery/color)
 
 You can also [generate a solid color Data URL](https://png-pixel.com) to match the image.
 

examples/image-component/pages/color.js

@@ -0,0 +1,42 @@
+import Image from 'next/image'
+import ViewSource from '../components/view-source'
+
+// Pixel GIF code adapted from https://stackoverflow.com/a/33919020/266535
+const keyStr =
+  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
+
+const triplet = (e1, e2, e3) =>
+  keyStr.charAt(e1 >> 2) +
+  keyStr.charAt(((e1 & 3) << 4) | (e2 >> 4)) +
+  keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) +
+  keyStr.charAt(e3 & 63)
+
+const rgbDataURL = (r, g, b) =>
+  `data:image/gif;base64,R0lGODlhAQABAPAA${
+    triplet(0, r, g) + triplet(b, 255, 255)
+  }/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`
+
+const Color = () => (
+  <div>
+    <ViewSource pathname="pages/color.js" />
+    <h1>Image Component With Color Data URL</h1>
+    <Image
+      alt="Dog"
+      src="/dog.jpg"
+      placeholder="blur"
+      blurDataURL={rgbDataURL(237, 181, 6)}
+      width={750}
+      height={1000}
+    />
+    <Image
+      alt="Cat"
+      src="/cat.jpg"
+      placeholder="blur"
+      blurDataURL={rgbDataURL(2, 129, 210)}
+      width={750}
+      height={1000}
+    />
+  </div>
+)
+
+export default Color

examples/image-component/pages/index.js

@@ -84,7 +84,12 @@ const Index = () => (
         </li>
         <li>
           <Link href="/shimmer">
-            <a>placeholder="blur" with custom blurDataURL</a>
+            <a>placeholder="blur" with animated shimmer blurDataURL</a>
+          </Link>
+        </li>
+        <li>
+          <Link href="/color">
+            <a>placeholder="blur" with solid color blurDataURL</a>
           </Link>
         </li>
       </ul>