Saltar a la paleta

Generador de paletas de colores - Generador de paletas de colores online gratis

Última actualización:

Generador de paletas de colores y herramienta de armonía de color online, 100% gratis e instantáneo.

Pulsa Espacio para generar · haz clic en un código para copiarlo

Publicidad

Generador de paletas de colores de un vistazo

Cómo generar una combinación de colores que combine bien

El Generador de paletas de colores es un generador de combinaciones de colores gratis que crea cinco colores armoniosos con un solo clic. Elige una regla de armonía, pulsa la barra espaciadora hasta que una paleta te convenza, bloquea los colores que te gusten y sigue explorando a su alrededor.

  1. Elige una armonía: Aleatoria, Monocromática, Análoga, Complementaria o Triádica.
  2. Pulsa Espacio o haz clic en Generar nueva paleta.
  3. Bloquea tus columnas favoritas con el icono del candado.
  4. Copia los valores HEX, RGB o HSL y exporta como PNG, variables CSS o enlace.

Las armonías de color explicadas

Monocromática

Un solo tono con distintos niveles de luminosidad y saturación. Limpia y segura.

Análoga

Tonos vecinos en la rueda de color para diseños tranquilos y naturales.

Complementaria

Tonos opuestos para un contraste fuerte. Una gran herramienta de colores complementarios para destacar botones de llamada a la acción.

Triádica

Tres tonos espaciados por igual para paletas vibrantes y equilibradas.

Preguntas frecuentes

¿Cómo generar una combinación de colores que combine bien?

Pulsa la barra espaciadora o haz clic en Generar nueva paleta. Elige una armonía como Análoga, Complementaria o Triádica para obtener colores que combinan por diseño.

¿Cómo bloqueo un color de la paleta?

Haz clic en el icono del candado de cualquier columna. Los colores bloqueados se mantienen fijos mientras las demás columnas se regeneran a su alrededor.

¿Puedo exportar los colores como variables CSS?

Sí. Haz clic en Variables CSS para obtener un bloque :root listo para pegar. También puedes exportar una imagen PNG o copiar una URL para compartir.

¿Cómo convierto HEX a RGB o HSL?

Cada columna tiene botones RGB y HSL. Haz clic en uno para copiar ese formato, o haz clic en el código HEX para copiar el valor hexadecimal.

¿Qué es un generador de colores CSS y cómo lo uso aquí?

Haz clic en Variables CSS para convertir tu paleta actual en un bloque :root con --color-1 a --color-5 que puedes pegar en cualquier hoja de estilos.

¿El Generador de paletas de colores es gratis y privado?

Sí. Es 100% gratis y funciona completamente en tu navegador. Las paletas nunca se suben a ningún sitio.

¿Todas las herramientas de FreeToolCabin se prueban para garantizar su calidad y precisión?

¡Sí! Cada herramienta de nuestro sitio pasa por pruebas automáticas de control de calidad en navegadores reales para garantizar alta precisión, resultados correctos y cero errores. Si encuentras un error o tienes una sugerencia, escríbenos a [email protected] y nuestro equipo lo revisará de inmediato.

Cómo leer los códigos HEX, RGB y HSL

Los tres formatos describen el mismo color; solo lo dividen de forma distinta.

Ejemplo práctico con el verde bosque #2F6B4F: 2F = 2 × 16 + 15 = 47, 6B = 6 × 16 + 11 = 107 y 4F = 4 × 16 + 15 = 79, así que el valor RGB es rgb(47, 107, 79). En HSL es aproximadamente hsl(152, 39%, 30%): un tono verde azulado, moderadamente saturado y bastante oscuro. Para obtener un tono más claro para un fondo, mantén el tono y la saturación y sube la luminosidad a alrededor del 90%. Para conversiones sueltas, el convertidor HEX a RGB muestra cada paso.

Cómo se relacionan las reglas de armonía en la rueda de color

ArmoníaRelación entre tonosSensación típica
MonocromáticaUn tono, con luminosidad y saturación variadasTranquila, minimalista, fácil de mantener coherente
AnálogaTonos contiguos, separados unos 30°Natural, como hojas de otoño o un atardecer
ComplementariaDos tonos separados 180°Mucha energía, gran protagonismo de los acentos
TriádicaTres tonos separados 120°Divertida y colorida, necesita un color dominante

Las paletas complementarias y triádicas se ven recargadas si se usan todos los colores con toda su intensidad. Elige uno como color principal y reserva los demás para pequeños acentos.

Cómo convertir cinco colores en un diseño útil

Una paleta es más fácil de aplicar cuando cada color tiene una función. Un reparto habitual para sitios web y presentaciones:

  1. Fondo: el color más claro (o, en modo oscuro, el más oscuro).
  2. Superficie: un tono ligeramente distinto para tarjetas, paneles y filas de tablas.
  3. Texto: el color más oscuro, o un casi negro teñido hacia tu tono principal.
  4. Principal: botones, enlaces y estados activos.
  5. Acento: insignias, resaltados y lo único que quieres que se note.

La regla 60-30-10 del diseño de interiores también funciona aquí: alrededor del 60% del área en el color dominante, el 30% en un color secundario y el 10% en el acento. Al pegar las variables CSS exportadas, cambia el nombre de --color-1 a --color-5 por nombres de función como --bg y --primary para que la hoja de estilos siga siendo legible.

Comprueba el contraste antes de decidirte

Colores que se ven bien juntos pueden ser difíciles de leer como texto sobre un fondo. Las pautas de accesibilidad WCAG piden una relación de contraste de al menos 4.5:1 para el texto normal y 3:1 para el texto grande (unos 24 px normal o 19 px en negrita) en el nivel AA. Las paletas de tonos medios a menudo no lo cumplen, sobre todo con texto claro sobre botones saturados. Prueba tus pares de texto y fondo en el Comprobador de contraste de color y oscurece o aclara un color en HSL hasta que lo cumpla.

Más preguntas sobre el Generador de paletas de colores

¿Puedo crear una paleta a partir de una foto o un logotipo que ya tengo?

Este generador crea paletas a partir de reglas de armonía. Para extraer colores de una imagen existente, usa una herramienta de colores de imagen; luego bloquea esos colores aquí y genera el resto a su alrededor.

¿Por qué los colores de mi paleta se ven distintos al imprimirlos?

Las pantallas mezclan luz en RGB mientras que las impresoras mezclan tinta en CMYK, que no puede reproducir algunos colores de pantalla brillantes y saturados. Pide una prueba de impresión o convierte los códigos HEX a CMYK y ajústalos antes de imprimir.

¿Cuántos colores debe tener la paleta de una marca?

Muchas marcas trabajan con uno o dos colores principales, un neutro para texto y fondos, y un acento. Cinco colores cubren eso, y puedes añadir tonos más claros y más oscuros de cada uno según lo necesites.

¿Una paleta con buena armonía es accesible automáticamente?

No. La armonía describe cómo se relacionan los tonos en la rueda de color, mientras que la accesibilidad depende del contraste de luminosidad. Dos colores armoniosos con una luminosidad parecida pueden ser ilegibles como texto y fondo.

Variables CSS
¡Copiado!