Random Colorful letters
If you want to get only vivid colors, using randomness like this wont do.
What you need is a function for HSV to RGB conversion, like this:
function HSVtoRGB(h, s, v)
{
var r, g, b, i, f, p, q, t;
i = Math.floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6)
{
case 0: r = v, g = t, b = p; break;
case 1: r = q, g = v, b = p; break;
case 2: r = p, g = v, b = t; break;
case 3: r = p, g = q, b = v; break;
case 4: r = t, g = p, b = v; break;
case 5: r = v, g = p, b = q; break;
}
r = Math.round(r * 255).toString(16);
g = Math.round(g * 255).toString(16);
b = Math.round(b * 255).toString(16);
if (r.length < 2) r = '0' + r;
if (g.length < 2) g = '0' + g;
if (b.length < 2) b = '0' + b;
return '#' + r + g + b;
}
Parameters range from 0 to 1. Using HSVtoRGB(Math.random(), 1, 1)
will always yield you a vivid color with maximum value and saturation.
You would have to break your text into children spans
and do the coloring on them.
function colorElement(element) {
var randomColor = Math.floor(Math.random()*16777215).toString(16);
element.style.color = '#' + randomColor;
}
function splitElement(element) {
var text = element.innerText;
element.innerText = '';
var chars = text.split('');
for(var ch of chars) {
var charSpan = document.createElement('span');
charSpan.innerText = ch;
element.appendChild(charSpan);
}
}
function randomColor() {
var result = document.querySelectorAll('span span');
for(ele of result){
colorElement(ele);
}
}
var ele = document.getElementById('myText');
splitElement(ele);
setInterval(function() {
randomColor();
},500);
<div>
<span id="myText">Disco Text</span>
</div>