JSFiddle - React, Tailwind, and code Playground

HTML

in <input type="text" id="in" value="green yellow orange red"><br />
num <input type="text" id="num" value="0"><br />
max <input type="text" id="max" value="500"><br />
text <input type="text" id="text" value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"><br />
out    <input type="text" id="out" readonly="readonly"><br />
debug   <textarea id="debug" readonly="readonly" cols="40" rows="10"></textarea>

JavaScript

function update() {
    $('#debug').val('')
    len = parseInt($('#num').val()) || $('#text').val().length
    colors = $('#in').val().split(/ /)
    max = $('#max').val()
    
    first = max * .3;
    step = Math.ceil((max - first) / (colors.length))
    start = first
    
    debug = 'Colors: ' + colors + '\n'
    debug += 'First change: ' + first + '\n'
    debug += 'Step: ' + step + '\n'
    
    for (i = 0; i < colors.length; ++i) {
        debug += colors[i] + ': ' + start + '-' + (Math.max(0, start = start + step) + 1) + '\n'
    }
    
    $('#debug').val(debug)
    
    color = (len < first) ? colors[0] : colors[Math.floor((len - (max - first)) / step) + 1]
    
    $('#out').val(len + ': ' + color + ', ' + Math.floor((max - len - first) / step))
}
$('#in').on('change keyup keydown keypress', update);
$('#num').on('change keyup keydown keypress', update);
$('#max').on('change keyup keydown keypress', update);
$('#text').on('change keyup keydown keypress', update);
update()