One way you can do it is using the hidden multivalue technique where you store a number (or even the colour) as a second value to that number, which is hidden through CSS.
The use a format expression to colour the cell
See this example
<panel>
<title>Colour formatting for ranges of percentages</title>
<html depends="$hidden$">
<style>
#coloured_cell4 table tbody td div.multivalue-subcell[data-mv-index="1"]{
display: none;
}
</style>
</html>
<table id="coloured_cell4">
<search>
<query>| makeresults count=10
| fields - _time
| eval v=random() % 100
| eventstats sum(v) as totv
| eval perc=round(v/totv*100)
| eval v=v." (".perc."%)"
| eval v=mvappend(v, tostring(case(perc<=10, 1, perc<=20, 2, perc<=100, 3)))</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<option name="refresh.display">progressbar</option>
<format type="color" field="v">
<colorPalette type="expression">case(mvindex(value, 1) == "1", "#00FF00", mvindex(value, 1) == "2", "#FFBB00", mvindex(value, 1) == "3", "#FF0000")</colorPalette>
</format>
</table>
</panel>
