Creating a color palette, <img> or <div> or <canvas>?

I'm currently working on an color-picker component using HTML, CSS and Javascript, one major question is how I should implement a color palette like this one:

Ignoring browser compatibility issues introduced by IE8 or earlier, I have 3 methods to implement this:

1. The <img> way:

   This is simple and is used by many color-picker components for years, we simply include an image exactly the same as the above one using <img src="palette.png" />.

   The problem is <img> would introduce extra network roundtrip, although we can prevent it using dataURI, but an image data is a little too large for me.

2. The <div> way:

   In this way we should use 2 <div> elements, one of them provides a left-to-right linear gradient and the other provides a top-to-bottom alpha gradient, the style should be:

   <style>
       #map {
           width: 400px; 
           height: 400px;
           background: -webkit-gradient(
               linear, left top, right top, 
               color-stop(0%,#ff0000), 
               color-stop(16.67%,#ffff00), 
               color-stop(33.33%,#00ff00),
               color-stop(50%,#00ffff), 
               color-stop(66.67%,#0000ff),
               color-stop(83.33%,#ff00ff), 
               color-stop(100%,#ff0000)
           );
       }
       #overlay {
           width: 400px;
           height: 400px;
           background: -webkit-gradient(
               linear, left top, left bottom, 
               from(rgba(0, 0, 0, 0)), 
               to(rgba(0, 0, 0, 1))
           );
       }
   </style>
   
   <div id="palette"><div id="overlay"></div></div>
   

   It works perfectly, but the problem is, this method introduces 2 elements for styling only, the 2 <div> elements don't have any semantic