Comprensión del Color: Matiz, Saturación y Luminosidad

Contenido del curso

Fundamentos del color

Uso del color: Crear balance y Armonía

El arte de la comunicación Cromática

El Branding y el Color

Diseño de paletas de color

Herramientas para trabajar con color digital

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:13

Comprensión del Color: Matiz, Saturación y Luminosidad

Curso de Uso y Manejo del Color

Clase 4 de 26

Clase 4 / 26

Comentarios (132)132 comentarios

Joel William Mendoza Paucara

Hace 6 años

No se si lo dice pero el globo que utiliza se llama kolormondo

Carolina Bautista

Profesor

Hace 6 años

Sí William, efectivamente es una herramienta muy útil y se llama Kolormondo

Joel William Mendoza Paucara

Hace 6 años

Lo acabo de conocer y me encanta <3 ¿hay una opción digital del Kolormondo y si tuviera cada color su hexadecimal seria super?

Juan Esteban Quinayás Gaitán

Hace 6 años

Resumen:

El círculo cromático = ver el color en 2D

Kolormondo = ver el color en 3D

Acromático: negro, gris, blanco

Matiz o Hue (H): la familia de color en sí
Luminosidad (B):
- Los colores que viven en el penthouse, tienen blanco en su composición, son colores claros
- Los colores que viven en el sotano, tienen negro en su composición, son colores profundos
Saturación (S):
- Rango medio = su color más puro
- Los colores que viven hacía las ventanas, les llega más luz y se saturan. Brillantes.
- Los colores que viven hacía a dentro del círculo, no les luz, no tienen como brillar, son colores que tienen gris en su composición. Opacos, profundos.

Hanz Rodriguez Emiliani

Hace 6 años

Muchas gracias por el resumen :D

Sabina De Andrade

Hace 6 años

muchas gracias!!

Felipe Chavez

Hace 6 años

Fundamental de conocer los 3 "Claves del Circulo cromático son:

¡Matiz , La Saturación y Luminosidad!

Ariel Jossue Romero Kooller

Hace 6 años

Buen ejemplo

Albany Hernández Higuerey

Hace 6 años

Esto me va a servir mucho, muchas gracias. Va perfecto con la explicación de la profe.

Arles A. Pinzon Molina

Hace 6 años

Matiz: Familia del color (hue)
Luminosidad: Colores claros vs. Profundos
Saturación: Brillantes vs. opacos

Ingrid Cumbe

Hace 2 años

gracias por el aporte

Mauro Benitez

Hace 6 años

Yo utilizo este como ejemplo gráfico, quiza sirva a alguien mas.

Carlos Hernandez

Hace 6 años

También se puede utilizar un cilindro para entender este sistema:

Hanz Rodriguez Emiliani

Hace 6 años

Gran ejemplo :D

Ariel Jossue Romero Kooller

Hace 6 años

buen aporte

José Daniel Vázquez Alba

Hace 6 años

Una joya! Definitivamente ha valido cada peso invertido en mi plan restart! Amo Platzi💚

Lizeth Martinez

Hace 6 años

Súper recomendad la App

Mary Vk

Hace 4 años

ES HERMOSO

Ariel Jossue Romero Kooller

Hace 6 años

Cada color en su lugar: matiz, saturación y luminosidad Matiz Es la familia de color en si (HUE)

con la luminosidad se podrá obtener diferentes tono de color, además del blanco y del negro

Los colores que se encuentran arriba del Hue se llamaran colores claro, y los que se encuentran abajo, colores profundos Saturacion por medio de la saturación podremos lograr diferentes tonalidades de un mismo color elevando su intensidad, también se puede crear diferentes tonos de gris

Este es un ejemplo del circulo cromatico en 2D

En los programas de diseño, el sistema para elegir el color estara en esta interface H para la el color en si S para la saturación B para el Brillo del color

Fabiola Silva

Hace 3 años

Gracias Ariel :D

Johsting Gabriel Ordóñez Mazurek

Hace 5 años

Estaba probando el juego "I love Hue" que nos dejaron en la sección de recursos y es realmente impresionante e interesante como un color lo podemos percibir de una manera totalmente diferente, dependiendo de los colores del que este rodeado este. Y eso me recordó a la frase que nos dijo el profesor Carlos Jiménez @unavacaverde en el curso de introducción al diseño. ...

El color en sí mismo no es ni frío ni caliente, ni saturado ni poco saturado, no es brillante ni oscuro. El color en sí mismo solo tiene valor cuando esta rodeado de otro.

... Si observan, cada uno de los colores los podemos percibir de una manera diferente cuando están rodeados de otros, pueden llegar a verse como mas brillantes, contrastantes, oscuros, vividos etc.... ...

...

Pero una vez cambiamos ese patrón (Los colores del cual son rodeados) lo que percibíamos antes de este color, también cambia. Como por ejemplo, En la imagen de abajo, yo percibo este amarillo verdedoso, como un color muy brillante, contrastante, vivido, que destaca desde lejos. ...

....

Pero solo basta mover un color para cambiar esa perspectiva. .....

...

Incluso si te das cuenta, la manera en que percibías este color de tonalidad Rosa naranja quizás, cambio bruscamente mientras mas lo acercábamos a las columnas de tonalidades fucsias. ....

... Se nota mas con nuestro amarillo verdoso, ya que a la medida de que se iba alejando de la columna de los colores fucsias, este cada vez mas pereciera que se fuese apagando, como disminuyendo su brillo e intensidad. ....

....

Cuando claramente no es así, lo único que cambio fueron los colores de su entorno y ahora la percepción que teníamos antes de este, ya no es la misma. ....

....

¡Juguemos con el color!

....

José Ángel Rodríguez Morales

Hace 4 años

Excelente explicación

Cristian Mauricio Cavanzo Arias

Hace 6 años

José Antonio López Hernández

Hace 6 años

No se si explica más adelante de esta forma, pero experimentando con los colores y en algunos articulos se explica que el hue se mide en grados, donde 0° es rojo, 120° es verde y 240° es azul, los grados intermedios entre estos colores forman sus combinaciones y así sucesivamente. Dejo una imagen que me ayudó mucho para entender esta propiedad y "calcular" los colores en mi mente.

Shirly Ruiz Mendoza

Hace 4 años

Muchas graciaspor el aporte

Ezequiel Fernandito Cabrera Contreras

Hace 6 años

NOTAS DE CLASE

kolormondo: instrumento para ver el color en tres dimensiones los cuales son: -matiz(centro del kolormondo): son los colores que vimos en el sistema de Johannes Itten, los colores visibles con una luz neutra
-saturación(exterior e interior del kolormondo): mientras más al exterior más puro el color y mientras más al interior menos puro
-luminosidad o brillo(arriba y abajo del kolormondo): mientras más arriba más luminoso y mientras más abajo menos luminoso -En el modo HSB, H es Hue(Matiz), S es Saturation(Saturación) y B es Brightness(Brillo)

Luis Alvaro Cárdenas Gómez

Hace 6 años

I Love Hue app https://play.google.com/store/apps/details?id=com.zutgames.ilovehue

Felipe Chavez

Hace 6 años

Estaré aprobando la app: y dejare mi reseña que tal

Vanessa Aguirre Giraldo

Hace 4 años

solo es para celular?? o se puede en pc gracias

José Mauricio Osorio Corredor

Hace 6 años

excelente el juego

Usuario anónimo

User

Hace 6 años

¿El blanco, negro y gris? Son considerados acromáticos.

Denzel Hernandez

Hace 4 años

Cuidado… el Kolormondo está basado en el modelo HSL, no en el modelo HSB. ¡Son diferentes!

HSB:

HSL:

Kolormondo:

Jorge Levi Tapia Lugardo

Hace 6 años

🎥 Mas informacion

📄 Mas informacion

Wilmer Javier Moreno Gonzalez

Hace 6 años

Hola, ¿Dónde puedo comprar el kolormondo? ¿alguien tiene una idea?

Daniel Adolfo Ordoñez Rubio

Hace 6 años

Hola, Wilmer :) Kilormondo tiene una webshop kolormondoshop, si tienes dudas, puedes leer los términos de shipping y devoluciones.

Mariana Gil Madrid

Hace 5 años

Recursos

Comprender el color va mucho más allá de memorizar un círculo plano. Cuando pasas del círculo cromático en 2D a una representación tridimensional, se revela un sistema completo que explica por qué un rojo puede verse brillante, opaco, claro o profundo. Las tres dimensiones que hacen posible esta comprensión son el matiz, la saturación y la luminosidad, y dominarlas te permitirá aplicar color con precisión en cualquier contexto de diseño.

¿Qué es el matiz y por qué es la base del color?

El matiz es, simplemente, la familia de color en sí misma [0:18]. Amarillo, rojo, azul: cada uno representa un matiz distinto. En inglés lo encontrarás como Hue (representado con la letra H), una referencia universal que trasciende cualquier sistema de color [0:38].

Una duda frecuente es dónde quedan el negro, el blanco y el gris. Estos son colores acromáticos, es decir, no pertenecen a ninguna familia de matiz [0:50]. Si necesitas un gris que tenga cierta temperatura de color —un gris cromático—, lo hallarás hacia el centro de cada familia, justo donde la saturación disminuye [1:03].

¿Cómo funciona la luminosidad en el color?

Para entender la luminosidad, resulta útil imaginar un edificio [1:14]. Los colores que "viven en el penthouse" son aquellos que llevan blanco en su composición: se perciben claros y ligeros [1:24]. Los que habitan "en el sótano" contienen negro y se perciben profundos y densos [1:36].

Colores claros: tienen blanco añadido.
Colores profundos: tienen negro añadido.

Este eje vertical —de claro a profundo— es el primer paso para modificar cualquier color sin cambiar su familia.

¿Qué papel juega la saturación en la percepción del color?

La saturación opera en un eje horizontal y determina cuánta intensidad muestra un color [1:50].

¿Qué son los colores brillantes?

Imagina que los colores viven dentro de un círculo. Los que se ubican hacia las ventanas —es decir, hacia el borde exterior— reciben mucha luz y se saturan al máximo: brillan con fuerza [2:14]. Son los colores más vivos y puros que puedes obtener.

¿Qué ocurre con los colores opacos?

Hacia el interior del círculo, donde no llega luz, los colores adquieren gris en su composición y se vuelven opacos, suaves y discretos [2:30]. Son ideales cuando buscas paletas sobrias o elegantes.

Brillantes: saturación alta, viven hacia las ventanas.
Opacos: saturación baja, contienen gris, viven hacia el centro.

¿Cómo se ve todo esto en un programa de diseño?

En herramientas de diseño digital encontrarás el sistema HSB [3:05]:

H (Hue): la familia de color, el matiz.
S (Saturation): controla si el color es brillante u opaco.
B (Brightness): la luminosidad, que agrega blanco o negro al color.

Si aplastáramos la esfera tridimensional del color en un plano, veríamos en el centro los colores claros con blanco, rodeados por los colores suaves con gris, luego los saturados que brillan hacia afuera, y finalmente los profundos con negro en la periferia [2:50].

Dominar estas tres dimensiones transforma tu manera de seleccionar y combinar colores. Para seguir entrenando el ojo, vale la pena probar el juego I Love Hue [3:22], un ejercicio práctico donde puedes practicar la percepción de matiz, saturación y luminosidad organizando degradados de color. ¿Ya lo conocías? Comparte tu experiencia y cuéntanos qué dimensión del color te resulta más difícil de distinguir.

Resumen

¿Qué es el matiz y por qué es la base del color?

¿Cómo funciona la luminosidad en el color?

Colores claros: tienen blanco añadido.
Colores profundos: tienen negro añadido.

Este eje vertical —de claro a profundo— es el primer paso para modificar cualquier color sin cambiar su familia.

¿Qué papel juega la saturación en la percepción del color?

La saturación opera en un eje horizontal y determina cuánta intensidad muestra un color [1:50].

¿Qué son los colores brillantes?

¿Qué ocurre con los colores opacos?

Brillantes: saturación alta, viven hacia las ventanas.
Opacos: saturación baja, contienen gris, viven hacia el centro.

¿Cómo se ve todo esto en un programa de diseño?

En herramientas de diseño digital encontrarás el sistema HSB [3:05]:

H (Hue): la familia de color, el matiz.
S (Saturation): controla si el color es brillante u opaco.
B (Brightness): la luminosidad, que agrega blanco o negro al color.

Fundamentos del color

Uso Estratégico del Color en Diseño Visual

Ciencia y percepción del color: fundamentos para diseñadores

Círculo Cromático y Sistemas de Color: RGB, CMYK y PMS

Comprensión del Color: Matiz, Saturación y Luminosidad

Terminología del Color para Comunicadores Visuales

Uso del color: Crear balance y Armonía

Armonización Cromática: Uso del Círculo Cromático en Diseño

Contraste por Matiz en Composiciones de Color

Luminosidad y Saturación en Composiciones Monocromáticas

Experimentación con Temperatura y Subtonos de Color

Interacción y contraste de colores: teoría y práctica

El arte de la comunicación Cromática

Psicología del Color y su Impacto Emocional

Simbolismo y Psicología de los Colores Principales

Significados y Estrategias de Colores en Branding

Narrativa Visual a través del Color en el Cine

El Branding y el Color

Estrategias de Color en Marketing de Productos

Estrategias de Color Basadas en el Perfil del Usuario

Psicología Estacional: Uso de Colores en Estrategias de Marca

Creación de Paletas de Color a partir de Atributos de Marca y Emociones

Estrategias de Diferenciación Cromática en Branding

Diseño de paletas de color

Creación de Mapas de Inspiración para Paletas de Color

Diseño Estratégico de Paletas de Color para Marcas

Creación de paletas de color con Pantone y Adobe Color

Contrastes y Proporciones en Paletas de Color Armoniosas

Herramientas para trabajar con color digital

Psicología Estacional: Aplicación Práctica de Paletas de Color

Uso del Color en Diseño con Illustrator

Proyectos Estratégicos de Color en Diseño Visual

Comprensión del Color: Matiz, Saturación y Luminosidad