Generador de paletas de colores
Crea una paleta de colores a partir de un color base, con los esquemas complementario, análogo, triádico y las demás armonías clásicas. Guarda los colores que te gusten, comprueba el contraste WCAG entre dos colores y exporta el resultado como variables CSS o JSON. Si solo necesitas elegir un color y convertirlo entre HEX, RGB y HSL, usa el selector de color.
Dos colores opuestos en la rueda de color: contraste alto, la opción clásica para base y color de acento.
Comprobador de contraste WCAG
Cómo funciona
Elige un color base con el selector, escribiendo el código HEX (por ejemplo #1A73E8) o haciendo clic en uno de los ocho colores predefinidos. Después elige una armonía en el menú: la herramienta calcula la paleta girando el matiz sobre la rueda de color y dejando iguales la saturación y la luminosidad.
Las seis armonías: • Complementaria: el color base y el opuesto en la rueda, a 180°. El máximo contraste de tono, la opción clásica para botones y colores de acento. • Análoga: el color base y los dos vecinos, a −30° y +30°. Un efecto tranquilo, apto para degradados y fondos. • Triádica: tres colores separados 120° entre sí. Viva pero equilibrada. • Complementaria dividida: el color base y los dos colores a los lados de su complementario, a +150° y +210°. Un contraste más suave que la complementaria pura. • Tetrádica: cuatro colores a 90° uno del otro, es decir, dos pares complementarios. Rica pero difícil de equilibrar: usa uno como dominante y los demás como acentos. • Monocromática: cinco variantes del mismo matiz, con la luminosidad bajada o subida 15 y 30 puntos. La más segura para la paleta de una sola marca.
Cada muestra enseña el color en HEX, RGB y HSL, cada uno con su botón Copiar, y una estrella para guardarlo. Los colores guardados (hasta 24) pasan a la sección Colores guardados y se mantienen en el localStorage del navegador también la próxima vez: un clic en un color guardado lo usa como nuevo color base, el clic derecho lo quita y Borrar todos vacía la sección.
Comprobador de contraste WCAG. Bajo la paleta elige dos colores (Color A y Color B) y verás un texto de prueba en ambas combinaciones, la relación de contraste calculada según las WCAG 2.1 y tres resultados: • AA texto normal (al menos 4,5:1): el mínimo para el texto de los contenidos. En la Unión Europea, la norma EN 301 549 exige el nivel AA de las WCAG 2.1 para los sitios web del sector público. • AAA texto normal (al menos 7:1): el nivel más alto, recomendado para contenidos donde la legibilidad es crítica. • AA texto grande (al menos 3:1): para texto de 18 puntos o más, o de 14 puntos en negrita.
Un ejemplo con el color inicial: #1A73E8 y su complementario #E9901C están muy lejos como tono, pero tienen un contraste de solo 1,82:1 y no superan ningún umbral. En la paleta monocromática del mismo azul, en cambio, el más oscuro (#0A3061) y el más claro (#A7C9F6) llegan a 7,67:1. Colores que quedan bien juntos no son por fuerza legibles uno sobre otro.
Exportación. • Exportar variables CSS descarga palette.css con un bloque :root { --color-1: …; } listo para pegar en la hoja de estilo o en el tema. • Exportar JSON descarga palette.json con, para cada color, el código HEX y los valores RGB y HSL por separado, cómodo para los design tokens. • Copiar el enlace copia la dirección de la página, que contiene el color base y la armonía: quien la abra encuentra la misma paleta.
Si solo necesitas elegir un color y convertirlo entre HEX, RGB y HSL, sin armonías, usa el selector de color de este sitio.
Todo se calcula en el navegador: ningún color se envía a un servidor.
Preguntas frecuentes
¿Cómo encuentro el color complementario de un color?
- Girando el matiz 180° sobre la rueda de color: introduce el color base y elige la armonía Complementaria. Por ejemplo, el complementario del azul #1A73E8 es el naranja #E9901C. La saturación y la luminosidad se mantienen como las del color de partida, solo cambia el tono.
¿Cómo se combinan los colores para una web o un logotipo?
- Parte del color principal de la marca y elige una armonía según el efecto que busques: complementaria para un acento que salte a la vista, análoga para un conjunto tranquilo, monocromática para una paleta sobria con variantes claras y oscuras del mismo color. Después comprueba con el contraste WCAG que las parejas que uses para el texto sean legibles.
¿Qué diferencia hay entre colores análogos y triádicos?
- La distancia en la rueda. Los análogos son los colores vecinos del color base (a −30° y +30°) y dan un efecto armonioso y tranquilo. Los triádicos son tres colores separados 120° entre sí, de modo que ninguno está cerca de los otros: el efecto es más vivo, pero sigue equilibrado.
¿Cuándo conviene una paleta monocromática?
- Cuando necesitas variantes coherentes de un solo color para los estados de una interfaz: fondo, normal, hover, activo, desactivado. Los cinco tonos tienen el mismo matiz y la misma saturación y solo cambian de luminosidad (−30, −15, base, +15, +30 puntos, sin llegar al negro ni al blanco puros), así que es difícil que desentonen entre sí.
¿Qué mide la relación de contraste WCAG?
- La diferencia de luminancia relativa entre dos colores, calculada como establecen las WCAG 2.1. Va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco). Para el texto normal, el nivel AA pide al menos 4,5:1 y el nivel AAA al menos 7:1; para el texto grande (18 puntos, o 14 en negrita) basta con 3:1. Los resultados se ponen en verde cuando la pareja supera el umbral.
¿Por qué dos colores que quedan bien juntos no superan la prueba de contraste?
- Porque la armonía se refiere al tono y el contraste a la luminosidad. El azul #1A73E8 y el naranja #E9901C son opuestos en la rueda, pero tienen una luminosidad parecida y se quedan en 1,82:1. Para el texto, combina colores de luminosidad muy distinta, como los dos extremos de una paleta monocromática, y usa los colores vivos para títulos, botones y detalles.
¿Cómo guardo un color que me gusta?
- Haz clic en la estrella de la muestra: se rellena y el color aparece en la sección Colores guardados, que se mantiene en el navegador cuando vuelves a la página. Un clic en un color guardado lo usa como color base, el clic derecho lo quita. Puedes tener hasta 24.
¿Cómo uso la paleta en mi CSS?
- Pulsa Exportar variables CSS y obtienes palette.css con las variables --color-1, --color-2 y así sucesivamente dentro de :root. Pégalas en la hoja de estilo y úsalas con var(--color-1). Para los design tokens elige en cambio Exportar JSON, que para cada color recoge HEX, RGB y HSL.
¿Puedo compartir una paleta?
- Sí. El color base y la armonía se guardan en la dirección de la página: pulsa Copiar el enlace y envíalo, y quien lo abra verá la misma paleta. Los colores guardados con la estrella, en cambio, se quedan solo en tu navegador.
¿Mis colores se guardan en un servidor?
- No. La paleta la calcula JavaScript en el navegador y los colores guardados están en el localStorage de tu dispositivo. En la pestaña Red de las herramientas para desarrolladores puedes ver que al elegir, guardar o exportar no sale ninguna petición.
Armonías de color: cuál usar
Guía rápida para elegir la armonía adecuada. El ángulo en la rueda de color decide lo uniforme o contrastada que resulta la paleta.
| Armonía | Ángulo en la rueda | Colores | Efecto y uso típico |
|---|---|---|---|
| Complementaria | 180° | 2 | Contraste máximo de tono: botones, avisos, color de acento |
| Análoga | −30° y +30° del color base | 3 | Tranquila y natural: fondos, degradados, ilustraciones |
| Triádica | 120° entre un color y otro | 3 | Viva pero equilibrada: marcas desenfadadas, infografías |
| Complementaria dividida | +150° y +210° | 3 | Más suave que la complementaria: contraste amable, diseño editorial |
| Tetrádica | 90° entre un color y otro | 4 | Rica: paneles con muchas categorías, diseños tipo revista |
| Monocromática | Mismo matiz | 5 | Segura para una sola marca: estados de la interfaz |
Cálculo en el espacio HSL: el matiz gira el ángulo indicado y la saturación y la luminosidad se mantienen como las del color base (en la monocromática solo cambia la luminosidad, 15 y 30 puntos). Para el texto, comprueba siempre las parejas con el comprobador de contraste WCAG: una paleta armoniosa puede no superar el nivel AA.