Cómo crear paletas de colores para el diseño web y de interfaz de usuario (en Figma)

1. Te doy la bienvenida a la clase: Si alguna vez has luchado por elegir colores que realmente funcionen juntos o terminaste con diseños que se sienten un poco apagados, esta clase te ayudará En solo unos minutos, pasaremos de un solo color a una paleta completa equilibrada, versátil y lista para usar en un diseño real. Todo el mundo. Yo soy Adi. Bienvenido a esta clase corta sobre la creación sus propias paletas de colores para el diseño web y de interfaz Comenzaremos explorando armonías de color con herramientas como Adobe Color Después pasaremos a crear tintes y sombras justo dentro de Figma. Finalmente, aplicaremos nuestra paleta a un diseño listo para que pueda verla en acción de inmediato. No hace falta ser un experto en teoría del color. Lo mantendremos práctico y práctico, y al final, sabrás exactamente cómo construir y aplicar tus propias paletas con confianza He incluido un archivo de inicio en la sección Proyecto de clase con todo lo que necesitas. Instrucciones, un espacio para tu paleta y un diseño de muestra con el que puedes jugar. Muy bien, vamos a sumergirnos y comenzar a construir nuestra paleta. 2. Cómo entender las armonías del color: Antes de saltar a Figma, hablemos de armonías de color Una armonía de color es básicamente un conjunto de reglas para elegir colores que naturalmente funcionan bien juntos. Probablemente hayas visto términos como complementario, análogo, triádico Estos son básicamente atajos para crear paletas equilibradas Cada uno tiene su propio uso. La cortesía es genial cuando quieres fuerte contraste, como hacer que una acción de cuotas se destaque. Análogo crea esquemas unificados tranquilos, perfectos para cuando se quiere usar colores similares entre sí. Y triádico te da una variedad, utilizada a menudo en diseños lúdicos, más coloridos como las infografías Ahora, no necesitas memorizar todo esto. La belleza es que herramientas como Adobe Color hacen el trabajo pesado por ti. Así que entremos y generemos rápidamente algunas paletas. Posteriormente podremos refinar Figma. Antes de empezar, déjame mostrarte en qué estamos trabajando. Entonces aquí mismo, tengo una copia del archivo de inicio que puedes descargar siguiendo los enlaces en la descripción de la clase. Y en el interior, encontraremos algunas instrucciones básicamente sobre lo que tenemos que hacer junto con algunos recursos. Y luego tenemos un layout de práctica que podemos usar para aplicar nuestro esquema de color y luego algunos marcos adicionales para definir nuestros colores. Tenemos uno para el color primario o la marca. Tenemos uno para el gris, y luego uno para la armonía. Hablando de armonía, déjame mostrarte una herramienta que uso todo el tiempo para crear paletas de colores, y esa es Adobe Color Para que puedas acceder a él yendo a color.adobe.com, y luego harías clic en Crear Aquí, básicamente elegirías tu color base. Es este en el medio, y puedes hacer clic aquí para cambiar de color. No lo sé, a lo mejor quieres un verde más oscuro, algo así. Y una vez que hayas seleccionado este color, debes ir justo aquí donde dice armonía de color y elegir entre las diversas armonías Entonces, por defecto, tenemos seleccionada una armonía análoga, y esto básicamente crea una paleta de colores para los colores que están uno al lado del otro en la paleta de colores. Pero si cambiamos esto, por ejemplo, a una monocromática, eso es totalmente diferente Ahora, nos da varios tonos de ese color. Se puede ver que están en línea recta. Pero si cambiamos esto a tríada, ahora esta recoge colores de puntos equidistantes en la paleta de colores Tenemos esta naranja muy pastel. Tenemos este tipo de color magenta o lavanda, así que totalmente diferente, ¿verdad? Y verás que si cambio el color aquí en la rueda de colores, los otros colores se actualizan automáticamente manteniendo el mismo algoritmo básicamente. Entonces también tenemos de cortesía. Esto es muy utilizado. Esto básicamente selecciona colores que están opuestos entre sí en la rueda de colores. Y luego tienes algunos adicionales, split de cortesía. Tienes un compuesto cuadrado. Realmente no vamos a repasar estos en este momento, pero siéntete libre de jugar con ellos. Entonces esta es una forma de generar una paleta de colores basada en un color inicial. De otra manera, puedes hacer clic en Explorar, y Adobe Color tiene un montón de paletas de colores en su base Puedes buscar, por ejemplo, comida, y eso te va a dar paletas de colores relacionadas con la comida E incluso hay paletas de colores que se derivan de una foto específica como esta de aquí Entonces este es un gran recurso para encontrar colores. Otro que podría recomendar es coolers.co. Puedes iniciar el generador aquí mismo y simplemente puedes golpear la barra espaciadora, y esto generará una paleta de colores para ti, aunque, hasta donde yo sé, esto realmente no te permite crear paletas de colores basadas en armonías Entonces eso es algo que tienes en mente. Volvamos a nuestro proyecto y creamos realmente una armonía para esto. Y el color con el que voy a empezar para este proyecto es este naranja. Es f97 400. Es un color que creo que funciona bien para este tipo de proyectos. Obviamente, cada color de marca debe ser único para ese proyecto en particular, pero para esta demostración, voy a usar esta naranja. Así que en realidad voy a copiar esto, y voy a volver a Adobe Color, y voy a crear una paleta de colores. Voy a dar click aquí. Voy a pegar en ese color, y voy a elegir de cortesía porque los colores complementarios suelen funcionar muy bien juntos. Se complementan entre sí, ¿verdad? Y también ofrecen un alto grado de contraste entre sí porque están en los lados opuestos de la rueda de colores. Entonces esto es exactamente lo que voy a usar para este proyecto, y simplemente voy a hacer clic para copiar ese color, y lo voy a pegar en mi archivo Figma Copia esto, pegarlo aquí, y luego voy a agarrar éste y éste, y tengo toda mi armonía preparada. Entonces tengo mi color primario, y tengo mi armonía. Ahora, ¿voy a usar todos estos cuatro colores complementarios? No necesariamente, pero los tengo por si acaso los necesito, ¿verdad? Tengo algo con lo que trabajar. Y creo que este debería ser el primer paso en el proceso de diseño. Averigua el color principal de tu marca y luego crea una armonía basada en eso. Y qué armonía, qué tipo de armonía depende realmente del proyecto. En la mayoría de los casos, sugeriría ir por una cortesía porque es, supongo, la apuesta segura, pero hay otros tipos, siéntete libre de desplazarte por ellos y elegir la que creas que es adecuada para tu proyecto. Bien. Ahora tienes un conjunto base de colores para trabajar. A continuación, haremos que esa paleta más versátil al agregar tintes y matices Así que funciona para fondos, acentos y todo lo demás. 3. Crear tintes y tonos: Tener algunos colores principales es genial, pero en diseños reales, necesitas variaciones más claras y oscuras para profundidad, jerarquía y contraste. Ahí es donde entran los tintes y tonos, y puedes crearlos súper fácilmente en Figma o en la web. Déjame mostrarte. Entonces, antes que nada, déjame explicarte los tintes y matices. Es muy sencillo. Un tinte es una variación más clara de un color. Un tono es una variación más oscura. Es como agregar blanco o negro a ese color en particular. Y hay tantas formas en las que puedes crear tintes y tonalidades Déjame mostrarte una manera muy rápida en Figma, y eso es usando el modo de color HSL Entonces, si seleccionamos un elemento y abrimos el relleno, podemos dar click aquí, y por defecto, probablemente tendrás seleccionado hex. Es el formato de color que todos conocemos. Pero si cambiamos a HSL, eso significa saturación de tono y luminosidad. Y esta es otra forma de representar un color. En este caso, 28 es el tono, y eso es controlado por este deslizador de aquí mismo. Básicamente nos muestra el color puro que estamos usando. Este valor significa saturación, entonces qué tan saturado está ese color. Y ya verás que si bajamos esto, el color se vuelve más pastel como. Y si vamos todo el camino hacia abajo, se vuelve apenas un color gris, ¿verdad? Mantengamos eso a 100 por ahora. Y entonces el tercer parámetro aquí es la ligereza. Ahora, la ligereza controla qué tan claro o qué tan oscuro es un color. Y esta es tu principal herramienta para crear tintes o tonalidades. Entonces, si comienzas con el color base, que en nuestro caso, es este, y llevas el control deslizante hacia arriba estás creando versiones más claras de ese color porque básicamente estás moviendo el deslizador hacia el blanco. Si estás seleccionando el mismo color, pero luego estás moviendo el control deslizante hacia abajo o disminuyendo la luminosidad, en realidad estás haciendo versiones más oscuras de ese color, ¿verdad? Así que así, sí, hicimos un tinte de ese color base, y también hicimos un tono de ese color base. Ahora, como dije, hay muchas maneras de hacer esto. Puedes, por ejemplo, seleccionar o copiar el color, y puedes ir a la web y hay un montón de herramientas como esta. Por ejemplo, hacer tintes shades.com. Aquí, básicamente ingresas el código hexadecimal y haces clic en Hacer tintes y sombras Y eso va a crear un montón de variaciones de tu color, y simplemente puedes hacer clic para copiar ese código de color. Y esto funciona en formato hexadecimal. También hay una herramienta de Noel Delgado que uso frecuentemente, y que se llama Señor de las Sombras funciona exactamente de la misma manera Pega en tu color. Selecciona en cuántos pasos quieres entrar aquí. Básicamente, tal vez quieras en incrementos del 5%, y eso va a generar un montón de tintes y tonalidades para tu proyecto Sin embargo, si quieres la forma más fácil, puedes usar un FigmaPlugin, y hay un montón de enchufes por ahí. Te voy a mostrar sólo una de ellas. Entonces abramos las acciones aquí. Cambiaremos a enchufes y buscaremos tintes. Y eso te va a dar un montón de sugerencias de plug in de la comunidad. Y aquí mismo, voy a elegir Hue Hue. Bien, voy a guardar esto, y luego voy a ejecutarlo. Y el plugin se ve algo así. Voy a dar click aquí. Voy a usar el cuentagotas, seleccionar mi color primario Voy a elegir cuántos tintes y tonalidades quiero. Cinco es lo suficientemente bueno para mí. Orientación vertical, y voy a golpear generar Colores. Y eso genera un montón de o en este caso, cinco tintes y cinco tonos del color que seleccioné, que se resalta aquí mismo en el medio Ese es básicamente el color base. Entonces voy a mantener esto a un lado por ahora. Ahora bien, a la hora de crear paletas de colores, es muy importante que tengas una para grises, también, porque hay diferentes variaciones de un color gris en un diseño Por ejemplo, podrías usar, como, un gris oscuro para el texto. Podrías usar un gris muy claro para un borde o un fondo, ¿verdad? Entonces por eso es muy importante tener un montón de colores grises para elegir. Ahora bien, ¿cómo se crea ese gris? ¿Simplemente abres el selector de color y solo haces esto, básicamente Podrías hacer eso, pero lo que me gusta hacer es crear un color gris que se base en el color primario real. ¿Bien? Tiene un poco de ese color primario en él, y descubrí que esto me da los mejores resultados. Entonces esto es lo que voy a hacer. Voy a seleccionar este cuadro gris aquí mismo, y voy a presionar I en Figma, y voy a probar mi color primario Entonces voy a abrir mi selector de color, y voy a hacer lo siguiente Voy a reducir la ligereza, antes que nada, así que básicamente estoy creando una versión muy oscura de ese color. Pienso que cerca del 10% funciona bien. Y entonces voy a reducir la saturación, básicamente quitando mucho color de eso. Y voy a parar a cerca de tal vez cuatro. Y creo que en realidad voy a aumentar un poco la ligereza, solo para que podamos ver esto un poco mejor. Bien, así que estoy bastante contenta con eso. Ese es mi color gris. Por lo que el siguiente paso es generar algunos tintes y matices basados en eso. Entonces voy a volver a ejecutar el plug in. Voy a presionar Control K o Comando K si estás en una Mac. Voy a elegir Hue Hue, muestrear ese color gris, y generar colores. Esto básicamente generará tintes y matices para mi color gris Y voy a dejar estos a un lado por ahora junto a mis tintes y matices primarios Ahora nuestra paleta se siente completa. Tenemos colores claros, colores oscuros y todo lo demás. Pongámoslo a prueba aplicándolo a un layout real. 4. Aplicar tu paleta a un diseño: Esta es la parte divertida, tomar tu paleta y hacerla funcionar en un diseño real. Aplicaré el mío al diseño en el archivo de inicio, que puedas ver cómo uso cada color para diferentes roles como fondos, texto y llamadas a la acción. Dicho esto, comencemos. Empezaré por aplicar colores al texto porque eso forma la mayoría del contenido de nuestra página. Entonces el plan es, quiero aplicar un gris oscuro a todos los encabezados un gris ligeramente más claro a los demás elementos del texto Así que volvamos a nuestra paleta. Este es el color base del que partimos. Vamos con éste, por ejemplo. Entonces vamos a copiar eso, y voy a seleccionar todos los encabezados y voy a pegar en ese color A continuación, veamos sobre los elementos de texto regulares. Y otra cosa que voy a hacer es copiar este elemento de los tintes y sombras aquí y simplemente pegarlo dentro del marco de grises Y esto sólo me va a decir qué colores terminé usando en mi diseño. De hecho, comencemos con el color gris base. Apliquemos eso a un elemento y veamos cómo se ve. Y a mis ojos, creo que se ve bien. Probemos con una versión un poco más ligera, tal vez esta. Vamos a aplicarlo aquí. Y creo que eso me da un contraste ligeramente mejor. También seleccionemos estos y apliquemos ese color. Sí, creo que eso me da mucho mejor contraste entre el elemento de texto real y el encabezado. Y además, una cosa muy importante que necesito verificar aquí es el contraste de color para la accesibilidad. Entonces esto en realidad es súper fácil de hacer Figma. Si selecciono un elemento con un color de relleno y hago clic en ese, obtenemos este gráfico aquí en el seleccionador de color, básicamente Si el color que seleccionaste se asienta en esta área del selector de color que no está punteada, entonces ese color en particular tiene suficiente contraste de color en comparación con su fondo para que cumpla con los estándares de contraste en este caso, Y estos son para fines de accesibilidad, ¿verdad? Es para personas con discapacidad visual a las que cuesta descifrar texto cuando es como cuando no tiene suficiente contraste Y en realidad se puede ver que tenemos una relación de contraste de 7.45 a uno No voy a repasar los detalles de esto ahora mismo, pero sólo para que sepas, es una comprobación importante que hacer. Así que recuerda hacerlo cada vez. Bien, veamos dónde más puedo aplicar este color de texto. Bueno, podría aplicarlo aquí mismo en estas pestañas, ¿no? Entonces selecciona eso y aplícalo ahí. Uy. Al igual que, tal vez hasta éste porque como que pertenece a la misma categoría de texto que los demás. Estos serán coloreados de manera diferente porque son una especie de insignias que necesitan para destacar un poco más. Pero el tiempo de cocción y texto de dificultad de la receta deben ser coloreados de la misma manera. Entonces voy a aplicarlo a esos también. Ahora, porque usé este color para el texto, así que 553, sólo voy a copiar este elemento y lo voy a pegar en mi gris aquí mismo. Bien, terminemos de aplicar el gris. Tenemos algunos otros elementos UA que deberían estar usando algunos de los colores grises. Y aquí, estoy hablando, en primer lugar, de las fronteras de estos elementos de estos botones aquí, de las propias tarjetas. Y también necesitamos averiguar un color de fondo para este desplegable. Entonces comencemos con las fronteras. Escojamos el color más claro que tenemos aquí, que en nuestro caso es DD, DC DC Y vamos a seleccionar estos cuatro elementos y cambiaremos su color de trazo a ese elemento ahí mismo. Y solo vamos a echar un vistazo rápido que me queda bien. Y sigamos adelante y seleccionemos estos elementos aquí y cambiemos su color de trazo. Y creo que estos también se ven bien. Así que vamos a ir con eso. Entonces déjame copiar esto. Voy a pegarlo solo para saber qué colores usé. Y ahora veamos sobre este elemento desplegable, ¿verdad? Entonces voy a seleccionarlo, y voy a presionar I, y sólo voy a probar este color. Entonces veamos cómo se ve eso. Eso se ve bastante bien. A lo mejor me gustaría que esto fuera un poco más ligero. Y si miramos en la paleta de colores que generamos, en realidad no tenemos una versión más ligera de esto. Y en este caso, podríamos, ya sabes, regenerar el conjunto de tintes y matices para ese color y elegir más pasos, básicamente, o simplemente podemos crear nuestro propio Entonces puedes hacer esto totalmente. Puedes seleccionar eso. Puedes abrir el relleno de color aquí mismo, y podemos trabajar en el modo HSL, tal como te mostré antes, y simplemente podemos aumentar la ligereza hasta que se acerque realmente a ser blanco. Entonces 94, en mi caso, crea un color suficientemente bueno para este fondo en particular. Entonces estoy contento con eso, y simplemente voy a copiar este color de relleno, y lo voy a agregar aquí mismo. Voy a pegar ese valor, y lo voy a aplicar a este elemento, también. Entonces eso es todo para aplicar los grises. Nuestro diseño de práctica ahora se ve totalmente diferente al que teníamos antes porque nos encargamos de colorear la tipografía, los bordes y todos los elementos que básicamente necesitaban un color gris Ahora, sigamos adelante y comencemos a aplicar nuestro color primario o de marca. Y permítanme decir esto desde el principio. Esto debería usarse con moderación, ¿verdad? Debería ser más de un color de acento, no estar presente en todas partes en tu diseño. Entonces, con eso en mente, seleccionemos el color principal de la marca, y veamos dónde podemos aplicarlo tal como es, solo directamente. Y desde donde estoy parado, un buen lugar para hacer eso es aplicarlo a estos íconos, ¿verdad? Entonces solo voy a hacer doble clic y hacer doble clic hasta que seleccione el marco correcto, y simplemente voy a reemplazar el color negro aquí. Donde dice colores de selección, sólo voy a pegar en mi color primario. Y eso solo va a apuntar a los elementos, los íconos, básicamente, a los que estamos usando el negro. Y yo voy a hacer lo mismo aquí y voy a hacer lo mismo aquí. Y aquí. Entonces con solo hacer eso, ahora tenemos un poco de ese color de acento en nuestro diseño, y simplemente hace que todo se sienta más cohesivo Pero ahora vamos a revisar los demás elementos que necesitan nuestra atención. Y esas son estas dos insignias, donde dice cena, italiana o almuerzo, mediterránea. Estos también podrían usar ese color primario. Pero la cosa es que si seleccionamos estos y elegimos usar el color completo de la marca en ellos, van a destacar demasiado. Van a llamar nuestra atención sobre esa sección en lugar de esta sección aquí mismo donde dice ver receta. Esta debería ser la llamada acción, ¿verdad? Estas deberían ser las cosas en las que la gente haga clic. Y al aplicar el color completo aquí, estamos atrayendo demasiada atención a esa área. Entonces lo que tenemos que hacer es simplemente bajar un poco más el tono de esos colores. ¿Cómo lo hacemos usando tintes y tonalidades? Así que volveremos a nuestra lista de tintes y matices. Voy a seleccionar el color más claro, el tinte más claro de ese color primario Y lo voy a aplicar como fondo de este elemento. Y eso me parece muy bien. No es demasiado color, pero es suficiente para todo el diseño se sienta más cohesivo Ahora bien, para el texto real, bueno, ¿qué tal si agarramos como un tono de ese color Entonces esta es la base. Vamos a agarrar este , por ejemplo, vamos a pegar eso en y ver cómo se ve, seleccionar ambos de estos, pegarlo en. Y creo que eso se ve muy bien. No es como el negro. Es solo una versión más oscura de nuestro color primario. Y creo que se ve muy bien. Entonces apliquemos esto a los demás elementos. Entonces, antes que nada, permítanme seleccionar los demás elementos, y veamos si podemos encontrarlos. Es este de aquí. Así. Y luego para el texto, seleccionemos ese. Y mientras mantengo presionado Control o comando y shift, solo puedo hacer clic para seleccionar todos estos elementos, pegar en el nuevo color, y ya terminamos para el color de la marca. Ahora bien, el elemento final al que necesitamos aplicar colores es este botón de ver receta. Entonces, ¿qué podemos hacer aquí? Bueno, recordemos el hecho de que tenemos una armonía que está lista para nosotros y que no hemos utilizado. Pero en realidad, casi lo olvido, ya que usamos algunos tintes y tonalidades de ese color primario, realidad vamos a seleccionar esto y esto copiarlos en nuestro marco de color de marca primaria ahí, solo para que sepamos qué colores usamos en nuestro diseño Bien. Ahora, volvamos a la armonía complementaria. Vamos a agarrar este color, copiarlo, y vamos a usarlo para los botones. Entonces voy a seleccionar esto, y sólo voy a sustituir el negro puro por ese color. Y de inmediato, esto es demasiado brillante. Es demasiado brillante. Y porque es demasiado brillante sobre este fondo blanco, no tiene suficiente contraste. Si hacemos una comprobación rápida aquí, verás que el selector de color está dentro de la zona punteada, y no estamos pasando el estándar de contraste DA. Entonces, una cosa que puedes hacer en Figma es que realmente puedes hacer clic en este botón, y eso va a mover automáticamente el selector de color al primer color que cumpla con el estándar Alternativamente, puedes crear tintes y tonos para este color y luego elegir uno de esos De hecho, seleccionemos este color que creamos con nuestra armonía, y veamos cómo se verá eso. Entonces, seleccionemos esto, cambiemos el trazo y el color del texto. Y si miramos el selector de color aquí, puedes ver que ahora tenemos un contraste de color lo suficientemente bueno para esos elementos Entonces, en realidad vamos a seleccionar toda esta sección, y solo voy a reemplazar ese color azul brillante con este. Y ya terminamos. Echemos un vistazo final así es como se ve nuestro diseño actualmente. Tenemos grises aplicados a la mayoría de los elementos, incluido el texto. Y luego rociamos algo de ese color primario de la marca como acentos a lo largo de nuestro diseño Y usamos tanto el color crudo en estos íconos, pero también tintes y matices de eso en estas insignias de aquí mismo Y para la acción principal de Qualta, utilizamos el color complementario que obtuvimos de nuestra armonía Y así, tu paleta no es solo un conjunto de colores. Es parte de un diseño funcional real. Empezamos con un solo color. Construimos una paleta completa usando armonías, tintes y tonos y la aplicamos a un diseño para ver cómo funciona todo Estos mismos pasos funcionan para cualquier proyecto de diseño, ya sea que estés creando un sitio web, un APUA o incluso activos de branding Cuanto más practiques la construcción de paletas como esta, más rápido obtendrás al elegir colores que funcionen maravillosamente juntos Ahora es tu turno. Descarga el archivo de inicio usando el enlace en la descripción de la clase, crea tu propia paleta usando las técnicas que cubrimos y aplícala al layout proporcionado. Puedes seguir mi enfoque exactamente o hacerlo completamente tuyo. Eso depende de ti. Y si quieres un reto extra, intenta crear una versión tanto clara como oscura usando la misma paleta. Cuando termines, comparte tu trabajo en la Galería de Proyectos de Clase. Me encantaría ver tu opinión sobre ello. Y si disfrutas de esta clase, echa un vistazo a mis otras clases de Skillshare para obtener lecciones más rápidas y prácticas de diseño web Todo bien. Gracias por ver, feliz diseñando, y te veré en la siguiente clase. Adiós por ahora.