Generador de Paletas de Color
Elige un color base en HEX, selecciona un esquema de armonía y genera una paleta lista para copiar en una maqueta de interfaz, una landing, un gráfico o un sistema de diseño. La herramienta normaliza valores HEX cortos o completos, calcula la paleta con cambios de tono y luminosidad en HSL y devuelve muestras clicables más propiedades personalizadas de CSS.
Cómo funciona el generador de paletas
-
1
Introduce un color base HEX
Usa el selector de color o escribe un valor como #6366F1. La abreviatura de tres dígitos se expande automáticamente.
-
2
Elige un esquema de armonía
Selecciona monocromático, análogo, complementario, triádico o tetrádico según necesites una escala tranquila, tonos cercanos o acentos más intensos.
-
3
Genera y revisa las muestras
La paleta aparece como muestras HEX copiables. Comprueba los colores en la interfaz real antes de darlos por definitivos.
-
4
Copia la salida
En el paso de exportación puedes copiar la lista HEX o variables CSS como --palette-1, --palette-2 y sucesivas.
Elige el esquema adecuado
| Esquema | Salida | Mejor uso | Revisa antes de publicar |
|---|---|---|---|
| Monocromático | 5 tintes y sombras de un tono | Escalas de marca, tarjetas, fondos | Añade un acento o neutro si todo se ve demasiado plano |
| Análogo | 5 tonos vecinos | Degradados, ilustraciones, pantallas serenas | Asegúrate de que los colores cercanos se distingan bien |
| Complementario | Colores base más el tono opuesto | Acentos para CTA, insignias, visuales con energía | Prueba con cuidado el contraste de texto e iconos |
| Triádico | 3 tonos repartidos de forma uniforme | Branding lúdico, gráficos, colores de categoría | Elige un color dominante para que la UI no se vea saturada |
| Tetrádico | 4 tonos alrededor de la rueda | Paneles, etiquetas, sistemas visuales amplios | Reduce la saturación si la paleta ocupa superficies grandes |
Estructura práctica de una paleta
Una armonía generada es un punto de partida, no un sistema de diseño completo. Para una UI en producción, nombra los colores por función y no por apariencia: primary, secondary, accent, surface, border, text, success, warning y error. Añade grises neutros por separado, porque los neutros suelen requerir un control más fino que el de un generador basado en tono.
Usa los colores HEX generados directamente en un prototipo y conserva solo los que funcionen en pantallas reales, fondos claros y oscuros, y estados hover o deshabilitados.
Exportación a variables CSS
El paso de exportación usa propiedades personalizadas sencillas:
:root {
--palette-1: #6366F1;
--palette-2: #818CF8;
--palette-3: #4F46E5;
}
Renombra esas variables con los nombres de tu propio sistema cuando las pegues en CSS, tokens de tema de Tailwind o un archivo de design tokens.
HEX, RGB y HSL
La entrada y la salida visible usan HEX porque es el formato más rápido para copiar entre CSS, herramientas de diseño y comentarios de tareas. Internamente, el color base se convierte a HSL, se desplaza el tono o la luminosidad y los resultados vuelven a HEX. Si necesitas los mismos colores en RGB o HSL, pasa los HEX generados por un conversor de códigos de color.
Contraste y accesibilidad
Los esquemas de armonía no garantizan accesibilidad. Antes de usar una pareja en texto, controles o gráficos, compruébala con un verificador de contraste:
- Texto normal sobre su fondo: mínimo 4,5:1 para WCAG AA.
- Texto grande: mínimo 3:1.
- Partes importantes no textuales, como bordes de botones, iconos, anillos de foco y límites de gráficos: mínimo 3:1 frente a colores adyacentes.
Tampoco te apoyes solo en el tono. Dos colores pueden parecer diferentes en una muestra y fallar en texto pequeño, iconos finos o etiquetas de estado.
Consejos
- Empieza con un color base con significado, como un color de marca, de producto o de campaña ya existente.
- Elige un color dominante y usa el resto como apoyo. Dar el mismo peso a todos suele recargar la interfaz.
- Baja la saturación en superficies grandes, por ejemplo fondos de app, paneles y secciones hero.
- Vuelve a probar después de aplicar el tema. Una paleta que funciona sobre blanco puede fallar en modo oscuro o en gráficos densos.
Preguntas frecuentes
No. Crea armonías de color; después debes probar las parejas importantes de primer plano y fondo en un verificador de contraste antes de publicar.
Cada esquema sigue una relación diferente en la rueda de color. Triádico devuelve tres tonos, tetrádico devuelve cuatro, mientras que monocromático, análogo y complementario ofrecen cinco muestras para trabajar con más margen.
La entrada actual es HEX. Convierte primero RGB o HSL a HEX y usa ese resultado como color base.
Las paletas monocromáticas y análogas suelen ser más fáciles para superficies de UI discretas. Las complementarias, triádicas y tetrádicas funcionan mejor para acentos, categorías y campañas visuales.
Herramientas relacionadas
Generador de letras aleatorias
Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.
Formateador de JSON
Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.
Simplificador de Álgebra Booleana
Simplifica expresiones booleanas usando mapas de Karnaugh y el algoritmo de Quine-McCluskey. Muestra cada paso de minimización y una forma final SOP/POS.
Generador de colores aleatorios
Genera de 1 a 50 colores HEX aleatorios con muestras para previsualizar, copiar y usar en CSS, pruebas o exploración de paletas.
Convertidor de BBCode a HTML
Convierte BBCode (marcado de tablones de anuncios) a HTML limpio. Maneja etiquetas de formato, listas, citas, código, imágenes, enlaces y tablas.
Convertidor de binario a hex
Convierte entrada binaria en un valor hexadecimal simple en mayúsculas. Los caracteres no binarios se ignoran y los ceros iniciales no se conservan.