Colours

One colour for all bars, colours for a waterfall, and a palette.

One colour

--tablechart-bar-color sets the colour of all bars, and of a single line.

CSS 
.orange {
	--tablechart-bar-color: #e4572e;
}
Spring 58
Summer 72
Autumn 70
Winter 91
HTML 
<figure class="orange" data-chart="column">
	<table>
		<tbody>
			<tr><th>Spring</th><td>58</td></tr>
			<tr><th>Summer</th><td>72</td></tr>
			<tr><th>Autumn</th><td>70</td></tr>
			<tr><th>Winter</th><td>91</td></tr>
		</tbody>
	</table>
</figure>

Waterfall colours

Set the colours of rising steps, falling steps and totals. The number inside a bar is dark or light, whichever reads on the colour of the bar.

CSS 
.warm {
	--tablechart-up-color: #b4552d;
	--tablechart-down-color: #d69a52;
	--tablechart-total-color: #cfc4b4;
}
Picked 74.5
Windfalls 28.2
Bruised -16.1
Peelings -13.3
Pressed 73.3
HTML 
<figure class="warm" data-chart="waterfall">
	<table>
		<tbody>
			<tr data-kind="total"><th>Picked</th><td>74.5</td></tr>
			<tr><th>Windfalls</th><td>28.2</td></tr>
			<tr><th>Bruised</th><td>-16.1</td></tr>
			<tr><th>Peelings</th><td>-13.3</td></tr>
			<tr data-kind="total"><th>Pressed</th><td>73.3</td></tr>
		</tbody>
	</table>
</figure>

A palette

Set --tablechart-color-1, --tablechart-color-2 and on. Donut slices use them in order. If a colour is not set, that slice uses the default.

CSS 
.fruity {
	--tablechart-color-1: #b4552d;
	--tablechart-color-2: #d69a52;
	--tablechart-color-3: #7fa87f;
	--tablechart-color-4: #cfc4b4;
}
Picked 74.5
Juiced 38.2
Eaten fresh 18.1
Sold whole 12.4
Composted 5.8
HTML 
<figure class="fruity" data-chart="donut">
	<table>
		<tbody>
			<tr data-kind="total"><th>Picked</th><td>74.5</td></tr>
			<tr><th>Juiced</th><td>38.2</td></tr>
			<tr><th>Eaten fresh</th><td>18.1</td></tr>
			<tr><th>Sold whole</th><td>12.4</td></tr>
			<tr><th>Composted</th><td>5.8</td></tr>
		</tbody>
	</table>
</figure>

If a line chart has several lines, the lines use the palette too.

Year North South East
2016 41 30 22
2019 58 39 35
2022 77 52 41
2025 105 61 70
HTML 
<figure class="fruity" data-chart="line">
	<table>
		<thead>
			<tr><th>Year</th><th>North</th><th>South</th><th>East</th></tr>
		</thead>
		<tbody>
			<tr><th>2016</th><td>41</td><td>30</td><td>22</td></tr>
			<tr><th>2019</th><td>58</td><td>39</td><td>35</td></tr>
			<tr><th>2022</th><td>77</td><td>52</td><td>41</td></tr>
			<tr><th>2025</th><td>105</td><td>61</td><td>70</td></tr>
		</tbody>
	</table>
</figure>

Without a palette

Without a palette, each slice or line is a bit lighter than the one before it. These variables set how much.

Variable Sets
--tablechart-slice-color The colour of the first slice. The text colour by default.
--tablechart-slice-fade How much lighter each slice is: 15% by default.
--tablechart-slice-min The lightest a slice gets: 20% of its colour by default.
--tablechart-series-color The colour of the first line. The bar colour by default.
--tablechart-series-fade How much lighter each line is: 30% by default. With more than three lines, the steps are smaller, so the last line is not lighter than --tablechart-series-min.
--tablechart-series-min The lightest a line gets: 40% of its colour by default.
--tablechart-series-muted-share The strength of a line next to a highlighted line: 45% by default.
--tablechart-series-own-color The colour of one line, set on [data-series="2"] and so on.