Círculo cromático online

Elige un color base y el círculo cromático calcula paletas análogas, complementarias, triádicas y más. Copia los códigos HEX, RGB, HSL u OKLCH o expórtalos a CSS, Tailwind y Figma.

Armonías

Armonías: Análoga

Conversión de color

Consulta el código de este color en diez formatos distintos, listos para copiar.

Qué es el círculo cromático

El círculo cromático (o rueda de colores) organiza los colores según su matiz, de 0° a 360°. Es la base de la teoría del color: muestra de un vistazo qué tonos se acercan, cuáles se oponen y qué esquemas resultan equilibrados o contrastados. Se usa en diseño web, branding, UI, ilustración y cualquier proyecto donde la paleta tenga que comunicar con claridad.

A diferencia del selector de color, pensado para cuando ya tienes un código concreto, o del selector de color de imagen, pensado para extraer colores de una foto, el círculo cromático de Matizly parte de un solo color base. Tú fijas el tono en la rueda o con Hex, RGB, HSL u OKLCH; la herramienta calcula el resto según la armonía elegida y te deja ajustar, bloquear, reordenar y exportar la paleta.

Colores primarios, secundarios y terciarios

El círculo cromático tradicional, el de la pintura y la escuela, tiene doce colores que se construyen en tres niveles.

Primarios

Rojo, amarillo y azul. No se obtienen mezclando otros colores y a partir de ellos se crean todos los demás.

Amarillo
Rojo
Azul

Secundarios

Naranja, verde y violeta. Cada uno sale de mezclar dos primarios a partes iguales: rojo y amarillo dan naranja, amarillo y azul dan verde, y azul y rojo dan violeta.

Naranja
Violeta
Verde

Terciarios

Mezclan un primario con el secundario que tiene al lado: amarillo anaranjado, rojo anaranjado, rojo violáceo, azul violáceo, azul verdoso y amarillo verdoso.

Amarillo anaranjado
Rojo anaranjado
Rojo violáceo
Azul violáceo
Azul verdoso
Amarillo verdoso

Colores cálidos y fríos

Si divides el círculo por la mitad quedan dos familias. Los colores cálidos (amarillos, naranjas y rojos) recuerdan al sol y al fuego: transmiten energía y cercanía, y parecen acercarse a quien mira.

Los colores fríos (verdes, azules y violetas) recuerdan al agua y al cielo: transmiten calma y distancia, y parecen alejarse. En diseño se suele reservar un color cálido para lo que debe llamar la atención y usar fríos en fondos y zonas de descanso.

Cálidos
Fríos

RYB, RGB y CMY: tres círculos cromáticos

No hay un único círculo cromático: cambia según mezcles pigmento, luz o tinta.

RYB, para pintura

Rojo, amarillo y azul como primarios. Es el círculo tradicional de la escuela y de las bellas artes, útil para mezclar pinturas.

RGB, para pantallas

Rojo, verde y azul de luz: al sumarlos dan blanco. Es el que usan monitores, móviles y el diseño web, y el que muestra la rueda de Matizly.

CMY, para imprenta

Cian, magenta y amarillo de tinta, más negro (CMYK). Al superponerse restan luz. Es el sistema de la impresión.

Cómo usar el círculo cromático de Matizly

Haz clic en la rueda o introduce un código Hex, RGB, HSL u OKLCH para fijar el color base. En el desplegable elige la armonía: análoga, complementaria, complementaria dividida, tríadica, tetrádica, cuadrada, monocromática, tonos, compuesta o personalizada. La paleta se actualiza al instante en columnas que puedes bloquear, reordenar, editar o ampliar.

Desde cada color abres sombras y ajustes finos; puedes guardar la paleta en tu colección, copiar códigos o exportar a CSS, Tailwind o Figma. Todo corre en el navegador: no hace falta cuenta ni subir archivos. Si partes de una foto, usa antes el selector de color de imagen y trae esos tonos al círculo.

Tipos de armonías del círculo cromático

Análoga

Los colores análogos están juntos en el círculo. En Matizly, a partir del color base se generan cinco tonos vecinos (aprox. ±20° y ±40°). El resultado es una paleta suave y cohesiva, ideal para fondos, secciones tranquilas y marcas que buscan continuidad visual sin saltos bruscos de contraste.

Complementaria

La armonía complementaria une un color con su opuesto en la rueda (180°). Matizly devuelve el par base + complementario. Es el esquema de mayor contraste: perfecto para CTAs, acentos y destacar un elemento sobre el resto sin añadir más tonos de los necesarios.

Complementaria dividida

En lugar del opuesto exacto, usa el color base y los dos vecinos de su complementario (150° y 210°). Conserva el contraste de la complementaria, pero con menos tensión visual. Encaja bien en interfaces y branding que necesitan acentos vivos sin polarizar toda la paleta.

Triádica

Tres colores equidistantes en el círculo (0°, 120° y 240°). Matizly calcula la tríada desde tu color base. Equilibra vibración y armonía: útil para paletas con personalidad, iconografía y sistemas de color donde cada tono tiene un rol claro.

Tetrádica

También llamada rectangular: dos pares complementarios (en Matizly, desplazamientos de 60°, 180° y 240°). Genera cuatro colores con mucha variedad. Conviene elegir uno dominante y usar el resto como acentos para no saturar la interfaz.

Cuadrada

Cuatro colores a intervalos iguales (90°, 180° y 270° desde la base). Parecida a la tetrádica, pero más simétrica. Da paletas ricas y equilibradas para dashboards, ilustraciones o identidades con varios acentos al mismo nivel.

Monocromática

Un solo matiz con distintas luminosidades y saturaciones, de claro a oscuro. En el círculo de Matizly la rueda se comporta como una escala del mismo tono. Ideal para tipografía, superficies, estados y temas minimalistas con mucha coherencia.

Tonos

Variaciones del mismo matiz cambiando sobre todo la saturación (añadir gris al color base). La escala de tonos resulta más suave y sofisticada que las sombras puras. Sirve para jerarquías discretas, chips, bordes y fondos que no compitan con el contenido.

Compuesta

Combina vecinos análogos del color base con una zona de complementaria dividida (incluye el opuesto). Matizly genera un esquema de cinco colores rico pero controlado: análogos para la zona principal y complementarios para los acentos.

Personalizada

Partida uniforme de cinco colores alrededor del círculo (cada 72°). Es un punto de partida libre: después puedes mover, bloquear o eliminar colores en la paleta hasta dejar el esquema exacto que necesitas para tu proyecto.

Preguntas frecuentes

En el círculo tradicional (RYB) son rojo, amarillo y azul. En pantallas (RGB) los primarios son rojo, verde y azul, y en imprenta (CMY) cian, magenta y amarillo.

Los cálidos son los amarillos, naranjas y rojos; los fríos, los verdes, azules y violetas. Los cálidos llaman la atención y los fríos transmiten calma.

Es una representación circular de los matices (0°–360°) que ayuda a elegir combinaciones armoniosas o contrastadas. En Matizly sirve para generar paletas listas para diseño y desarrollo a partir de un solo color base.

Análoga, complementaria, complementaria dividida, tríadica, tetrádica, cuadrada, monocromática, tonos, compuesta y personalizada. Cada una coloca los colores en la rueda según reglas distintas de teoría del color.

Son los que están en lados opuestos del círculo (180°). Elige tu color base, selecciona «Complementaria» y Matizly calcula el par automáticamente, con códigos listos para copiar.

Los análogos son vecinos en la rueda y dan combinaciones suaves. Los tríadicos están separados 120° entre sí y generan paletas más vibrantes, manteniendo equilibrio entre los tres tonos.

Ambas usan cuatro colores. La cuadrada los reparte cada 90°. La tetrádica (rectangular) usa dos pares complementarios con otra distribución (en Matizly, 60°/180°/240°), más asimétrica y con más variedad de acentos.

La monocromática varía luminosidad (y saturación) del mismo matiz, de claro a oscuro. La de tonos reduce saturación añadiendo gris, con un resultado más apagado y sofisticado. Ambas mantienen un solo matiz.

El círculo cromático explora armonías desde un color base. El selector de color sirve cuando ya conoces el código exacto y quieres convertirlo entre Hex, RGB, HSL, OKLCH y otros formatos.

Sí. Puedes copiar cada color, guardar la paleta en tu colección y exportar en formatos útiles para CSS, Tailwind o Figma, sin registro.