¿Cómo generar colores pastel aleatorios (o más brillantes) en Javascript?

Te recomendamos que revises esta resolución en un ambiente controlado antes de pasarlo a producción, saludos.

Colores HSL

Usar colores HSL Colors puede ser lo más fácil. Los valores de color HSL se especifican en CSS como

hsl( hue, saturation%, lightness%)

donde hue está en el rango 0-360 (sin un marcador de unidad cuando se usan grados), y tanto saturation y lightness son porcentajes con un final % firmar.

Nota

• Los colores “brillantes” se refieren a los colores de una rueda de color RGB formada comenzando en rojo y luego mezclando rojo puro con verde, verde puro con azul y finalmente azul puro de nuevo con rojo.

• En el espacio de color HSL, los colores brillantes se representan mediante un tono basado en su posición en la rueda de colores con 100% saturación y un valor de luminosidad de 50%:

  matiz 0 ▶

  ◀ tono 360

  saturación: 100%

  ligereza: 50%

• Los colores se mezclan con el blanco y se vuelven más “pastel” a medida que aumenta la luminosidad en la parte superior. 50%. Un valor de ligereza de 100% crea el blanco independientemente de los valores de tono y saturación.

• Los colores se mezclan con el gris como saturación. disminuye y se vuelven más lavados dependiendo de cuán baja sea la saturación. Un valor de saturación de 0% crea un tono de escala de grises basado solo en la ligereza.

• Los colores se mezclan con el negro a medida que la luminosidad disminuye a continuación. 50%. Un valor de ligereza de 0% crea negro sin importar los valores de tono y saturación.

Advertencia

El ojo humano es menos sensible al color azul. El texto negro sobre fondo azul, o azul sobre negro, es más difícil de leer en comparación con otros colores. Si esto se convierte en un problema para la selección de colores aleatorios, el ejemplo 2 muestra una forma de compensar.

---

Ejemplo 1: algunos colores pastel aleatorios con saturación en el rango 25-95% y ligereza en el rango 85-95%:

function getColor() 
  return "hsl(" + 360 * Math.random() + ',' +
             (25 + 70 * Math.random()) + '%,' + 
             (85 + 10 * Math.random()) + '%)'



// Generate 20 colors
for( var i = 20; i--; )
  var item = document.createElement('div')
  item.style.cssText = `
    display:inline-block; 
    padding: 2em;
    margin:5px; 
    border-radius:50%;
    background: $getColor();
  `
  document.body.appendChild(item);

---

Ejemplo 2: este ejemplo demuestra el ajuste de colores para la falta de sensibilidad del ojo al azul. Genera un conjunto en caja de letras coloreadas con matices en el rango de 0 a 340 presentado sobre un fondo negro.

"use strict";

// individual letter classes:
function letterCSS(letter, i, length, blueBoost) 
    let hue = Math.floor( i/length * 341); // between 0 and 340
    let saturation = 100;
    let lightness = 50;

    // color adjustment:
    if( blueBoost && hue > 215 && hue < 265) 
         const gain = 20;
         let blueness = 1 - Math.abs( hue-240)/25;
         let change  = Math.floor( gain * blueness);
         lightness += change;
         saturation -= change;
    
    let hsl = `hsl($hue, $saturation%, $lightness%)`;

  return `.$letter 
  color: $hsl;
  border-color: $hsl;
  background-color: black;

`   ;


// generate and display boxed letters of the alphabet
function letterBlocks() 
    let letters = Array.from("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
    let cssText = "";
    let html = ""
    let blueBoost = document.getElementById("boost").checked;
    letters.forEach( (letter, i, a) => 
       cssText += letterCSS( letter, i, a.length, blueBoost);
       html  += ` $letter `;
    );
    let style = document.createElement("style");
    style.textContent = cssText;
    document.body.appendChild(style);
    let p = document.getElementById("blocks");
    p.innerHTML = html;

#blocks 
  line-height: 2.5rem;

.letter 
  display: inline-block;
  text-align: center;
  line-height: 2rem;
  font-size: 1.5rem;
  height: 2rem;
  width: 2rem;
  font-family: sans-serif;
  font-weight: bold;
  border-width: 0.125rem;
  border-style: solid;
  border-radius: 0.25rem;

Generate Letter Blocks
- optionally lighten colors near pure blue:

Los colores de las letras comienzan con una saturación total y un 50% de luminosidad. Marque la casilla de opción y haga clic en el botón para ajustar los colores cercanos al azul aumentando la luminosidad y disminuyendo la saturación.

• “Cerca del azul” está codificado de forma rígida para significar dentro de las unidades de 25 grados del valor de tono 240,
• La cantidad máxima de ajuste se establece mediante gain a 20 unidades de porcentaje,
• Código de demostración. El código real y los valores de ajuste se alterarían caso por caso, dependiendo de por qué y cómo se realizan los ajustes de color.

Al aleatorizar solo el tono, es más rápido.

Los colores HSLA están hechos de Matiz, saturación, luminosidad y alfa.

Por ejemplo, la luminosidad se ajustará según sea necesario (tercer valor).

function randomHSL()
    return "hsla(" + ~~(360 * Math.random()) + "," +
                    "70%,"+
                    "80%,1)"
  

rdm.onclick = (function()
   document.body.style.backgroundColor = randomHSL()
)
rdm.click()

Random pastel color!

O similar:

function randomHSL()
    return `hsla($~~(360 * Math.random()),70%,70%,0.8)`
  

rdm.onclick = (function()
   document.body.style.backgroundColor = randomHSL()
)
rdm.click()

Random pastel color!

Recuerda que te permitimos agregar una reseña si diste con la contestación.

---

---

Utiliza Nuestro Buscador