I love this card, but it bites me since this card came out, and now that it’s working again, i tried to implement custom colors.
As a total js noob and a lot of trial and error, i hacked the severity config from the Big number card into this card. 
As a result, it will be possible to use any and as much colors you like.
The config will be a Breaking Change!
- entity: input_number.slider1
measurement: ' '
severity:
- style: 'rgb(255,12,12)'
value: 10
- style: orange
value: 20
- style: '#ffff00'
value: 30
- style: var(--my-green)
value: 40
- style: blue
value: 50
- style: indigo
value: 60
- style: violet
value: 70
- style: pink
value: 80
- style: cyan
value: 90
- style: white
value: 100
title: Custom gauge
type: 'custom:gauge-card'
After all the experiments, there are no big changes in the code.
From:
_computeSeverity(stateValue, sections) {
let numberValue = Number(stateValue);
const severityMap = {
red: "var(--label-badge-red)",
green: "var(--label-badge-green)",
amber: "var(--label-badge-yellow)",
normal: "var(--label-badge-blue)",
}
if (!sections) return severityMap["normal"];
let sortable = [];
for (let severity in sections) {
sortable.push([severity, sections[severity]]);
}
sortable.sort((a, b) => { return a[1] - b[1] });
if (numberValue >= sortable[0][1] && numberValue < sortable[1][1]) {
return severityMap[sortable[0][0]]
}
if (numberValue >= sortable[1][1] && numberValue < sortable[2][1]) {
return severityMap[sortable[1][0]]
}
if (numberValue >= sortable[2][1]) {
return severityMap[sortable[2][0]]
}
return severityMap["normal"];
}
To:
_computeSeverity(stateValue, sections) {
let numberValue = Number(stateValue);
if (!sections) return 'var(--primary-color)';
let style;
sections.forEach(section => {
if (numberValue <= section.value && !style) {
style = section.style;
}
});
return style;
}
If anyone likes it, maybe i’ll submit a PR. 
