¿Cómo puedo generar tonos aleatorios de un RGB?

18 Jun, 2023 Programación 0

Estoy tratando de encontrar una manera de generar tonalidades aleatorias de un color RGB.

Como se puede ver en el fragmento de código, la mayoría de las tonalidades están bien, pero hay algunas que son completamente irrelevantes visualmente. ¿Existe una manera de mejorar esto?

let resultsContainer = document.getElementById(‘results’)
let original = { r: 244, g: 102, b: 255 } // generar tonalidades aleatorias de este color
let max = 100
let min = 100
let results = []

document.getElementById(‘original’).style.background = rgb(${original.r}, ${original.g}, ${original.b})

function randomBetween(min, max) {
min = min < 0 ? 0 : min
max = max > 255 ? 255 : max
return min + Math.floor(Math.random() * (max – min + 1))
}

while (results.length < 10) {
results.push({
r: randomBetween(original.r-min, original.r+max),
g: randomBetween(original.g-min, original.g+max),
b: randomBetween(original.b-min, original.b+max),
})
}

results.forEach(({ r, g, b }) => {
let result = document.createElement(‘div’)
result.className = ‘result’
result.style.background = rgb(${r}, ${g}, ${b})
resultsContainer.appendChild(result)
})

. resultado {
float: izquierda;
ancho: 50px;
altura: 50px;
}

Mi método randomBetween() está inspirado en https://stackoverflow.com/a/23095771/2272048

const chroma = require('chroma-js'); const original = { r: 244, g: 102, b: 255 }; const range = 100; const numColors = 10; const originalColor = chroma.rgb(original.r, original.g, original.b); const scale = chroma.scale(['white', originalColor, 'black']).domain([0, range]); const results = []; for (let i = 0; i < numColors; i++) { const color = scale(Math.random() * range).rgb(); results.push(color); } // imprimir resultados console.log(results);

Answer

davy.ai

June 18, 2023 at 12:48 am
Para mejorar la generación de tonos aleatorios de un color RGB, un enfoque posible es utilizar una biblioteca de colores, como chroma.js. Esta biblioteca proporciona varias funciones de manipulación de colores, incluyendo la generación de colores aleatorios dentro de un rango especificado. Aquí hay un ejemplo de fragmento de código utilizando chroma.js:
```
const chroma = require('chroma-js');

const original = { r: 244, g: 102, b: 255 };
const range = 100;
const numColors = 10;

const originalColor = chroma.rgb(original.r, original.g, original.b);
const scale = chroma.scale(['white', originalColor, 'black']).domain([0, range]);

const results = [];

for (let i = 0; i < numColors; i++) {
  const color = scale(Math.random() * range).rgb();
  results.push(color);
}

// imprimir resultados
console.log(results);
```
En este código, definimos el color RGB original y el rango de tonos aleatorios a generar. Luego convertimos el color original en un objeto de color de chroma.js y definimos una escala de color utilizando un rango que va desde blanco hasta el color original hasta negro. Luego generamos los colores aleatorios seleccionando aleatoriamente un valor en el rango y obteniendo el color correspondiente de la escala de color. Finalmente, almacenamos los resultados en un arreglo.

Al utilizar una biblioteca de colores como chroma.js, podemos generar tonos aleatorios que sean más visualmente relevantes y estéticamente atractivos.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo puedo generar tonos aleatorios de un RGB?

Answer

davy.ai