Illustration: Color relationships displayed on a color wheel.
Illustration: Color relationships displayed on a color wheel.
Source colors

Illustrative preview

Rueda de colores interactiva: encuentre armonías de colores coincidentes

Encuentre esquemas de colores complementarios, análogos, triádicos, tetrádicos y cuadrados. Ajuste HEX, saturación y luminosidad, luego copie colores coincidentes gratis y sin cuenta.

Arrastra para elegir un color base — copia los códigos hex de cada armonía clásica.

Color HEX / CSS
Armonía

Armonías de la rueda de color explicadas

Complementario

Los colores complementarios se ubican justo enfrente uno del otro en la rueda de color — azul y naranja, rojo y verde. Crean el contraste y la vitalidad más intensos posibles, lo que hace que los diseños se sientan enérgicos y que las llamadas a la acción resalten. Usa un color como dominante y su complementario con moderación como acento para evitar tensión visual.

Complementario dividido

El esquema complementario dividido toma un color base más los dos colores adyacentes a su complementario. Conservas el alto contraste de un esquema complementario, pero suavizas la tensión, lo que hace mucho más difícil equivocarse. Es un esquema ideal para empezar: un tono dominante, dos acentos de apoyo y un resultado naturalmente equilibrado.

Análogo

Los esquemas análogos usan tres colores vecinos en la rueda, como el amarillo, el amarillo verdoso y el verde. Como los vecinos comparten un subtono, el resultado se percibe sereno, armonioso y natural — piensa en atardeceres y bosques. Elige un color dominante, usa los vecinos como apoyo y añade un neutro para dar contraste.

Triádico

Un esquema triádico elige tres colores separados de forma uniforme por 120 grados, como el rojo, el amarillo y el azul. Se mantiene vibrante incluso con versiones pálidas o apagadas, y conserva el equilibrio porque ningún tono domina por proximidad. Deja que un color lidere y reserva los otros dos para acentos y detalles destacados.

Tetrádico (rectángulo)

Los esquemas tetrádicos (rectángulo) usan cuatro colores organizados en dos pares complementarios, separados 60 grados entre sí. Ofrecen la mayor variedad de cualquier armonía clásica, pero también son los más difíciles de equilibrar — elige un color dominante, atenúa los demás y vigila con cuidado la proporción entre tonos cálidos y fríos.

Cuadrado

Un esquema cuadrado distribuye cuatro colores de forma uniforme, separados 90 grados en la rueda. Al igual que el tetrádico, combina dos pares complementarios, pero la distribución uniforme le da un equilibrio más vivo y desenfadado entre tonos cálidos y fríos. Funciona mejor cuando un color domina claramente y el resto aparece como pequeños acentos.

Lo que puedes hacer con Rueda de Color

Revise las capacidades principales antes de comenzar.

  • Explora combinaciones de colores complementarios y análogos
  • Encuentra armonías triádicas, tetrádicas y cuadradas
  • Copia el código hex de cada color coincidente
  • Ajusta la saturación y la luminosidad en tiempo real
  • Elige un color base para la paleta de tu diseño

Referencia de configuración

Controles disponibles para Rueda de Color.

Opciones

Color base (tono y saturación)Selector de color
Arrastra en cualquier punto de la rueda interactiva para elegir tu color de partida: el ángulo determina el tono y la distancia al centro, la saturación.
Color HEX / CSSEntrada de texto
Escribe o pega cualquier código HEX, rgb(), hsl() o nombre de color CSS para llevar la rueda directamente a un color exacto que ya tengas.
SaturaciónControl deslizanteRango: 0–100% · Predeterminado: 91%
Ajusta lo vivo que es el color base, desde un gris total al 0% hasta la versión más pura e intensa del tono al 100%.
LuminosidadControl deslizanteRango: 0–100% · Predeterminado: 60%
Controla cuánto se aclara u oscurece el color base, desde el negro al 0%, pasando por el tono puro, hasta el blanco al 100%; todas las armonías se actualizan para reflejarlo.
ArmoníaAjustes predefinidos
Elige qué relación clásica del círculo cromático se resalta en la rueda, colocando marcadores en sus colores acompañantes para que veas cómo se construye el esquema.Opciones: ComplementarioComplementario divididoAnálogoTriádicoTetrádico (rectángulo)Cuadrado
Gratis · Sin registro · Sin marca de aguaLas cargas se cifran en tránsitoEliminado según nuestra política de retención

Preguntas frecuentes

Cómo Rueda de Color te ayuda a lograrlo

Problemas reales que resuelve todos los días: para empresas, creadores y tareas cotidianas. Encuentre el caso de uso que más le convenga y comience.

Formación

Aprende teoría del color

Consulta todas las armonías clásicas calculadas al instante a partir de un color base que elijas, con una explicación clara de cuándo y por qué funciona cada combinación.

Para creadores

Elige los colores de acento de tu sitio web

Escribe el hex de tu marca en la rueda y usa esquemas complementarios divididos o triádicos para encontrar colores de acento que contrasten sin chocar.

Para creadores

Previsualiza esquemas en una interfaz real

Cada armonía se aplica a una pequeña tarjeta de muestra — encabezado, cuerpo, botón y puntos — para que puedas evaluar las combinaciones en contexto, en lugar de como muestras abstractas.

Para creadores

Paletas de arte e ilustración

Usa armonías análogas para escenas naturales y serenas, y combinaciones complementarias para puntos focales dramáticos, copiando los códigos hexadecimales exactos en tu programa de pintura.

Ve cada transformación en acción

Cada foto cruza el separador sin cambios y sale terminada al otro lado.