The HTML input of type color has no empty state. Therefore it always shows a selected color. What would be the best way to convey to the user that they have to select a color.
I restyled the color input and added a description if no color is stored. Setting the default color to the background color was my initial thought. 
Let's see if this is what you're asking:
The method you're proposing only works the first time because after the user selects a color, it won't be so clear that it can be changed. Perhaps some people will understand, but others may not.
A way to make it always clear that it can be chosen and modified would be the following:
so you add a second state in which it's completely clear that the color can be changed. You could explore other options, such as leaving only the edit icon or even making the circle more interactive to make it clear that's where the color picker will come from.
I think your solution is quite okay. I only would opt for a different font/color for 'Select a color'. Maybe make it italic and gray?
<input type="color" />is now supported in all major browsers. Also, the answers to the linked question recommend a predefined list of colors. This kind of misses the point of using a color picker.