No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Bonus: Cómo evitar colores constrastantes

12/23
Recursos

Cuando utilizamos colores demasiado contrastantes podemos generar efectos visuales algo molestos, problemas en el render o lineas blancas y negras en los bordes de los elementos. Para solucionar estos problemas visuales debemos elegir nuestros colores con mucho más cuidado, moviendo los colores hacia alguna tonalidad para evitar colores demasiado contrarios.

Aportes 55

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Un consejo muy repetitivo( o bueno eso es lo que he percibido en los cursos de la carrera de diseño) es tratar de inclinar el color deseado hacia el blanco o negro, tal cuál como nos muestra rulótico. Hay varias paletas de colores en colorhunt.com o en colors.com
Además si poseen Adobe Creative Cloud, existe también la version Adobe Color CC.

En vez de utilizar colores drásticos y contrastantes (blanco y negro, azul fuerte y rojo fuerte) podemos inclinar nuestros colores hacia algún lugar un lograr efectos visuales mucho más profesionales 👍🎉.

Pueden revisar la página Colorable.
Funciona para hacer pruebas de contrastes y ver cuales tonos funcionan y cuales no.

El profe Rulótico González, puso como ejemplo el Blanco y Negro, por ser los colores más opuestos.

El Comento, que no debemos de incluir colores que sean tan contrastantes, pues aunque no parezca, causa un efecto visual (generando una línea de separación) entre el renderizado de los objetos y nuestra percepción visual, generando problemas.

También comento que, No usa el negro en su máxima expresión porque son pixeles apagados y nosotros en el mundo real, no tenemos colores completamente negros, porque siempre hay una luz que impacta.

⚡Pueden ver todas las notas de la clase en este Notion, además le agregué recursos extras, espero les guste.

✔También escribí el siguiente tutorial 8 atajados de teclado para ser un máster en Notion.

Estoy leyendo en los comentarios cosas como “que deseamos inclinarnos hacia el blanco y negro”, yo entendí en la clase todo lo contrario, que debemos evitar colores tan contrastantes como blanco y negro, y de hecho no usar blanco y negro. ¿Qué piensan?

Nota mental, colores basicos que vayan hacia alguna tonalidad, en especial el blanco y negro

La elección de colores deberá variar de acuerdo a la identidad de marca, a la intención y el objetivo de la empresa u organización al que va dirigido el contenido. Hay que evitar basar esa gama de colores en tus preferencias personales.

Hola a todos, les comparto una página bastante interesante para crear paletas de colores, espero les guste. mycolor.space

Yo siempre batallo con los colores, Coloco uno y de repente ya no me gusta y así sucesivamente.

En otras palabras, podríamos decir que nos tenemos que alejar de los extremos e intentar inclinarnos hacia uno de estos?

me encanta la vibra de este profe!

Con esta extensión pueden saber que color capturar de la página que visitan en Chrome.

https://eyedropper.org/

otras opciones que les podría ayudar son:
https://coolors.co
https://paletton.com

Nota: Evitar el negro #000000 absoluto. Para no generar problemas de percepción con los colores que hacen contraste.

Los colores muy contrastantes pueden cansar la vista y eso generar una fatiga visual al usuario

🤯 Y un tema para esto son los espacios de color y la capacidad que tienen las pantallas para poder reproducir cierta cantidad de colores, para mí, es toda una locura 🤨

jajajaja, me encanta la actitud de Rulótico,… muy bien.

Amé esta explicación de los colores y de los problemas que pueden surgir cuando se combinan mal o se utiliza el negro puro. Me pasó algunas veces mientras diseñaba y ahora sé que lo produce y cómo solucionarlo ❤️ ¡gracias por estos datos!

Acá les comparto un artículo en Medium que habla sobre el Por qué debemos evitar el negro puro? Espero les sirva de ayuda!

Adobe Colors hoy -sept 2022- me parece una súper herramienta para la selección de colores! No solo te crea paletas de colores con un color específico que le compartas, lo cual es demasiado cool, sino que tiene una herramienta de accesibilidad que permite contrastar colores https://color.adobe.com/es/create/color-contrast-analyzer

Corazón coreano marca Platzi 💚

neee ammes esto esta bien prrr

En vez de utilizar colores drásticos y contrastantes (blanco y negro, azul fuerte y rojo fuerte) podemos inclinar nuestros colores hacia algún lugar un lograr efectos visuales mucho más profesionales 👍🎉.

Apuntes

Cuando los colores son demasiado contrarios, las pantallas no logran hacer una buena combinación de los colores en los bordes de los elementos combinados, tiende a hacerse ciertas lineas para poder cambiar de un color a otro.

Se recomienda no usar negros totalmente negros como #000 porque no logra verse bien

ahora veo el diseño de otra forma, que gran clase

Siempre hay que evitar usar colores contrastantes, tampoco negros profundos, es mejor colores con cierta inclinación pero no totalmente.

El profesor me hace mucha gracia, es muy simpático

Este hombre es increíble, súper inteligente y aparte divertido, no puedo creer que viví más de 6 años sin saber esto.

Tambien no hay que olvidar a los usuarios que tienen dificultades visuales (que no pueda ver uno o varios colores), para estos usuarios si se debe usar colores contrastantes

Ja corazon coreano

Gracias
El título de la lección tiene un typo. Bonus: Cómo evitar colores "constrastantes"
Cuando utilizamos colores demasiado contrastantes podemos generar efectos visuales algo molestos, problemas en el *render* o lineas blancas y negras en los bordes de los elementos. Para solucionar estos problemas visuales debemos elegir nuestros colores con mucho más cuidado, moviendo los colores hacia alguna tonalidad para evitar colores demasiado contrarios.

Cuando eliges colores para un sistema de diseño, es esencial considerar la coherencia y la accesibilidad. Los colores deben reflejar la identidad de la marca y proporcionar una experiencia visual armoniosa en toda la interfaz.
Además, ten en cuenta la accesibilidad para garantizar que los usuarios con discapacidades visuales puedan interactuar fácilmente con el contenido. Por ejemplo, si eliges un color específico para resaltar los botones de acción, asegúrate de que sea lo suficientemente contrastante con el fondo para que sea fácilmente distinguible, beneficiando así a todos los usuarios, independientemente de sus capacidades visuales.

Esta clase estuvo 👌

Like si has cerrado los ojos para verlo.

yo utilizo Inkscape ,pz Inkscape
es un editor de gráficos vectoriales que permite: Diseñar imágenes de calidad, básicas o complejas. Crear y editar diagramas, líneas, gráficos, logotipos, cómics, folletos, entre otros. Utilizar formas, trazos, texto, marcadores, clones, y otras herramientas de diseño

En esta página pueden ver si estan usando colores accesibles y chequear el contraste

Gracias por compartir este tipo de consejos… De verdad que aunque parezcan tonterías son de mucho valor.

Para tema de paleta de colores y el uso de contrastes es bueno tener claro para que se va a usar, solo así tendremos claro que tonalidades podemos usar sin caer en este problema de usar colores altamente contrastantes. También es bueno que se defina el color con mayor frecuencia y su contrapuesto, una herramienta que uso según el tipo de diseño que realizo es, Adobe color trends https://color.adobe.com/es/trends

buenos tips, gracias

En otro curso de diseño explicaba lo mismo pero el blanco no lo puso en la lista de no utilizarlo, el blanco pue ir en nuestras aplicaciones normalmente con su color original. (ademas muchas web lo implementan)

Me gusto bastante la clase, no había pensado eso del blanco y negro en contraste con los colores.

Y yo que usaba como loco el negro total jajaja

Interesante dato.

Dejare de usar el color #000000. Para buscar una tonalidad mas agradable.

Genial, nunca habia visto los colores de esta manera

Recomiendan alguna paleta de colores?

OK.

  • NO usar colores contrastantes y tampoco el negro y el blanco en su totalidad.

Pero…¿Que hacemos con la accesibilidad de la pagina cuando el usuario tiene problemas visuales, cómo daltonismo ?

Otro consejo bastante útil es evitar el uso de circunferencias completas, esto debido a que en el mundo del dibujo por computadora, las líneas curvas no existen, por tanto, el que una circunferencia se vea bien o no dependerá del algoritmo de dibujo del software utilizado y eso normalmente está fuera de nuestro control.

¡Saludos!

Increible consejo, me ayudó muchisimo.

Genial! siempre tuve ese conflicto creando dispositivas, ahora se porqué se da y como evitarlo.

Para mi los colores y la tipografía lo mas difícil de aprender me toca mucho practicar