There is more detail required than just those rectangles. Each rectangle has more than just a simple interpolation of colours.
It's likely a good idea to subdivide that grid many times and the quads used would be a lot smaller. The grid would just be overlaid if required.
Another option would be to use texture(s) for each quad. The texture can be created "live" by using a render texture. For example, drawing the shapes onto the render texture and then using that texture for the quads.
That said, if you want the graphics card to do the processing for you, you can use a shader, but the shader will need to have all of the information with which to make the map.
And yes, of course, triangles are no different. In fact, quads (when distorted like in the image) don't interpolate colours as reliably as triangles.