Lo primero sería definir que es "color diferente", porque a la vista 2 colores pueden ser iguales, pero tienen código son distintos.
Un color puede escribirse desde 3 colores distintos R,G,B (Rojo, verde, azul), cuyas "tonalidades" (no sé si ese será el nombre técnico) van desde 0 a 255, en hexadecimal de 0 a FF
Entonces si combinas los 3, el color mínimo que tienes es 000000, y el máximo es FFFFFF que es igual a 16.777.215, es decir puedes tener casi 17 millones de colores distintos
Es decir, si empiezas con un contador desde 0 hasta 16.777.215, te dará un color distinto, luego puedes transformar ese número a hexadecimal usando la siguiente función
index.toString(16).padStart(6, "0")
Donde toString(16) convierte a hexadecimal un número y padStart agrega ceros a la derechaizquierda (en este caso un máximo de 6) para mantener el formato RGB
El código sería el siguiente:
const Salida = document.getElementById("Salida");
let index=0;
function colocarletra(){
let span = document.createElement("span");
span.style.color = "#" + index.toString(16).padStart(6, "0");
span.innerText = event.key;
index++;
Salida.appendChild(span);
}
#Salida{
word-break: break-word;
}
<input type="text" id="Entrada" onkeypress="colocarletra()" />
<div id="Salida"></div>