METER is a HTML5 element with an initial color-set.
Here are the 'defaults', which you may change.
For this HTML code:
<meter min="1" max="100" low="20" high="40" value="20"></meter>
Chrome will 'give you' something like this:
/*gray background - base */ meter::-webkit-meter-bar{ background-image: linear-gradient(rgb(221,221,221), rgb(238,238,238) 20%, rgb(204,204,204) 45% 55%, rgb(221,221,221));}
/*red - even-less (value < 'low')*/ meter::-webkit-meter-even-less-good-value{ background-image: linear-gradient(rgb(255,119,119), rgb(255,204,204) 20%, rgb(221,068,068) 45% 55%, rgb(255,119,119));}
/*yellow - sub-optimum ('low' =< value < 'high')*/ meter::-webkit-meter-suboptimum-value{ background-image: linear-gradient(rgb(255,238,119), rgb(255,255,204) 20%, rgb(221,187,051) 45% 55%, rgb(255,238,119));}
/*green - optimum (value >= 'high')*/ meter::-webkit-meter-optimum-value{ background-image: linear-gradient(rgb(170,221,119), rgb(204,238,170) 20%, rgb(119,170,051) 45% 55%, rgb(170,221,119));}
*Note that it will actually set the 'background', but 'background-image' this is a more specific and an accurate way of setting it. You may also specify an additional 'background-color'.
Simply copy the CSS-code from above, change the colors and override the CSS-rules with your own.
Since there are just a few-states available, you may refine the CSS-rules, by providing an much more accurate set of rules, addressing the actual 'value',
for example, in the CSS-code above everything less then '20' will get that red color, but you may provide an override (with '!important') like so:
meter[value=3]::-webkit-meter-even-less-good-value{ background-image:none !important; background-color:darkred;}
you may, even, ignore the '-webkit-meter-even-less-good-value' part and just override the colors using 'value' along:
meter[value=11]{ background-image:none !important; background-color:blue;}
Enjoy!