JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="one">
    <li>aged</li>
    <li>billowing</li>
    <li>black</li>
    <li>broken</li>
    <li>brook</li>
    <li>cherry</li>
    <li>cloud</li>
    <li>dawn</li>
    <li>dust</li>
    <li>fire</li>
    <li>frog</li>
    <li>frost</li>
    <li>frosty</li>
    <li>glitter</li>
    <li>grass</li>
    <li>green</li>
    <li>hill</li>
    <li>holy</li>
    <li>lake</li>
    <li>lively</li>
    <li>long</li>
    <li>morning</li>
    <li>mountain</li>
    <li>nameless</li>
    <li>patient</li>
    <li>shadow</li>
    <li>snowy</li>
    <li>star</li>
    <li>summer</li>
    <li>thunder</li>
    <li>winter</li>
    <li>young</li>
</ul>
<ul id="two">
    <li>aged</li>
    <li>billowing</li>
    <li>black</li>
    <li>broken</li>
    <li>brook</li>
    <li>cherry</li>
    <li>cloud</li>
    <li>dawn</li>
    <li>dust</li>
    <li>fire</li>
    <li>frog</li>
    <li>frost</li>
    <li>frosty</li>
    <li>glitter</li>
    <li>grass</li>
    <li>green</li>
    <li>hill</li>
    <li>holy</li>
    <li>lake</li>
    <li>lively</li>
    <li>long</li>
    <li>morning</li>
    <li>mountain</li>
    <li>nameless</li>
    <li>patient</li>
    <li>shadow</li>
    <li>snowy</li>
    <li>star</li>
    <li>summer</li>
    <li>thunder</li>
    <li>winter</li>
    <li>young</li>
</ul>

CSS

body {
    background-color: white;
    color: #111;
    font: normal 16px/1.5 sans-serif;
}

ul {
    -webkit-column-count: 4;
    column-count: 4;
    padding: 15px;
    margin: 0;
}

ul#two {
    color: white;
    background: #111;
}

li {
    list-style-type: none;
}

JavaScript

String.prototype.toHSL = function(opts) {
    var h, s, l;
    opts = opts || {};
    opts.hue = opts.hue || [0, 360];
    opts.sat = opts.sat || [75, 100];
    opts.lit = opts.lit || [40, 60];

    var range = function(hash, min, max) {
        var diff = max - min;
        var x = ((hash % diff) + diff) % diff;
        return x + min;
    }

    var hash = 0;
    if (this.length === 0) return hash;
    for (var i = 0; i < this.length; i++) {
        hash = this.charCodeAt(i) + ((hash << 5) - hash);
        hash = hash & hash;
    }

    h = range(hash, opts.hue[0], opts.hue[1]);
    s = range(hash, opts.sat[0], opts.sat[1]);
    l = range(hash, opts.lit[0], opts.lit[1]);

    return `hsl(${h}, ${s}%, ${l}%)`;
}

var forEach = function(array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
        callback.call(scope, i, array[i])
    }
}

var list = document.querySelectorAll("#one li")
forEach(list, function(index, value) {
    var hue = list[index].textContent.toHSL({
        hue: [180, 360],
        sat: [75, 95],
        lit: [45, 55]
    })
    list[index].style.color = hue
})
var list = document.querySelectorAll("#two li")
forEach(list, function(index, value) {
    var hue = list[index].textContent.toHSL({
        hue: [180, 360],
        sat: [85, 100],
        lit: [60, 75]
    })
    list[index].style.color = hue
})