Generador de paletas de color

Elige un color base y un esquema de color, y obtén una paleta construida con las reglas de la teoría del color que usan los diseñadores: complementaria, análoga, triádica y más. Copia los códigos hex o las variables CSS.

  • Gratis
  • Sin registro
  • Funciona en tu navegador
color-palette-generator

Rellena los valores de arriba para ver el resultado.

100 % privado — el cálculo se hace en tu navegador y no se envía nada a ningún servidor.

Siguiente paso

Sigue con tu resultado en otra herramienta. No se sube nada.

Cómo funciona

Elige un color base

Escribe un código hex o usa el selector de color.

Elige un esquema

Complementario, análogo, triádico, dividido, tetrádico o monocromático.

Copia la paleta

Como códigos hex o como propiedades personalizadas CSS.

Paletas basadas en la teoría del color, no a ojo

Elegir colores que combinen bien es una habilidad real, pero también sigue patrones descritos desde hace siglos con el círculo cromático: los colores situados a cierto número de grados de distancia tienden a verse equilibrados juntos. Este generador aplica esas relaciones clásicas al color base que elijas, así que obtienes una paleta que funciona con un clic en lugar de ensayo y error.

Los esquemas

  • Complementario: tu color y su opuesto en el círculo, a 180 grados. Mucho contraste, bueno para que un color lidere y el otro haga de acento.
  • Análogo: tres colores situados uno junto a otro en el círculo. Tranquilo y armonioso, habitual en la naturaleza.
  • Triádico: tres colores repartidos por igual, a 120 grados. Vivo y equilibrado, un favorito de las marcas desenfadadas.
  • Complementario dividido: tu color más los dos vecinos de su complementario. Un contraste parecido al complementario pero más suave.
  • Tetrádico: cuatro colores en dos pares complementarios. Rico, pero necesita que un color domine para que no se vea recargado.
  • Monocromático: cinco tintes y matices del mismo tono. La opción más segura, y una buena base para un sistema de diseño.

Contraste de un vistazo

Cada muestra indica su ratio de contraste sobre blanco puro y sobre negro puro, para que veas de un vistazo qué colores podrían llevar texto en un fondo claro u oscuro sin comprobar cada uno por separado. Para una revisión de accesibilidad completa contra un fondo concreto, usa el generador de paletas accesibles o el comprobador de contraste.

Lo que no hace

Los esquemas de la teoría del color son un punto de partida, no una garantía: la paleta adecuada para una marca también depende del significado, el público y el material que ya existe. Ajusta el color base y prueba varios esquemas hasta que uno te convenza. Todo se calcula en tu navegador.

Preguntas frecuentes

¿Cómo creo una paleta de color a partir de un color?
Elige tu color base y un esquema. La paleta aparece al momento, con códigos hex listos para copiar.
¿Qué es un color complementario?
El color directamente opuesto al tuyo en el círculo cromático, a 180 grados. Los dos juntos dan mucho contraste.
¿Qué esquema uso para un logo?
El triádico y el complementario dan más contraste y energía. El monocromático y el análogo se ven más tranquilos y cohesionados.
¿Puedo obtener variables CSS directamente?
Sí. Copia el bloque de variables CSS y pégalo en tu hoja de estilos.
¿Cómo se muestra el contraste de cada color?
Cada muestra indica su ratio de contraste sobre blanco y sobre negro, útil para juzgar si sirve para texto.
¿Se envía algo a un servidor?
No. La paleta se genera en tu navegador.

Más herramientas

Otras utilidades que también funcionan sin salir de tu navegador.

Generador de tonos de colorGenera una escala completa de tintes y matices de 50 a 950 a partir de un color. Nombre del colorEncuentra el nombre de color estándar más cercano a cualquier hex, RGB o HSL. Paleta a códigoConvierte una lista de colores en código CSS, SCSS, Tailwind, JavaScript o JSON. Comprobador de contraste de colorComprueba colores de texto y fondo según WCAG y obtén un arreglo que cumple. Sacar el color de una imagenHaz clic en cualquier punto de una foto y obtén su color exacto en hex, RGB y HSL. Ajustar un color accesibleAjusta un color para que cumpla el contraste WCAG sobre un fondo, conservando su tono.