 Buenos días y muchas gracias por estar aquí primero y luego, bueno, vamos a hablar de color y el color es un sujeto enorme, hay muchísimo que decir y entonces vamos a tocar unos puntos que son fundamentales para unos de vosotros va a ser un poco de tu repaso, para otros ahora mejor vais a descubrir cosas que tenemos ahí primero, a qué sirven los colores, qué son, por qué, por qué existen los colores, bueno los colores primero en la naturaleza, como la naturaleza como en la vida, como en el mundo construido por los hombres los colores indican función, cuando buscamos comida en los bosques los colores nos ayudan a distinguir lo que se puede comer de lo que no se puede comer, lo que sopa, lo que es fruto, lo que es venoso, lo que no es venoso entonces primero los colores indican función, nos ayuda a reconocer los objetos, es la función más importante por ejemplo en el mundo construido por los hombres un utilizo típico de muchos colores son los mapas de las de las metropolitanas, es español pero y podemos así navegar mucho más fácilmente por gracias a los colores entonces y por ejemplo los colores en la vida también como en la naturaleza también pueden indicar peligro o seguridad y entonces otra vez nos ayudan, nos señalizan cosas importantes, entonces los colores sí nos ayudan a navegar la vida pero a ver qué es el color, cómo se forma el color, por qué podemos ver el color y lo que pasa es que no voy a ir muy lejos con la parte científica porque no soy científica simplemente os voy a contar lo que he entendido yo con mi terebro de diseñadora, lo que he entendido yo de qué es el color y el color es, un poco me lo tengo que leer para ser precisa, para asegurarme de decir pobadas el color es la impresión producida por un tono de luz en los órganos visuales entonces es una combinación de fisiología y de física, es una percepción visual que se generan el terebro de los humanos y de otros animales al interpretar las señales nerviosas que le mandan los receptores en la reina de los ojos, que a su vez interpretan y distinguen las distintas hondas las longitudes de onda que captan la parte visible del espectro electromagnético esto suena muy complicado pero en realidad como no entiendo yo es bastante sencillo en el sentido que esta combinación de física y de fisiología se basa en esta pequeña parte del espectro electromagnético donde podemos ver los colores y a ver qué es el espectro electromagnético simplemente el espectro electromagnético es la energía del sol es lo que da la vida al mundo, vamos y es un espectro enorme en que la mayoría de los que no podemos ver porque los rayoses, el gama, radar y todos los demás no los podemos ver, nos ayudan en la vida, juegan un papel importante en nuestra vida pero no los podemos ver, solo podemos ver una parte muy pequeña del espectro electromagnético que se llama de la luz visible y en esa parte del espectro se forman los colores los colores van del violeta hasta el rojo y así, así es muy sencillo y lo que es importante entender es que todo cuerpo físico iluminado absorbe una parte de estas ondas electromagnéticas y otra parte la refleja y las ondas reflejadas son lo que captamos con nuestros ojos y lo que es súper importante entender es que el color sin luz no existe, simplemente porque el ojo humano puede festivir estas locitudes de onda cuando en presencia de luz abundante, cuando no hay luz no se ven los colores negro o bueno va dependiendo de la cantidad de luz y esto es algo que pasa en el mundo real, es difícil como en el mundo digital entonces en el mundo digital es importante entender que el color es pura luz en las pantallas de los oreadores, los teléfonos de cualquier plataforma digital este modelo de color se forma a través de rayos luminosos que están hechos de luz y este sistema se llama síntesis aditiva de color porque los colores cuando se juntan los colores quemarios de este modelo de color se forma el blanco, el blanco son todos los colores mientras que el negro es la ausencia y este es el hecho fundamental y este modelo de color se llama el modelo RGB y claro que si trabajáis en la web ya lo habéis encontrado y sabéis que es y en este modelo de color los colores primarios son el rojo, el verde y el azul y como en inglés se desprimale entre todas partes utilizamos las iniciales de RGB en el mundo real fuera del mundo digital el color es luz reflejada y esto quiere decir que los colores se ven de una manera muy distinta no son pacos, no son brillantes y este tipo de modelo se llama síntesis subtractiva porque el negro se forma de la unión de todos los colores mientras que el blanco simplemente es ausencia de pigmento entonces por esto se llama síntesis subtractiva porque es como si el negro quita toda la luz de una manera así dicho con el huarca y todos los días y en la impresión del color se aplica la síntesis subtractiva en el mundo real físico siempre es síntesis subtractiva porque siempre es una combinación de absorción perdón que mi gracia y improviso mal en español porque he vivido demasiado en Inglaterra y entonces la mezcla de absorción y reflejar, reflejo y eso son los primarios y el negro se añade en la impresión el negro se añade casi para añadir definición pero en realidad no haría falta porque cuando se unen los colores se forma el negro y este también es un modelo importante siempre es de síntesis los colores primarios de este modelo son rojo, amarillo y azul síntesis subtractiva y es el modelo de color que se utiliza en arte y es importante acordarse porque los primarios son diferentes pero son los primarios que se utilizan en la teoría del color y en la armonía del color entonces como decía el color se vuelve parece sencillo pero luego se vuelve bastante complicado y porque en general para nosotros en la web nos interesa RGB pero tenemos que tener en cuenta también esto porque si no no entendemos la teoría del color y a ver otra vez también es interesante ver como cuando los colores aditivos se mezclan tenemos resultados muy diferentes cuando el amarillo y el rojo se mezclan en el modelo subtractivo el resultado es muy diferente de lo que conseguimos en el video y también es importante haber explicado a los siguientes que si ven un color en la pantalla no lo pueden obtener en la presión y es algo que siempre hay que repetir y está muy bien de saber qué decir porque no es posible porque uno es hecho de luz entonces es transparente y brillante y el otro no entonces no podemos conseguir y también depende claro del suporte de la gustabilidad pero eso vamos a llevar entonces el blanco otra vez en RGB es cruzato que quiere decir que en RGB tenemos 256 niveles de fuerza del color en los tres rayos cuando todos estos están a tope como has visto conseguimos el blanco cuando no hay nada cuando hay cero luz y el negro así de sentido todos los otros colores se forman con los niveles de esos tres rayos y cuántos son esos colores? hasta tres son 186.777 no, 16 millones es que no sé decir en ningún idioma eso es pero no es de gracias más de casi 17 millones que son muchos colores y así es donde se nos saque la cabeza porque cómo nos vamos a elegir cómo podemos formar nuestra alba y la manera que tenga sentido porque lo que pasa es que cuando empezamos a diseñar una web lo que sería bueno es que los clientes llegaran ya con su paleta de colores la marca la imagen corporativa ha hecho muchas veces esto no pasa y entonces es muy importante saber como aunque cuando exista la imagen corporativa de los colores cómo utilizarnos de la mejor manera para formar la UI entonces vamos a ver el círculo cromático no tenemos el tiempo de hablar de armonía de los colores en detalle porque eso es todo otro otra charla pero por lo menos tenemos que conocer unas cosas fundamentales decir, círculo cromático a mí me fascina y es súper interesante es simplemente lo que es es una organización lógica de una secuencia de colores todo así es y el primer científico que lo contextualizó fue Isaac Newton en 1666 sí dice porque aquí dice que no era esto pero bueno, después de muchísimos científicos y también artistas anteriorizados sobre mundos de los colores Grete, el escritor alemán y luego también Hinden que era otro... muchos alemanes Albers, que era un artista que se centró en estudiar cómo los colores cambian dependiendo de su entorno o sea que un color puede... bueno, eso también es otro chaval pero bueno nos ayuda mucho el círculo cromático que se basa, hay que tener es importante decir que se basa en el... en el modelo... no sé qué pasó ahí en el modelo r y b es decir rojo, azul y amarillo que se basa en ese modelo entonces estos son los colores primales rojo, azul y amarillo en el círculo cromático de momento todo lo que nos importa es que esta es una herramienta esencial para comprender cómo los colores se organizan cómo interactúan y cómo podemos elegir combinaciones y por qué os voy a dar en este caso simplemente las combinaciones, las técnicas más seguras para el web entonces aquí vemos cómo se forman los demás colores o sea que tenemos los primarios si mezclas dos primarios obtienes un secundario si mezclas un primario secundario obtienes un perdiario y así se forman los colores pero en realidad lo que tenemos que lo que tenemos que entender bien para poder empezar a jugar con los colores son los atrimutos del color cada color tiene tres atrimutos el mantí, la saturación y la luminosidad y como todas en inglés este sistema se llama HSB mantí es hue saturation and brightness y lo que es hue mantí en realidad simplemente es el nombre del color el color es mantí rojo es su mantí azul, verde es su mantí saturación es la intensidad o pureza de ese color a mi me gusta más intensidad porque yo lo veo que cuando le quitas saturación le quitas intensidad hay quien dice pureza pero si dices que le quitas pureza que le añades crisis para mi no es así le quitas intensidad y cuanto más le quitas más llegas a iris la luminosidad es la cantidad de luz que hay en cada color y vamos a ver cómo funciona porque es muy interesante este sistema de HSB en realidad es tridimensional porque el hue se expresa en grados y la saturación en luminosidad se expresan en números de 0 a 100 o en portentaje el hue se expresa en grados súper fácil de entender así volvemos al típico cromático por eso os dije lo del típico cromático porque simplemente el hue es la posición en el arco iris de cada lado y entonces sabemos que el rojo estero y lo que entonces si nos acordamos de unas posiciones fundamentales ya más o menos sabemos que por ejemplo si me dices hue 176 ya sé que es un verdito acúlpico que es un teclado en esa posición y vamos a ver cómo cómo funciona este entonces este es el es el nosotros como se dice el corpícar en español porque tenemos en inglés entonces tenemos este verde que está en el que se expresa la hue 176 vamos aquí a ver si me funciona vale y la saturación en este caso es 100% y la luminosidad es 40% y vamos a ver cómo funciona esto porque es lo más interesante que hay el RGB se expresa con astero de radio rojo 128 de verde y 120 de azul y luego el lab no nos interesa y la traducción en el sistema sustractivo es interesante en el sentido de que es aliantorio, no aliantorio arbitrario porque en realidad no te va a salir eso y si cuando estás imprimiendo nunca utilitas utilitas niveles más exactos porque si no te vas a ver bien pero bueno de eso no voy a hablar y luego lo que nos interesa es el sistema hexadecimal que se expresa en no voy a ir en ello porque vamos a tardar bastante pero se expresa en 6 números o dígitos o letras los números son de 0 a 9 las letras de A a F las primeras 2 son rojo y es 0 porque no tenemos nada, 0 a 0 y luego el verde 80 y el de la turma 78, cuando es a tope es F, F es a tope 0 es nada si trabajáis la web sabéis que el blanco se expresa F, F, F 6 F todos sus traios a tope, muy sencillo entonces esto nos interesa para ver como podemos jugar con los colores con el sistema hexadecimal, a ver primero la saturación ya podemos crear paletas para la UI variando la saturación es más sutil pero se puede ya utilizar y aquí se ve muy bien aquí es el color de antes por tiempo y tiempo de saturación 80, 60, 40, 90 y 10 y aquí es interesante porque a mi esto este es más luminoso de mi pantalla porque entonces lo veo en este color es más verde de lo que me aparece la pantalla y luego vamos a ver a ver los colores siempre cambian, siempre cambian dependiendo de su fuerte y de la iluminación y tal, entonces ya me noto esto esto es mucho menos gris de lo que parece en mi pantalla pero bueno vemos como quitando la saturación llegamos al llegamos al gris esto por ejemplo es una paleta basada en la saturación es muy sutil la diferencia pero se podría ya frear una paleta así sin liarse utilizando demasiados colores porque eso puede tener trampas pero a ver lo que me gusta más a mi para la UI son es jugar con la luminosidad a ver hay dos tipos de luminosidad cuando hay cero luminosidad el resultado siempre es negro eso no varia pero hay dos tipos de luminosidad a tope podéis ver la diferencia aquí en ese caso tenemos el color de antes que era si aclaráis 50 por 100 de luminosidad lo tenemos en las variaciones de 0 a 100 y cuando tenemos 100 tenemos un color super brillante es como si ese color le tuviéramos una bombilla a tope sobre ese color entonces siempre es un color muy fuerte muy brillante a ausencia de saturación la la luminosidad 100% es negro pero solo a ausencia de saturación porque cuando usía esa saturación cuando hay el matiz entonces el resultado de 100% de luminosidad es un color muy fuerte se entiende esto? a ver porque es super importante saber jugar con la luminosidad porque con gano con la luminosidad podemos construir una paleta para nuestra interfaz que donde no cambias el matiz siempre el matiz es exactamente lo mismo pero simplemente jugando con la luminosidad aquí tenemos 50 por 100 de antes aquí tenemos el 20 por 100 y el 80 por 100 que parecen diferentes colores no son el matiz es igual porque es importante cuando la gente tenga tegueras de varios tipos de color el problema siempre es el matiz la luminosidad se ve con esto tenemos más posibilidades de que nuestra joy sea accesible también a la gente que tiene problemas de tegueras y a ver ahora volvemos un ratito apenas al círculo gramático porque voy a tocar lo de la armonía de los colores no vamos a hablar, pero sólo una cosa quiero decir es de los colores complementarios porque es importante también para la exena de psicología y eso es, los colores complementarios en el círculo gramático son los que es los supuestos entonces este azul tiene ese naranja fuerte y a ver, tenemos aquí son los colores complementarios que son súper bonitos juntos y que pueden y que con los que se pueden construir paletas muy fuertes pero para los novatas el color mejor no arriesgar eso fuerte pero cuando hacemos combinaciones de colores con el texto, los resultados son terribles entonces nunca utilizar colores complementarios en combinaciones de exploradores esto no tampoco, porque yo lo veo que tengo otros problemas yo no tengo problemas en ver los machices pero sí tengo problemas otros problemas con la red, mi red entonces veo, me vibra todo o sea que me... no sé, no sé qué hacer entonces esto me confirma también que estoy segura que vosotros habéis visto otra cosa de lo que he visto yo cuando he mirado sus colores, como esta pantalla es diferente de mi novioledador porque el color es una opinión la perfección del color depende de muchísimos factores fisiológicos de luz, de soporte de también culturales y culturales también muy importantes y a ver, este vestido es lo que he dividido lado yo he visto un webinar sobre esto el otro día porque para mí esto o sea es negro y azul mi mente se niega a comprender que puede haber gente que te dice que puede ser dorado y blanco pero que sí que hay que había gente en webinar que me decía dorad y blanco ¿hay alguien en esta en esta habitación que ve dorad y blanco? dorad y blanco es muy interesante y también en la regal, este es azul y negro pero no es más, algo como 78% de la gente que dice y decía que este era dorad y blanco yo digo estáis locos ¿hay alguien en el blanco aquí? no yo no sé la gente dice que es dorad y blanco pero no, es azul no, no es dorad y blanco es dorad y blanco es dorad y blanco es dorad y blanco para no es entonces podemos estar de acuerdo estamos todos de acuerdo que el color es dorad y blanco ¿vale? o será? tiene muchísimas variadores ok entonces entonces nuestra región de colores siempre será accesible y hay que controlar siempre que el color no impida impida el proceso interactivo no podemos arriesgarnos que pase algo así porque el 8% de hombres y el 3% de mujeres tienen una forma de pegar el color y estas son las varias alteraciones de la perspectiva del color más quiere decir que no es de ser rojo o tranquilizado y el 8% es mucho y la mayoría de la gente lo desconoce no lo sabe porque por ejemplo yo descubierto que mi hermano se quería poner una forma tan roja con un vestido verde y le decía no, hombre hay algo aquí que no funciona entonces esta página simplemente venden gafas que te corrigen el problema pero no voy a ir porque tiene un test entonces hacerlo porque en el webinar ha salido gente que no sabía tener unas cegueras al color súper interesante hay otros problemas que me influencian pero súper divertido también hacer estas y estas curas que es una herramienta que yo adoro que es para construir paletas pero también para testar paletas voy a ir, ahora voy no, a ver si me lo dejo ah, tengo que ir aquí no, no me lo dejo a ver más no te lo voy a ver así no no sé por qué me sale esto ah, si, por qué me lo dejo entonces es una cara skin generator pero eso es súper útil para luego almacenar todas sus paletas pero lo que tiene de maravilloso es como puedes testar las paletas y por ejemplo, así que no lo dejo por eso ¿cómo lo vamos a hacer esto? bueno pues voy a enseñar para testificar a ver, simplemente os voy a enseñar que este, tiene esta herramienta para colorblindes entonces tiene estas varias problemas sí, pero casi siempre me voy directo a atromatopsia porque si es que sería, es decir la gente que no puede ver los colores porque lo que pasa es que si una paleta funciona con esto entonces quiero decir que va a funcionar para todos ¿sabes? y por ejemplo yo ya lo sé que esta paleta es súper fuerte, son colores matices muy fuertes, por mucho contraste porque es una paleta de colores casi complementarios que lo que me gusta a mí, pero veo que como luminosidad son demasiado parecidos tienen casi la misma cantidad, entonces tengo que variar la paleta para poder estar seguro de que va a funcionar y también esto este herramienta que yo quiero si voy al normal voy al normal esto me da todas las varias no sé como se dice en español chei será sombra sombra no sé qué es sombra es cuando a un color le añades negro y tint es cuando le añades blanco que no es igual a la luminosidad pero si nos puede ayudar en crear paletas pero también otra cosa, entonces ya con un color tenemos que crear paleta basada en añadir o quitar negro y blanco y a ver si ahora bueno este color también podemos si no sé como va a hacerlo porque no llego, porque está más abajo pero también tiene una herramienta que te permite de jugar con la luminosidad entonces con este herramienta color también si lo que es mundo show porque no hay por qué tener mundo show con estos días puedes cambiar la luminosidad simplemente desde curse que es así que es super vale y la otra herramienta que os quiero enseñar que es estupenda es top tal top tal y este también no es difícil de enseñaros pero lo que pasa es que toptal.com es la página y pones aquí tu dirección del URL de la página que quieres controlar y aquí puedes aplicar los pintos entonces es super chulo porque por ejemplo yo tengo otra que os quiero enseñar pero que es sentido porque no os puede y puedes controlar como la igual funciona por ejemplo tengo página que tiene un rojo muy fuerte con un azul muy fuerte y porque sector esto es un contraste que se ve muy bien no porque tiene la misma cantidad de luz entonces he tenido que variar la luminosidad para que el contraste funcionara también en ausencia de color y otro esta herramienta que es super dupe es se llama contraste contrast ratio porque también tenemos que tener en cuenta la contraste la contraste es super importante en la abstractecipidad porque demasiado contraste por un blanco y negro no va bien para gente por ejemplo con dyslexia no es solamente gente que tiene problemas a ver los colores y también con otros tipos de menos varía entonces por ejemplo y te da esta herramienta te da el fondo y el color que vinitas sobre el fondo y te dice si pasa los estándares bueno por ejemplo si aquí le pongo si aquí le pongo si aquí le pongo pongo y aquí le pongo el colador de pongo el blanco no pasa porque hay bastante no hay bastante en un blanco entonces pasate y esto es es super importante controlar porque a lo mejor a vosotros parece que va bien pero en realidad no y también hay que controlar controlar en tamaño entonces bueno esto es el yo creo que la enseñanza y el concepto más importante de llevarse es que de verdad el color es una opinión en ese sentido que es muy difícil de ver cómo la gente va a reaccionar como el público los usuarios van a reaccionar primero a un color y también cómo van a verlo y depende de una cantidad de factores y bueno entonces eso simplemente es es un digamos algo muy muy amplio hay muchísimos más lejos hablando de la accesibilidad de utilizar los colores en el campo de la accesibilidad hay muchísimos más lejos pero estos son las cosas fundamentales simplemente observando estas sus consejos ya podemos llegar a algo que estamos bastante seguros de que sea y por lo de la universidad que simplemente utilizen la universidad basta mirar a, por ejemplo, Facebook si mirando Facebook podéis ver que la UI se está basada todo en niveles de de un color de un color fundamental y a veces el massif puede cambiar un poquito de unos grados pero más o menos nos quedamos entonces creo que podemos tengo ahora un proyecto que se llama Design for Geeks que es ya en un grupo de Facebook de momento es solo en inglés pero si manejaréis en inglés es diseño para gente que no es diseñador para todos los que tienen que trabajar en el diseño y tienen que diseñar páginas en su vida que no tienen formación de diseño y desarrolladores, marqueteros y el grupo ya está yendo muy fuerte y hago formación todas las semanas y webinars y cursos y va creciendo mucho así que si vosotros creéis apuntar sois los bienvenidos y estos son mis varios contactos aunque Twitter me acaba de bloquearme el contacto la tengo desde 2006 y a Twitter como 300 veces muy poco pero bueno es la cosa si no se no se que para yo no lo entra esta semana con la limita no es para avisar que no limpie pero bueno no tengo tiempo de controlar porque no voy a hacer que nunca lo utilizo es mi casita es mi casita vale, muchas gracias