Paleta de colores: generador gratis con armonías
Una paleta de colores es un conjunto de tonos que combinan bien entre sí para un diseño, una web o una marca. Con este generador gratis y en español creas una paleta en segundos: elige una armonía o un color base, copia los códigos HEX, RGB y HSL y expórtalos como CSS. Forma parte de nuestras herramientas de color.
Toca un color para copiarlo · «Fijar» conserva un color al generar · Se calcula en tu navegador, no guardamos nada
Cómo crear una paleta de colores que funcione
Crear una buena paleta no es cuestión de suerte, sino de método. El proceso en cuatro pasos: 1) elige un color base que represente tu idea o tu marca; 2) aplica una armonía del círculo cromático para obtener los colores de apoyo; 3) reparte su peso con la regla 60-30-10 (60 % dominante, 30 % secundario, 10 % de acento); y 4) comprueba el contraste para que el texto se lea bien. El generador de arriba cubre los pasos 1 y 2 al instante.
Ejemplo: a partir de un verde base (#0D9084), una armonía complementaria propone un naranja cálido como color de acento, ideal para botones que destaquen sobre un fondo sobrio.
La rueda cromática y los tipos de armonía de color
La rueda cromática (o círculo cromático) ordena los colores según su tono y es la base de toda combinación. En ella distinguimos colores cálidos (rojos, naranjas, amarillos) y fríos (azules, verdes, violetas). A partir de su posición nacen las armonías, que son los tipos de paleta que puedes generar aquí:
- Monocromática: un único tono en distintas claridades y saturaciones. Sobria y elegante.
- Análoga: colores vecinos en la rueda. Transmite armonía y calma.
- Complementaria: dos colores opuestos. Máximo contraste y energía.
- Complementaria dividida: un color y los dos vecinos de su opuesto. Contraste más suave.
- Triádica: tres colores equidistantes. Vibrante y equilibrada.
- Tetrádica o cuadrada: cuatro colores en dos parejas complementarias. Rica pero difícil de equilibrar.
HEX, RGB y HSL: los códigos de color
Un mismo color se puede escribir de varias formas, y conviene conocerlas. El código HEX (#0D9084) es hexadecimal y domina en la web; RGB expresa el color por sus componentes de rojo, verde y azul de 0 a 255, el modelo aditivo de las pantallas; y HSL lo define por tono, saturación y luminosidad, lo que hace intuitivo crear versiones más claras u oscuras. Para impresión se usa además CMYK. Nuestra herramienta muestra HEX, RGB y HSL, y todos parten del espacio de color sRGB, el estándar de la web.
Paletas accesibles: por qué importa el contraste
Aquí está nuestro valor diferencial frente a los generadores más conocidos: pensamos la paleta también en clave de accesibilidad. Un color bonito no sirve de nada si el texto encima no se lee. Por eso, sobre cada muestra ajustamos automáticamente el color del texto según su luminosidad, siguiendo el criterio de las pautas WCAG del W3C, que recomiendan una relación de contraste mínima de 4,5:1 para el texto normal. Hemos probado el generador con las seis armonías y con colores base claros y oscuros para asegurar que los códigos y el contraste son correctos. Un consejo práctico: reserva los colores muy saturados para acentos pequeños, nunca para bloques de texto largos.
Preguntas frecuentes sobre las paletas de colores
¿Qué colores combinan bien entre sí?
Combinan bien los colores que guardan una relación en la rueda cromática: los complementarios (opuestos, como azul y naranja) crean contraste; los análogos (contiguos, como azul, verde azulado y verde) transmiten armonía; y los monocromáticos (tonos de un mismo color) resultan elegantes. El generador de arriba aplica estas armonías automáticamente a partir de un color base.
¿Cómo elijo la paleta de colores para mi proyecto?
Elige primero un color base que represente la idea o la marca, aplica una armonía (complementaria, análoga, triádica…) para obtener los colores de apoyo y reparte su uso con la regla 60-30-10. Antes de cerrarla, comprueba que el texto tiene suficiente contraste sobre el fondo para que sea legible.
¿Cuál es la regla de los 3 colores (60-30-10)?
Es una guía de proporción muy usada en diseño: un 60 % de un color dominante (normalmente neutro), un 30 % de un color secundario y un 10 % de un color de acento. Mantener esa proporción evita que la paleta se vea recargada y da jerarquía visual.
¿Qué tipos de paletas o armonías de color existen?
Las principales son: monocromática (un solo tono en distintas claridades), análoga (colores vecinos en la rueda), complementaria (opuestos), complementaria dividida, triádica (tres colores equidistantes) y tetrádica o cuadrada (cuatro colores). Cada una produce una sensación distinta de contraste y equilibrio.
¿Qué diferencia hay entre HEX, RGB y HSL?
Son tres formas de escribir el mismo color. HEX es un código hexadecimal de seis dígitos (#0D9084) muy usado en la web; RGB indica las cantidades de rojo, verde y azul (0-255); y HSL describe el color por tono, saturación y luminosidad, lo que facilita crear variaciones. El generador te da los tres formatos.
¿Cómo copio o exporto la paleta?
Toca cualquier color para copiar su código, o usa «Copiar HEX» para llevarte los cinco de golpe y «Copiar CSS» para obtener las variables listas para pegar en tu hoja de estilos. Todo ocurre en tu navegador, sin registro.
¿Esta herramienta hace mi colorimetría personal gratis?
No. La colorimetría personal analiza tu piel, ojos y cabello para asignarte una estación de color, y requiere una valoración específica. Esta página es un generador de paletas para diseño, web y branding, no un test de colorimetría personal.
Última actualización: 17/09/2026 · Por el equipo de PuntoCálculo