Qué hace esta herramienta
Por qué usar un generador aleatorio
Modo Paleta y Rueda de Color
Bloquear, reemplazar y cambiar el número de colores
Sincronizar el fondo de la página
Copiar código y descargar archivos
La vista previa de la interfaz en vivo
Funciones explicadas
Paletas aleatorias de 2 a 10 colores
El botón Generar Aleatorios o la barra espaciadora crea una nueva paleta. Es la forma más rápida de explorar. Los colores son completamente aleatorios, por lo que algunas combinaciones pueden no funcionar bien juntas.
Bloquear y reemplazar colores individuales
Bloquea un color para conservarlo durante la siguiente generación. Usa el icono de actualización para cambiar una sola muestra. Así puedes crear una paleta paso a paso.
Valores HEX, RGB y HSL
Haz clic en un valor de una tarjeta para copiarlo. La tarjeta muestra el matiz y la saturación para HSL. El valor HSL copiado también incluye la luminosidad.
Vista de la rueda de color
Muestra dónde se encuentra cada color según su matiz y saturación. Es útil para comprobar si tus colores están agrupados o distribuidos por la rueda.
Fragmentos de código para cuatro formatos
Variables CSS, un objeto de colores de Tailwind, un array de React y constantes de Flutter/Dart. El fragmento de Tailwind es una parte para pegar en tu propia configuración, no un archivo completo.
Descarga SVG y copia JSON
El SVG es una tira sencilla de muestras con etiquetas HEX. La copia JSON contiene todos los datos de cada color: HEX, RGB, HSL y estado de bloqueo.
Sincronización del fondo y vista previa de la interfaz
Dos formas rápidas de ver la paleta en contexto: como fondo de toda la página y en una pequeña maqueta con botón, tarjeta e insignia.
¿Para qué puedes usarla?
Comenzar un nuevo diseño
Genera paletas hasta encontrar un color que te guste, bloquéalo y crea el resto de la paleta a su alrededor.
Configurar una hoja de estilos o un tema
Copia los colores como variables CSS o como un fragmento de Tailwind y pégalos directamente en tu proyecto.
Proyectos de Flutter y React
Obtén constantes de color en Dart o un array de cadenas HEX para JavaScript sin tener que convertirlas manualmente.
Compartir una paleta con un diseñador
Descarga la tira SVG o copia el JSON para enviar los colores junto con sus códigos HEX.
Enseñanza y práctica
Usa la rueda para observar cómo se relacionan el matiz y la saturación con la posición de un color, y compara visualmente colores aleatorios.
Información de la herramienta
| Tipo de herramienta | Generador de paletas de colores aleatorios |
|---|---|
| Número de colores | 2 a 10 (comienza con 6) |
| Valores de color mostrados | HEX, RGB, HSL |
| Rueda de color | Sí, solo matiz y saturación |
| Fragmentos de código | Variables CSS, Tailwind, array de React, Flutter/Dart |
| Descarga de archivo | SVG (palette.svg) |
| Copia de datos | JSON |
| Atajo de teclado | La barra espaciadora genera una nueva paleta |
| Guardado de paleta | No, la paleta se pierde al volver a cargar la página |
| Comprobación de contraste | No |
| Carga de archivos | Ninguna, no hay archivo de entrada |
| Procesamiento | En tu navegador |
Beneficios
- Genera y copia colores sin subir ningún archivo.
- El atajo de la barra espaciadora permite probar muchas paletas rápidamente.
- El bloqueo y el reemplazo de un solo color permiten perfeccionar una paleta en lugar de empezar de nuevo.
- El código para cuatro formatos está listo para copiar.
Limitaciones
- Los colores son completamente aleatorios. La herramienta no utiliza reglas de armonía, por lo que algunas combinaciones pueden chocar.
- Las paletas no se guardan. Al volver a cargar o cerrar la página se pierde la paleta actual, así que copia o descarga lo que quieras conservar.
- La herramienta no comprueba el contraste ni la accesibilidad. La vista previa es solo una muestra visual.
- La única descarga disponible es SVG. No hay descargas en PNG, PDF ni muestras de Adobe.
- La copia JSON utiliza el formato de datos propio de la herramienta. No es un archivo de tokens de Figma listo para usar.
- El atajo de la barra espaciadora no está disponible en pantallas táctiles sin teclado. Usa el botón en su lugar.
- La rueda muestra únicamente el matiz y la saturación, no la luminosidad.
Cómo gestiona tus datos la herramienta
La herramienta genera los colores, dibuja la rueda, crea los fragmentos de código y genera el archivo SVG en tu navegador. No hay carga de archivos y el propio código de la herramienta no envía tu paleta a un servidor. La función de copia utiliza el portapapeles de tu navegador.
Privacidad
La herramienta tampoco almacena tus paletas en el navegador. Esta declaración se refiere a la propia herramienta, no a otros scripts que pueda cargar el resto del sitio web.
Consejos
- Bloquea primero tu color principal y después sigue generando para encontrar colores de acento.
- Activa la sincronización del fondo de la página para ver el primer color a tamaño completo.
- Aumenta el número de colores a 10 para explorar y redúcelo cuando hayas encontrado algunos que te gusten.
- Copia tu paleta antes de volver a cargar la página, porque no se guarda.
- Antes de usar una paleta para texto, comprueba el contraste con una herramienta específica de contraste.
Preguntas frecuentes
¿Necesito una cuenta para usarlo?
No. La herramienta no requiere iniciar sesión. Abre la página y empieza a generar.
¿Los colores son realmente aleatorios?
Sí. Cada color se selecciona al azar entre todos los valores HEX. La herramienta no sigue ninguna regla de armonía, por lo que algunas paletas se verán bien y otras no.
¿Cuántos colores puedo generar?
De 2 a 10 cada vez. Una nueva paleta comienza con 6 colores.
¿Cómo puedo conservar un color que me gusta?
Haz clic en el icono de bloqueo de su tarjeta. Los colores bloqueados permanecen en su lugar cuando generas una nueva paleta. El icono de actualización reemplaza únicamente ese color.
¿Qué formatos puedo copiar?
Los colores individuales se pueden copiar como HEX, RGB o HSL. Toda la paleta se puede copiar como variables CSS, un fragmento de colores de Tailwind, un array de React o constantes de Flutter/Dart. También se puede copiar como JSON.
¿Puedo descargar la paleta como archivo?
Sí, como un archivo SVG llamado palette.svg. Muestra una muestra por cada color junto con su código HEX. No hay descargas en PNG, PDF ni muestras de Adobe.
¿Comprueba el contraste del texto o la accesibilidad?
No. La vista previa de la parte inferior es solo una muestra visual. Usa una herramienta de contraste antes de elegir colores para texto y fondos.
¿Se guarda mi paleta si vuelvo a cargar la página?
No. La paleta no se almacena. Copia los códigos o descarga el SVG antes de salir de la página.
¿Funciona en un teléfono?
El botón Generar Aleatorios, los bloqueos y los botones de copia funcionan mediante controles táctiles. El atajo de la barra espaciadora necesita un teclado.