Tabla de contenido
Una vez más aquí. Hoy vengo a dejar un pequeño artículo relacionado con pintar mi casa. El caso es que tras lo que ha sucedido en mi vida en fechas más o menos recientes, me han dicho que una de las cosas que debo hacer, es cambiar mi casa para olvidarme de todo lo que aquí paso. Y para empezar, a pasar página, es necesario pintar las paredes. Pero como mi gusto para los colores es «relativo», pues me he puesto a crear un generador de paleta de colores. Estos colores se van a crear bien sea de forma aleatoria o con un color base. Así quizás pueda encontrar colores que me gusten.
Como decía, en las siguientes líneas, vamos a ver cómo se puede crear un generador de paleta de colores aleatorios o con un color de base, utilizando HTML, CSS y JavaScript. Los usuarios también podrán añadir el número de colores que quieren que se muestre, después tan solo será necesario hacer clic en el botón ‘GENERAR PALETA DE COLORES‘ para que se nos muestre en pantalla el número de colores que queramos ver. Además de ver en pantalla el color, también se verá justo debajo el código hexadecimal de dicho color. Este código también se mostrará como tooltip. Y para los que quieran copiar el código del color generado, solo será necesario que hagan clic sobre la tarjeta del color. Esto mostrará un mensaje que dice «Copiado«, y ya se podrá pegar el código hexadecimal en cualquier parte.
¿Cómo crear un generador de paleta de colores con JavaScript?

Para crear un generador de paleta de colores aleatorios utilizando, vamos a utilizar un poco de HTML, CSS y JavaScript. Primero empezaremos creando una carpeta para guardar dentro los tres archivos necesarios.

Archivo index.html
Para comenzar, vamos a crear el archivo index.html. Con el código que vamos a añadir aquí crearemos el diseño básico del proyecto. La etiqueta <!DOCTYPE html>
va a especificar la versión de HTML que se está utilizando. La etiqueta html
encierra todo el contenido de la página web (como casi siempre)
La sección head
contiene información sobre la página, como su título, descripción, y referencia a archivos externos, como el archivo de estilos style.css
, que veremos más adelante.
En la sección body
es donde se encuentra el contenido principal de la página, que en este caso es un formulario para generar una paleta de colores y una lista de colores generados. El formulario incluye controles para especificar el número de colores y un color base, así como una opción para generar colores aleatorios. El botón «GENERAR PALETA DE COLORES» desencadena la generación de la paleta.
El contenedor ‘ul’ está vacío ahora, pero se llenará con elementos ‘li’ (que representan colores) más tarde usando el código JavaScript que veremos en breve.
Finalmente, el archivo script.js
se carga al final de la página y contiene el código JavaScript con el que generaremos la paleta de colores. El atributo defer
asegura que el archivo de script se cargue después de que la página web se haya cargado completamente.
Dentro del archivo, el código a utilizar será el siguiente:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Generador de paleta de colores</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="titulo" aria-label="Hecho en entreunosyceros.net"></div> <div class="palette-controls"> <label for="num-colors">Número de colores a generar:</label><br/> <input type="number" id="num-colors" value="5" min="1" max="100"><br/> <label for="base-color">Color base:</label><br/> <input type="color" id="base-color" name="base-color" value="#ffffff"><br/> <input type="checkbox" id="random-colors" /> <label for="random-colors">Generar colores aleatorios</label> </div> <ul class="container"></ul> <button class="refresh-btn" aria-label="Generar nueva paleta de colores">GENERAR PALETA DE COLORES</button> <script src="script.js" type="text/javascript" defer></script> </body> </html>
Una vez pegado este código, solo queda guardar el contenido y pasar al siguiente archivo.
Archivo script.js
En el archivo script.js utilizaremos el código para generar una paleta de colores aleatorios y basados en un color base en una página web.
Primero vamos a definir variables que seleccionan diferentes elementos HTML en la página, como el contenedor de colores, el botón de refresco, el campo de entrada de número de colores, el campo de entrada de color base y el checkbox para generar colores aleatorios.
Después se definen dos funciones. La primera función, getRandomHex
, genera un código de color hexadecimal aleatorio. La segunda función, generarPaleta
, utiliza los valores de entrada del usuario para generar una paleta de colores y actualizar el contenido HTML en la página con los colores generados.
La función generarPaleta
primero limpia el contenedor de colores y luego obtiene el número de colores ingresado por el usuario y el color base. También verifica si el checkbox de colores aleatorios está marcado. Luego, para cada color generado, la función genera un código de color hexadecimal aleatorio o basado en el color base y crea un nuevo elemento de lista HTML que contiene el color generado. La función también agrega un evento de clic al elemento de lista para copiar el color al portapapeles.
Finalmente se añade un evento de clic al botón de refresco para generar una nueva paleta de colores y se llama a la función generarPaleta
una vez para generar la paleta inicial de colores.
const contenedor = document.querySelector(".container"); const botonRefrescar = document.querySelector(".refresh-btn"); const inputNumColors = document.querySelector("#num-colors"); const colorInput = document.querySelector("#base-color"); const checkboxRandomColors = document.querySelector("#random-colors"); // Función para generar un código de color hex aleatorio const getRandomHex = () => { return `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, "0")}`; }; // Función para generar una paleta de colores aleatorios const generarPaleta = () => { // Limpiar el contenedor contenedor.innerHTML = ""; // Obtener el número de colores ingresado por el usuario const numColors = parseInt(inputNumColors.value); // Obtener el color base ingresado por el usuario const baseColor = colorInput.value; // Verificar si el checkbox de colores aleatorios está marcado const checkboxRandomColors = document.querySelector("#random-colors"); const useRandomColors = checkboxRandomColors.checked; // Generar una paleta de colores aleatorios o basados en el color base for (let i = 0; i < numColors; i++) { let randomHex = ""; if (useRandomColors) { // Generar un código de color hex aleatorio randomHex = getRandomHex(); } else if (baseColor) { // Generar un código de color hex aleatorio basado en el color base const baseRgb = baseColor.substring(1).match(/.{2}/g).map((val) => parseInt(val, 16)); const randomRgb = baseRgb.map((val) => val + Math.floor((255 - val) * Math.random())); randomHex = `#${randomRgb.map((val) => val.toString(16).padStart(2, "0")).join("")}`; } // Crear un nuevo elemento 'li' y agregarlo al contenedor const color = document.createElement("li"); color.classList.add("color"); color.innerHTML = `<div class="rect-box" style="background: ${randomHex}"></div> <span class="hex-value">${randomHex}</span>`; // Agregar un evento de clic al elemento 'li' actual para copiar el color color.addEventListener("click", () => copiarColor(color, randomHex)); contenedor.appendChild(color); } }; checkboxRandomColors.addEventListener("change", generarPaleta); generarPaleta(); // Función para copiar el código de color al portapapeles const copiarColor = (elem, hexVal) => { const colorElement = elem.querySelector(".hex-value"); // Copiar el valor de hex, actualizar el texto a 'Copiado', // y volver a cambiar el texto al valor de hex original después de 1 segundo navigator.clipboard.writeText(hexVal).then(() => { colorElement.innerText = "Copiado"; setTimeout(() => (colorElement.innerText = hexVal), 1000); }).catch(() => alert("¡Error al copiar el código de color!")); // Mostrar alerta si el color no se puede copiar }; // Agregar un evento de clic al botón de refresco para generar una nueva paleta de colores botonRefrescar.addEventListener("click", generarPaleta);
Tras pegar este código en el archivo javascript, solo queda guardar el contenido y pasar a darle las reglas CSS para que la cosa se vea bonita.
Archivo style.css
En este archivo llamado style.css, vamos a definir los estilos para que la página web en la que se va a generar la paleta de colores se vea correctamente. Los estilos se explican a continuación:
- El selector universal (*) establece estilos globales para todos los elementos de la página, como márgenes y relleno (padding), y el valor ‘border-box’ para la propiedad ‘box-sizing’, lo que significa que el tamaño de un elemento incluirá tanto su contenido como sus bordes. También se establece la fuente de la página.
- El estilo para el selector ‘body’ establece un color de fondo para todo el cuerpo de la página.
- .container establece un margen, el uso de ‘flexbox’ para colocar los elementos en el centro y con ‘flex-wrap’ para envolver los elementos si no caben en la misma fila.
- El estilo para el selector ‘.container .color’ establece un margen y relleno específico para los elementos de color de la paleta, así como un estilo de lista sin viñetas, un cursor de puntero y un borde redondeado. También se establece un sombreado en el borde y una transición suave en los cambios de estilo.
- El estilo para el selector ‘.container .color:active’ define un efecto de escala al hacer clic en un elemento de la paleta.
- En el caso del selector ‘.palette-controls’, establece estilos para el formulario que permite al usuario especificar el número de colores que se deben generar.
- En este caso, ‘.color .rect-box’ establece las dimensiones y el borde redondeado para el cuadro de color.
- El estilo para el selector ‘.color:hover .rect-box’ establece un efecto de brillo en el cuadro de color cuando se pasa el ratón por encima.
- Al utilizar el selector ‘.color .hex-value’, se establece un estilo para mostrar el valor hexadecimal del color generado.
- El estilo para el selector ‘.refresh-btn’ establece los estilos para un botón de actualización que permite al usuario generar una nueva paleta de colores aleatoria. También se establecen estilos de posicionamiento, un borde redondeado y una transición suave en los cambios de estilo. Para el hover de este selecctor se establece un efecto de cambio de color en el botón cuando se pasa el ratón por encima.
- La regla ‘.titulo’ establece estilos para el título de la página, incluyendo un sombreado de texto y transiciones suaves. ‘.titulo:hover’ define un efecto de sombra de texto en el título cuando se pasa el ratón por encima.
- El estilo para el pseudo-elemento ‘::after’ establece el contenido del elemento después del título.
- Por último, se establece una media query que ajusta algunos de los estilos anteriores para pantallas con un ancho máximo de 650 píxeles.
/* Estilo global para todos los elementos */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Comic Sans MS', sans-serif; } /* Estilo para el body */ body { background: #2E0040;; } /* Estilo para el contenedor principal */ .container { margin: 20px; display: flex; justify-content: center; flex-wrap: wrap; } /* Estilo para los elementos de color */ .container .color { margin: 12px; padding: 7px; list-style: none; cursor: pointer; text-align: center; background: #fff; border-radius: 6px; box-shadow: 0 10px 25px rgba(52,87,220,0.08); transition: all 0.3s ease; border: 6px solid red; } /* Estilo para cuando se hace clic en un elemento de color */ .container .color:active { transform: scale(0.95); } /* Formulario de número de colores a generar*/ .palette-controls{ text-align: center; color: #fff; font-weight: bold; } /* Estilo para la caja de color */ .color .rect-box { width: 185px; height: 188px; border-radius: 4px; } /* Estilo para cuando se pasa el ratón por encima de un elemento de color */ .color:hover .rect-box { filter: brightness(107%); } /* Estilo para el valor hexadecimal del color */ .color .hex-value { display: block; color: #000000; user-select: none; font-weight: 500; font-size: 1.2rem; margin: 12px 0 8px; text-transform: uppercase; } /* Estilo para el botón de actualización */ .refresh-btn { position: fixed; left: 50%; bottom: 40px; color: #fff; cursor: pointer; outline: none; font-weight: 500; font-size: 1.1rem; border-radius: 10px; background: #5700bb; padding: 13px 20px; border: 2px solid #fff; transform: translateX(-50%); box-shadow: 0 15px 30px rgba(52,87,220,0.2); transition: all 0.3s ease; } /* Estilo para cuando se pasa el ratón por encima del botón de actualización */ .refresh-btn:hover { background: #704dff; } /*Título*/ .titulo { box-sizing: border-box; padding: 10px; border: none; font: normal 38px / normal "Warnes", Helvetica, sans-serif; color: rgba(255, 255, 255, 1); text-align: center; white-space: pre; text-shadow: 0 0 10px rgb(255, 0, 0), 0 0 20px rgba(255, 0, 0), 0 0 30px rgba(255, 0, 0), 0 0 40px #727272, 0 0 70px #727272, 0 0 80px #4e4e4e, 0 0 100px #2b2b2b; -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); width: 100%; margin-top: 10px; margin-bottom: 10px; } /* Estilo para el título cuando se le hace hover */ .titulo:hover { text-shadow: 0 0 10px rgb(73, 73, 73), 0 0 20px rgb(56, 56, 56), 0 0 30px rgb(48, 48, 48), 0 0 40px #5c5c5c, 0 0 70px #000000, 0 0 80px #000000, 0 0 100px #000000; } /* Texto del título */ .titulo::after { content: "Generador de paleta de colores aleatorios"; } /* Para pantallas con un ancho máximo de 650 píxeles */ @media screen and (max-width: 650px) { .titulo{ font: normal 16px / normal "Warnes", Helvetica, sans-serif; } .titulo::after { content: "Generador de paleta de colores"; } .container { margin: 10px; } .container .color { margin: 8px; padding: 5px; width: calc(100% / 2 - 20px); } .color .rect-box { width: 100%; height: 148px; } .color .hex-value { font-size: 1.05rem; } .refresh-btn { font-size: 1rem; } }
Demo del generador de paleta de colores – Descarga desde GitHub
Y una vez guardados estos códigos, cada uno dentro de su correspondiente archivo, ya podemos ejecutar nuestro generador de paleta de colores creado con JavaScript, haciendo doble clic sobre el archivo index.html. Si quieres ver funcionando este pequeño programa, puedes verlo en el siguiente enlace.
Si por lo que sea, alguien quiere descar el código, además de copiar el que dejo aquí publicado, también puede hacerlo desde el repositorio en GitHub en lo que lo he alojado.