Loading...
Introducción a la Teoría del Color
No dejes que el título te intimide; la teoría del color es bastante divertida, y nuestro círculo cromático interactivo lo hace muy fácil. La teoría del color nos permite comprender cómo diferentes colores funcionan juntos—piensa en ella como un truco para seleccionar conjuntos de colores visualmente agradables.
![Color Wheel: Color Harmonies (Small) [en]](https://colorcodes.imgix.net/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png?w=3840&q=60&auto=format,compress)
El círculo cromático—que se remonta al libro “Opticks” de Isaac Newton—presenta los matices dispuestos en un círculo, mostrando visualmente las relaciones entre los colores primarios, secundarios y terciarios.
Al crear un diseño, encontrar colores que combinen bien visualmente puede ser difícil para el ojo inexperto, y es ahí donde las armonías de color, o combinaciones de colores en el círculo cromático, resultan muy útiles.
Uso del Círculo Cromático
¿Cómo se generan estas armonías? Utilizar un círculo cromático RGB, como el de arriba, lo hace increíblemente sencillo: comienza seleccionando una armonía del menú desplegable.
Haciendo clic y arrastrando el cursor sobre cualquiera de los círculos blancos (o en cualquier parte del lienzo de color) cambiarás el tono; cuanto más cerca del centro, más desaturado será el color.
Utiliza la rueda de luminosidad alrededor del área principal para hacer que el color seleccionado sea más claro u oscuro; también puedes pegar un código hexadecimal inicial para crear armonías.
Armonías de Color
Las armonías de color son combinaciones especialmente agradables de dos o más colores derivadas de su relación en el círculo cromático. También conocidas como acordes de color, son útiles al explorar una posible paleta de colores, o pueden utilizarse como un esquema de color independiente.
Colores Complementarios
Los colores que se encuentran directamente opuestos en el círculo cromático se conocen como colores complementarios. Estos tienen un alto contraste y pueden ser muy efectivos como colores de acento cuando se combinan con una paleta más neutra.
![Color Wheel: Complementary Colors (Small) [en]](https://colorcodes.imgix.net/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png?w=3840&q=60&auto=format,compress)
Colores Split-Complementarios
Una armonía split-complementaria se compone de un color base y los dos colores adyacentes a cada lado de su complemento. Los esquemas split-complementarios tienen un contraste menor y pueden ser mejores para paletas de marca.
![Color Wheel: Split-Complementary Colors (Small) [en]](https://colorcodes.imgix.net/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png?w=3840&q=60&auto=format,compress)
Colores Análogos
Las armonías análogas se crean seleccionando los colores que están directamente adyacentes a un color elegido. Frecuentemente encontrados en el diseño web, los esquemas análogos, cuando se combinan con un color complementario para el contraste, pueden ofrecer una gran versatilidad.
![Color Wheel: Analogous Colors (Small) [en]](https://colorcodes.imgix.net/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png?w=3840&q=60&auto=format,compress)
Colores Triádicos
Las armonías triádicas consisten en tres colores equidistantes en el círculo cromático. Al igual que los colores complementarios, los esquemas triádicos tienden a ser muy brillantes, con un alto contraste, y funcionan mejor cuando un color domina.
![Color Wheel: Triadic Colors (Small) [en]](https://colorcodes.imgix.net/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png?w=3840&q=60&auto=format,compress)
Colores Tetrádicos
Las armonías de color tetrádicas se forman por dos juegos de colores complementarios separados por 60 grados en el círculo cromático. Los esquemas tetrádicos son un excelente punto de partida para crear paletas de colores; afínalos utilizando sombras, matices y tonos.
![Color Wheel: Tetradic Colors (Small) [en]](https://colorcodes.imgix.net/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png?w=3840&q=60&auto=format,compress)
Colores Cuadrados
Similares a las armonías tetrádicas, los esquemas de colores cuadrados se componen de cuatro colores, dispuestos equidistantemente en el círculo cromático. Asimismo, las armonías cuadradas son un excelente punto de partida para la paleta de colores de una marca o sitio web.
![Color Wheel: Square Colors (Small) [en]](https://colorcodes.imgix.net/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png?w=3840&q=60&auto=format,compress)
Sombras, Matices y Tonos del Color
Las sombras, matices y tonos se crean añadiendo, respectivamente, negro, blanco y gris a un color elegido. Pueden ser muy útiles en el diseño web para fondos y tipografía, y a menudo se combinan con un color complementario para lograr contraste.
![Color Wheel: Color Shades, Tints and Tones (Small) [en]](https://colorcodes.imgix.net/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png?w=3840&q=60&auto=format,compress)
Sombras del Color
Añadir negro en distintos niveles a un color produce variantes progresivamente más oscuras, o “sombras”, de ese color en particular. Las sombras funcionan bien para efectos de hover en enlaces o como fondos para encabezados y pies de página.
Matices del Color
Los matices se obtienen añadiendo blanco a un color, resultando en versiones cada vez más claras. También pueden utilizarse para efectos de hover en CSS y funcionan bien como fondos para ventanas modales.
Tonos del Color
Los tonos se crean añadiendo gris a un color, lo que produce una variedad casi infinita de colores, dependiendo del nivel de gris utilizado. Menos comunes en el diseño web, los tonos pueden ser útiles para elementos tipográficos como comentarios, citas o destacados.
Colores Primarios, Secundarios y Terciarios
El círculo cromático se compone de 12 colores distintos, que se dividen en los siguientes tres grupos: colores primarios (3), colores secundarios (3) y colores terciarios (6).
![Color Wheel: Primary, Secondary and Tertiary Colors (Small) [en]](https://colorcodes.imgix.net/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-codes-color-wheel-primary-secondary-tertiary--small.png?w=3840&q=60&auto=format,compress)
Colores primarios: rojo, amarillo y azul. Estos son los colores base del círculo, y cada otro color contiene al menos uno de los colores primarios.
Colores secundarios: naranja, verde y púrpura. Se obtienen mezclando dos de los colores primarios (por ejemplo, rojo y amarillo para obtener naranja).
Colores terciarios: bermellón (rojo-naranja), ámbar (amarillo-naranja), chartreuse (amarillo-verde), aguamarina (azul-verde), violeta (azul-púrpura) y magenta (rojo-púrpura). Los colores terciarios son el resultado de mezclar un color primario con uno secundario.
Creando Tu Esquema de Color
Con el poder del círculo cromático, crear tu propia paleta de colores debería ser mucho más sencillo que empezar desde cero. Pero si aún te sientes perdido, quizás alguna de nuestras otras herramientas pueda ser útil.
¿Tienes una imagen de la que te gustaría extraer una paleta? Prueba nuestro selector de colores por imagen. ¿O tal vez solo necesitas un selector de colores tradicional?