Color en interfaces

Excelente, normalmente trabajo con el color negro, pero esto me ha hecho querer probar con otros colores y saber como hacer combinaciones Geniales.

Estoy trabajando en un emprendimiento🚀, espero su feedback en la paleta😌

Aplicando lo aprendido 😃

¡Excelente información!, les comparto una de mis ilustraciones y la paleta de colores .

Esperando el dark mode en Platzi 💚.

Intente hacer una paleta con un color frío
![](

Comparto la paleta que acabo de hacer, le agrego unos gradientes.

Les comparto esta paleta de colores que hice (: ![](

Me encantó, el color siempre fue una herramienta que quise desarrollar y con esta guía siento que entiendo cada vez más su complejidad.
Las claves que saqué de este artículo son:
1 - Evitar las variaciones que se vean artificiales, buscar esa diversidad en la naturaleza (simularla).
2 - Evitar el negro absoluto, con una paleta de grises.
3 - La regla que se aplica al negro se invierte al pensar productos en modo nocturno.

Buena tarde Jessica:
Se refiere al texto oscuro sobre un fondo claro es superior al texto claro sobre un fondo oscuro, es decir, es más fácil de leer. Produce menos fatiga visual cuando se leen caracteres oscuros sobre fondo blanco.

Un dark mode usa gris oscuro como fondo porque produce menos contraste que texto blanco sobre superficie negra. Ademàs emiten bajos niveles de luz mientras mantienen un alto nivel de usabilidad. Normalmente es un modo complementario que el usuario puede activar (o desactivar), Actualmente, la autonomía de las baterías es un problema y el dark mode es una solución potencial para este problema Un tema oscuro usa gris oscuro, en lugar de negro, como el color de superficie principal para los componentes.

Valioso contenido. No logré entender bien el gris, sobre todo en la parte donde se toman los extremos de las variaciones y bajar la saturación para neutralizar logrando la paleta versátil que incluye el color naranja. ¿Podrias explicarme un poco más?
Muchas gracias

Feedback por fa 😃

Maravilloso, siempre me pregunte como hacían para crear ciertos colores y contrastes, este curso me ha abierto un mundo completamente nuevo ❤️

Me encantaría que profundizaran en el tema de las versiones nocturnas, dado que es una corriente de desarrollo actualmente en auge y que con seguridad terminará por abarcar gran parte de las aplicaciones debido a que muchas personas usan sus dispositivos móviles a altas horas de la noche y con ello sus vistas requieren un mejor trato.

¡Vaya! Y pensar que al utilizar programas yo solo lanzaba uno al azar sin tener en cuenta la teoría.

¡¡¡Me encanta este curso!!!

Así quedo mi ejercicio.

Me gustaria saber ¿Cómo funciona el metodo para invertir los colores?

maravilloso!, Mis diseños son ahora un antes de y después de conocer esta técnica para la paleta de colores!, mil gracias, amo a Platzi

Es la primera vez que hago algo así. Fue divertido. Elegí el color porque es uno que ando usando para elaborar una composición para la habitación. 😃

Hola! Aquí va mi primer intento de paleta ever. Estoy contento jaj

La combinaciones de colores para los desarrolladores es muy dificil. Pero gracias ha este curso empiezo a crear una estrategia para elegir las paletas de colores interesantes.

En lo personal me gusta utilizar estas variaciones, dan vida y más dinamismo en tu composición de diseño…

Hola aqui dejo mi paleta de colores, y espero puedan darme alguien sus opiniones, es para un empredimiento de pastelería.

Aplicando lo leido con mi propia paleta 😄

Para crear una buena paleta de color en nuestra interfaz, podríamos basar nuestra paleta en 4 objetivos:
1, la variación oscura tendrá MÁS saturación y menos brillo que la original, no solamente vamos a quitarle brillo
2, la variación clara, tendrá MENOS saturación y MÁS brillo.
3, cuando creamos nnuestras variaciones, podríamos tomar nuestro color más oscuro y nuestro color más claro, los desaturamos un poco, y con esos resultados podemos tener una escala de grises adaptada a nuestra paleta. Así que, por supuesto, no será completamente gris, sino tendrá un poco de tonalidad de nuestro color base.
4. Podemos agregar un segundo color, al cual le aplicaremos los mismos 3 principios anteriores, así enriqueceremos nuestra paleta.

Esto del color me esta gustando… que buenas clases

Tuve que practicar mucho para poder entender mas allá…

No entendí bien al principio, pensé obscureciendo o aclarando era todo el chiste, pero no, use el brillo y la saturación para cada línea, pero el resultado era muy suave y no resaltaban, “aburrido”. Controlado.

Después recordé que en los ejemplos, saltando en el “selector de colores”, los resultados eran mucho mejores, se ven espectaculares con mucho contraste, pero como es muy arbitrario no me gusto nada, al asar?, no, quería.

Así que el control es aburrido y el aleatorio tampoco. Tuve que hacer las dos cosas, pero suavemente, una base controlada y un poco ojo.

Es la primer paleta de colores que hago en mi vida y aun veo que tendré que seguir practicando.

Se nota la diferencia, esta es mi paleta de color a partir del HSB. 😃

Espectacular forma de explicar como escoger los colores estoy muy encantado con este curso y todo lo que he visto hasta ahora 💚💚💚

Muy interesante como la paleta HSB nos sirve para definir colores en la interfaces conceptos que ayudan mucho para crear una buena interfaz.

me gustó la manera de utilizar un solo color para crear la paleta completa de colores

este curso me a ayudado mucho

La recomendación tradicional nos dice que jamás olvidemos el blanco y evitemos el negro absoluto

Muchas gracias por la información fue muy útil.
acá un ejemplo

Super! Hice el ejercicio y me encantó.

Mi ejercicio:

He aprendido mucho con éste curso. Realmente muy bueno!. Gracias por compartir todos estos conocimientos. Saludos!

Realmente con esta técnica tendremos una paleta de colores más divertida para nuestra app o web. Usando el modo HSB nos ahorramos un montón de tiempo y obtenemos resultados más rápidos 😃

vengo de saber 0 en diseño pero me esta gustando mucho.

Dejo mi paleta esta hecha en inkscape, la técnica esta muy buena si la implementamos sobre una triada tendríamos una paleta de colores grandes de donde elegir.

Al parecer ignoraba muchos temas que me están ayudando mucho a comprender más sobre el diseño gráfico.

Me encantó esta sección del Curso. Voy a seguir investigando el campo de los colores, me encantó. Gracias! Super sencillo de aprender.

wow son super concretos con la información gracias.

Recién empecé con el background en negro puro y si hay que estructurar el funcionamiento de ese lente creativo para trabajar desde el negativo, otra manera de ver las cosas para percibirlas en pro de la idea, gracias por tan clara y completa información, muy a gusto con el proceso.

Tengo en mente usar estos colores como primera versión para una cuenta de abogados ¿Qué opinan?

Lo intente!

Wow me encanto como quedo la paleta Gris yo jamas hubiese cambiado el negro pero creo es buena opción manipular el sistema de color HSB

Maravillosa explicación, me encanta trabajar con grises, pero nunca se me ocurrió hacer una paleta así. Ahora tengo una duda sobre “las versiones nocturnas”, no me queda tan claro qué es.

Os dejo mis notas de este post, por si a alguien le pudiesen servir.

Patrón para interfaces:

• Color principal y 2 auxiliares (oscuro y claro).
• Color oscuro: a partir del principal subimos saturación y bajamos brillo.
• Color claro: a partir del principal bajamos saturación y subimos el brillo.
• Tener una escala de grises en base a los colores extremos de los auxiliares (Con menor saturación).

Nota: Para paletas diurnas, nunca olvidar el blanco y evitar el negro (el contraste provoca fatiga visual). En versiones nocturnas de interfaces el color a “evitar” será el blanco.

Como obtengo la escala de grises del color?

Me dice que debo tomar las variación más oscura y la más clara, y disminuir la saturación. Pero como obtengo los valores intermedios?

Aclaradas muchas dudas que tenia! Siempre es complicado elegir colores, ahora será un poco mas sencillo! Me gusta esta clase

Muy bueno a tener en cuenta.
Gracias profe!!

Esto fue divertido 😏

Me gustaría saber cómo puedo elegir una paleta de color adecuada cuando el producto que se muestra es muy colorido y diverso, he trabajado el blanco pero queda como muy plana la imagen del producto, a pesar que es colorida. Qué tonalidades podría utilizar en este caso? Agradecería todos sus comentarios

Hola! no entendí muy bien el 4to punto, por qué no olvidar el blanco y evitar el negro absoluto, y viceversa?

No me quedo claro como sacar la paleta del color secundario ¿que regla se recomienda aquí? En el ejemplo parece que baja la saturación y sube el brillo, pero deja de ser naranja. ¿Alguien amable que me explique?

Hola! Me pueden dar feedback de esta paleta de colores:

🤯🤯🤯🤯🤯 Yo antes de leer esto hacia todas las interfaces en escalas grises, porque sentía que me que me quedaban mejor en vez de agregarle color… pero es porque volvía todo muy colorido y no aprovechaba estas técnicas.

La variaciones con imagenes de la naturaleza me han sido bastante utiles para desarrollar diseños

Tengo que mejorar mi gustos de colores y abrirme mas a otras paletas jaja por lo general siempre elijo tonos azules.

siempre me ha gustado realizar varios o por lo menos 2 temas de las aplicaciones que he hecho, siempre la original con su fondo light, y la version dark que son las que mas me gustan

Me encanto que añadieran el uso del negro. Ya que hay que tener mucho cuidado al trabajar con el.

Muy interesante la explicación, sobre todo lo del gris y el negro, ahora ya entendí por que hay que evitar el negro absoluto.

Muy buena explicación!

Me parece fantàstica la explicaciòn, muy clara y precisa

ame esta clase de paletas de color, las paginas que recomendaron son muy buenas, para ilustración también!

DUDAS:

1. No me terminó de quedar claro por qué Facebook se ve mejor que Quora, ¿alguien sabe?
   2.- En los sitios web, el negro en el texto se “libera” de la “recomendación tradicional” (por ejemplo en el caso de un blog)
   3.- Si es así, en el caso de las páginas web se debería de buscar que tenga menos texto posible?,
   4.- ¿qué opinan del sitio web de “Medium” (logo en negro)?

A mi me encanta el negro

Porque es necesario el blanco y el negro?

Si una organización ya tiene una paleta de colores, pero está un tanto saturada para usarla en productos digitales, ¿se le puede recomendar al cliente crear una paleta alternativa menos saturada con fines digitales, o simplemente usamos la que tienen y que se escandalice la vista?

Espectacular articulo para la implementación en el diseño de una página web.

Excelente articulo, cuenta con información demasiado útil!!
Muchas gracias! 😄

por que tenemos esa interfaz que no deja ver que bueno seria que en el modo lectura cuando uno scrolleara hacia abajo se ocultara y que si subimos volviera a aparecer hace estrecho el texto y molesta al ver la imagen.

![](

Hice una paleta de color a partir del rojo más oscuro de la manzana. Me gustó mucho el resultado. Muchas gracias!

:B Genial este articulo, muy preciso para la elección de colores en UX/UI

Amo cada aprendizaje de este curso!! ❤️

Muy concreta tu explicación, la combinación de colores es infinita. 😃

Excelente forma de dar conocimiento. Te hace querer saber más. Yo vengo de 0 diseño y he descubierto un mundo fascinante.

No entendí muy bien en que se diferencia la paleta de colores de Quora y Facebook, ¿porque es más aburrida la de Quora? visualmente si se me hace aburrida el diseño de Quora, pero no entendí como los colores es que influye en esto ya que se me hace parecida la selección de las variaciones, no se si me explique bien

interesante el curso me ha mantenido atento al 100%

Muy útil.

Uf! Me encantó, me parecieron “muy interesantes” como decías las tendencias de las paletas de colores y las combinaciones resultantes 😄

Excelente. Nunca antes había visto una guía tan simple y efectiva.

Es una excelente explicación; es muy importante el último punto a tratar la que las interfaces con fondos negros, tienden a ser mucho más comunes en la actualidad y en muchos casos esta empobreciendo el diseño.

Supeeeer este recurso esta excelente