Skip to main content
se añadieron 2 caracteres en el cuerpo
Origen Enlace
Yussef
  • 23.4k
  • 4
  • 12
  • 29

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>

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 derecha (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>

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 izquierda (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>

Origen Enlace
Yussef
  • 23.4k
  • 4
  • 12
  • 29

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 derecha (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>