Generador de colores aleatorios con estilos y control HSL
Este generador de colores aleatorios crea colores al instante y te deja guiar el resultado en lugar de dejarlo todo al azar. Elige un estilo predefinido o ajusta con precisión los rangos de matiz, saturación y luminosidad, y cada color llega con valores HEX, RGB y HSL listos para copiar.
Genera un solo color para verlo en detalle o crea hasta 100 colores a la vez en una cuadrícula. Bloquea las muestras que te gusten mientras revuelves el resto, guarda favoritos que se conservan entre visitas y exporta tus colores como variables CSS. Está pensado para diseñadores web, diseñadores UI/UX y gráficos, y para quienes solo necesitan valores de color útiles cuanto antes.
Cómo usar el generador de colores aleatorios
Elige un estilo predefinido
Selecciona Cualquiera, Pastel, Vívido, Oscuro, Claro, Apagado o Neón para definir el estilo general del color. Cada estilo ajusta los rangos HSL por ti.
Define cuántos colores
Toca 1, 5, 10 o 20, o escribe cualquier número del 1 al 100 en el campo personalizado. Un color muestra una vista previa grande; varios colores aparecen en una cuadrícula.
Genera los colores
Toca Generar o presiona Space para crear un nuevo conjunto. Abre el panel Avanzado cuando quieras para arrastrar los controles de matiz, saturación y luminosidad y tener un control preciso.
Copia o guarda lo que te guste
Haz clic en cualquier valor HEX, RGB o HSL para copiarlo, toca el corazón para agregar un favorito o usa Copiar todo para tomar todos los colores actuales como variables CSS.
Funciones
Estilos de color predefinidos
Siete estilos integrados —Cualquiera, Pastel, Vívido, Oscuro, Claro, Apagado y Neón— fijan los rangos HSL adecuados con un solo clic.
Controles deslizantes de rango HSL
Arrastra los dos extremos para fijar el matiz (0–360°), la saturación (0–100%) y la luminosidad (0–100%) y obtener resultados precisos y repetibles.
Generación de varios colores
Genera de 1 a 100 colores a la vez: una vista previa grande de un solo color o una cuadrícula de muestras con copiado rápido.
Bloqueo de colores
En la vista de cuadrícula, bloquea los colores que quieres conservar y regenera el resto para armar una paleta muestra a muestra.
Sistema de favoritos
Guarda los colores que te encantan con el ícono de corazón. Los favoritos se almacenan en tu navegador y permanecen entre sesiones.
Formatos HEX, RGB y HSL
Cada color muestra los tres formatos. Haz clic en cualquier valor para copiarlo directo a tu portapapeles.
Exportar como variables CSS
Usa Copiar todo o exporta tus favoritos para obtener un bloque :root de propiedades personalizadas CSS listo para pegar.
Atajo de teclado
Presiona Space para generar un nuevo conjunto de colores al instante, sin tocar el mouse.
Preguntas frecuentes
¿Cómo funciona un generador de colores aleatorios?
Cada color se elige al azar dentro de los rangos de matiz, saturación y luminosidad que defines. Elegir un estilo predefinido o mover los controles HSL acota esos rangos, así que el resultado es aleatorio pero siempre dentro del look que quieres. Toca Generar o presiona Space para un nuevo conjunto.
¿Qué formatos de color admite (HEX, RGB, HSL)?
Cada color se muestra en tres formatos: HEX (por ejemplo #FF5733), RGB (rgb(255, 87, 51)) y HSL (hsl(14, 100%, 60%)). Haz clic en cualquier valor para copiarlo a tu portapapeles.
¿Cómo genero muchos colores aleatorios a la vez?
Toca los botones 1, 5, 10 o 20, o escribe cualquier número del 1 al 100 en el campo personalizado que está junto a ellos. Un solo color muestra una vista previa grande con todos los formatos, mientras que varios colores aparecen en una cuadrícula con valores HEX de copiado rápido.
¿Puedo obtener colores pastel, vívidos o neón aleatorios?
Sí. Los estilos Pastel, Vívido y Neón aplican cada uno sus propios rangos de saturación y luminosidad: suaves y claros para los pastel, intensos y saturados para los vívidos, y tonos brillantes de alta saturación para el neón. Los estilos Oscuro, Claro y Apagado cubren el resto del espectro.
¿Cómo conservo algunos colores mientras cambio otros?
Cuando generas más de un color, cada muestra tiene un ícono de candado. Bloquea los colores que quieres conservar y vuelve a generar: los colores bloqueados permanecen y el resto se vuelve a revolver. Toca el candado de nuevo para desbloquear.
¿Puedo guardar colores para más tarde?
Sí. Haz clic en el ícono de corazón de cualquier color para agregarlo a tus favoritos, que se guardan en tu navegador y te esperan cuando regreses. Como viven en el almacenamiento local, los favoritos pueden borrarse si limpias los datos del navegador o usas el modo privado, así que exporta los que quieras conservar.
¿Cómo exporto colores como variables CSS?
Toca Copiar todo para copiar los colores actuales como un bloque :root de propiedades personalizadas CSS, por ejemplo --color-1: #FF5733;. Para los colores guardados, usa el ícono de exportar en la sección de favoritos para copiarlos en el mismo formato.
¿Mis datos son privados?
Sí. Toda la generación de colores ocurre por completo en tu navegador y tus favoritos se almacenan localmente en tu dispositivo. Nada se envía a ningún servidor.
Aún no hay comentarios. ¡Sé el primero en comentar!