 Hello, everyone. Before I get started, I just want to say a couple of things. First of all, I want to thank my sponsors, Yoast and Master WP. Thanks to them. I am here. So thank you so much. And the second thing is I want to thank the WorkCamp Asia Organization because you've been amazing. It's taken three years. In 2020, we were all gutted because it couldn't happen. And you've made it happen again. In 2023, and it's one of the best WorkCamps ever. So big hand to the whole organization. Thank you so much. Color is an opinion. What does color do in nature? Color in nature can indicate a function. When we look at a selection of berries, we can tell them apart by size, by shape, by texture, and by color. This is very useful when we're out in the field foraging or even at the supermarket when we're in a hurry. In nature, also, color can draw attention and provide awarding. For instance, it can scream out, keep off. Extremely dangerous. I may look cute, but I will kill you. And that's the case with the electric blue of this poison dart frog in the image that we see here. But in the case of the gorgeous peacock in this image, his electric blue neck says exactly the opposite. It's screaming out, make love to me. In nature, color can also provide safety. This happens when you're a bright green lizard and you're camouflaged almost perfectly against a background of leaves of the same color. It's more difficult for a predator to spot you. On the other hand, if you are a predator, it can be quite handy to blend in with your background so entirely. Because, as is the case with a lion here in this image, you can more easily hunt and prey without being immediately detected. In the built world, color, too, can be very helpful to indicate a function. When you have a red pill in one hand and a blue pill in the other hand, the two colors signal to you a very different outcome, depending on which one you decide to swallow. In the built world, we also use color for navigation. A famous example is the map of the underground in London, which almost everywhere else in the world I think is called the Subway, but that's how we call it in London. And it's a superbly simplified diagram where each train line is represented by a different color. And for instance, everybody knows that the central line is red and it bisects the map in the middle. In the built world, another use for color is for attention and for invitation. Just like in nature, really. In the case of traffic lights, the global convention is that red means danger and you must stop. Yellow is the color to get you to pay attention and be careful. And green is the carefree signal that invites you to proceed. You can do so safely. And it's one of the very few global conventions as far as color is concerned. In short, color helps us to navigate the world and the web. However, color in real life is different from color on the web. This may sound like a platitude, but let me explain why. So in the real world, according to the dictionary, color is the appearance that something has as a result of the way it reflects light. It's actually a bit more complicated than this, but let's take this as the very simplified way of describing it. On the web, color is made by light, it lives in it, and it is light itself. Both on the web and in the real world, color lives in light. This may seem obvious to us now as web professionals, most of us, that's what we do, that's why we're here, and we work with monitors all day long. However, here's the portrait of a British scientist called Isaac Newton, who was the first in the 1660s to actually connect color with light. In the late 17th century, he was carrying out optical experiments in a dark room. In one of these experiments, Newton had a narrow ray of light coming in from a hole in a window and going through a glass prism sitting on a stand in the middle of the room, and this ray of light came out the other side, opening up in a fan of colors, the color of the rainbow. The cat in this image, by the way, there's a cat in the bottom right of the image, it's not the only way that predicts the internet here. We'll see what I mean in a short while. A simplified diagram of this unexpected discovery, it shows a black background on the left of which, there's a white triangle with glowing edges and a white line coming in from the left goes through the prism and opens up in the fan of rainbow colors that we saw earlier. Now, there's a few things that happen here that were completely revolutionary at the time. So what happens is that color lives is a quality within light rather than in things. Also, color is now a continuous gradient with no clear separation. This means that there could probably be many more colors than previously thought possible. Another thing is that there's no white or black anymore. White is simply the presence of light and black is the absence of it. These were discoveries that from a metaphysical point of view were really transcendental at the time. Now recapping the main consequences of Newton's discovery which was, as often happens in science, quite random. He wasn't planning to discover this. He was conducting a different type of study. So first of all, light can be opened up and fragmented into colors. Then colors exist in light and not just on things. Color is a continuous gradient. Many more colors exist than previously thought. The color spectrum does not include black or white. White is the full presence of light and black is the full absence of light. In Newton's view, the main takeaway is that color does not exist without light. About a century later, a German artist I think would be the right way to define him, Johann Goethe, came up, actually he devoted the last years of his life to studying color. He wrote two books on color. I'm not gonna tell you about the whole books, I'm just gonna tell you about a few fundamental things that he thought. In his view, Newton's approach to color was way too abstract and it didn't take into consideration real life. He was much more about how we experience color and how the various phenomenons in life and the way we perceive color influence the way we see it. So in his view, color needs matter to be seen and colors change with shade, but they're still color, they're not the absence of it, whereas according to Newton, where there's no light, simply color ceases to exist. So recapping again, Newton is color as the essence of light and for Goethe, color is as it is perceived in everyday life. And Goethe was a romantic, so he was, you could say that he was anti-scientific in a way. However, a lot of the experiments that he conducted were empirical, I mean, therefore, I mean, I'm not a scientist, but that's how you do things, isn't it? You try them out, that Newton found out what he found out by accident mostly. So fast forward from Newton's experiment to color on screens and on the internet. I think most of you are familiar with this diagram, so we have three cones of light, one is red, one is blue, so that's red, that's blue, and the other one is green. And when they overlap, they form white. This is the way that we see color on the web and in monitors in general. So RGB is called additive color. I don't know if you know why it's called additive color, but it's because white is the full light presence, it's the sum of all colors, and black is the absence of light, it's the absence of color entirely. And these are, this is all transparent. We're talking about beams of light, so pure light. But if we go to the real world, it works differently, doesn't it? This here is a representation of the red, yellow, and blue model, which is what artists use, and it's called subtractive color. Why? Because first of all, this is not transparent, it's light that's reflected, that's how we see color. So white simply means there's no pigmentation, there is no color, whereas black is the sum of all colors, and it's reflective and not transparent, you can't see through it. So again, like I said, it's a little bit more complicated than that color, objects get that color through a combination of reflection, absorption, scattering of light, it's always more complicated, it also depends on the support, it depends on lots of things, but essentially this is how it works. So Newton's color model is color on the web, that's the interesting thing, color as conceived by Newton does exist, and it has an application, it's color on the web. In Goose's times, he was right to say that there was no practical application apart from light going through a prism for fun, that was it, a glass prism, but now we have a practical application of Newton's color model. Now, let's make another really, really huge jump, and let's jump to a few centuries upwards. This is the 12 color wheel, which is at the basis of modern color theory. Now, you'll find this in every time you do a search on the net for color theory or whatever, you get this wheel or a form of it. The thing about color theory is that mostly it's western-based, usually it's like white males from the west that come up with the color theory. So this is what I'm gonna teach you today. I'm gonna teach you how to use the color wheel, color theory, and symbolism to pick the perfect colors for a project that you may have. Let's start with an example. So the first example, let's say that a client comes to you saying, I have a luxury brand, luxury, yeah, and I need a logo, but above all, I need a color palette. Which color do you think represents luxury? What do you think? So usually if you were to go on the web and do a quick search, give me a color that represents the luxury. Black, sorry? Purple, did I hear purple? Yeah, gold, yeah, gold is difficult on the web though, isn't it? It always comes out like it's either sun yellow or it's a bit brownish, not very good. So usually what you'll find is that the perfect color for luxury according to the first page of Google for color symbolism is purple. Everyone agrees with it? Purple, can you stand by that? Okay, so in fact, if you go further and look at it, you'll read that the concepts associated with color purple with royalty, nobility, luxury, power, ambition, wealth, extravagance, magic. It's also the color of magic, isn't it? Yeah, so anybody in the room brought up Catholic? Any Catholic in the room, yeah? Does this remind you of anything else, the color purple? Like this, for instance, yeah? So to me, as a lapsed Catholic, this is, you know, in this image, there's a priest wearing a purple robe and blessing a coffin that's in the back of a hearse and that's, to me, that's what purple is. It's the perfect color for a funeral. It's the color of death. So, okay, perhaps, you know, first experiment failed, not as great as we thought. Let's try another one. This is safer, I feel, like a wedding. Weddings, usually, for colors, are easy, aren't they? I mean, the color for a wedding, I don't know if you agree, but usually, if you look into it, color symbolism, white is gonna be the right color for a wedding. Why? Because you go and look at it and all the, you know, again, first page of Google will tell you that symbolizes purity, simplicity, cleanliness, truth, honesty, all words, so, you know, concepts associated with marriage, for some reason, light, you know, and all the rest of it. So can you think of anything else that could be associated with white? I don't know if there's anyone from China in the room. Hospital, for instance, yes, absolutely, exactly. So, according to Chinese color symbolism, white is the color of, the right color for a funeral. It's the color of mourning. So, when I said this, I was really only joking. There is no way I can teach you anything about color symbolism. The real point is that color symbolism has huge limits. It's very culturally biased. Usually, it's Western-centric. Preparing for this talk, I did extensive searches, trying to find out what color means in other parts of the world, for instance, Asia, because here we are. And it's very difficult to find anything, so usually, the perspective is extremely biased and I wouldn't trust it, because what purple means for you, it means something else for me, and I can guarantee that every single color means one thing and the opposite of it at the same time. So, let's get back to the wheel and learn something useful this time. Let's talk very quickly about complementary colors. This is something that Goethe came up with, by the way, so he observed that colors on the wheel, I mean, the first one to create a wheel was Newton, and then after him there have been dozens, so many color theorists that have used the wheel in various ways. Now, Goethe noticed that the colors that sit opposite one another have certain properties. They're called complementary colors. So in this image, we have a color wheel with the 12 colors, and then I'm showing you just three couples for, as an example, a deep red and a deep green sitting opposite one another and a magenta, let's say, with a paler green and blue and orange. So, complementary colors attract one another, but they also repel the kind of the opposite of one another if you want. Again, the first page of Google, if you're looking for color theory and color symbolism and so on, will say that complementary colors, color schemes are bold, so if you use them, your design will get noticed, it's dynamic, it's powerful, you're so cool if you use complementary colors and so on. What they may not tell you, though, is that there are cases where you really should not use complementary colors. This is one example, so you will have this deep, again, what would you call it? So this is another interesting experiment, how we call colors. What would you call this color? Pink, magenta, burgundy, see? Okay, who is right? Who decides who is right about the name of this color? So if I now drop a bright green piece of copy on it, we're all blinded by it. So what happens here is a couple of things. First of all, never use text, complementary color text on top of one another, it's not gonna work. Another thing that happens here, as you can see, so the words in green please don't, because I'm asking you to please not do it. They vibrate terribly, at least to me, because I have a particular eye condition that makes them vibrate very much. So another good thing is that with color on the web, you should never use colors that are too saturated because they will cause visual fatigue. They create a vibration that makes it hard, that makes the eye work too hard. This is another example. Definitely not, turquoise and orange, please don't do it. And then the one that you absolutely must not do is green or red or red or green. Do not do this. Why specifically because red and green are a very dangerous combination in general, in the sense that the most widely spread color blindness issues refers specifically to green and red. There are people that would not be able to read this because they can't really tell green and red apart. Now something else happens. Please, can you, I'm gonna move out of the way, can you look at this, stare at it, one second, two seconds, three seconds, and then look somewhere else. Look somewhere that's white. Look to the ceiling, for instance. What do you see? Do you, yeah? Say it. You see it again. You see the phantom. But how does the phantom image of this look like? Exactly, it's flipped, it's reversed. So what you are seeing is the posthumous color. I'll explain what that is. So back to Goethe, this is part of the experiments that he was making, the observations on color that he was making. The illustration on this page is taken from a fantastic, fantastic book on color called Cromorama by Riccardo Falcinelli, who's an Italian scholar and he talks about design. He is fantastic. This is now translated in many languages, thankfully, it's a wonderful book. So in this image, there's a lady dressed in 18th century clothes and she has a very white complexion, very black hair and a very bright red dress. Goethe was staring at her fascinated by the color contrast because this is a very high contrast image and she was standing next to a white wall. So when Goethe looked somewhere else on the wall, he realized that he was seeing exactly what we saw earlier with the red rectangle and the green text on top, the phantom image. This phenomenon is called posthumous color. So something weird happening here, yeah. So in this other illustration, we see the color wheel with the complementary colors and their posthumous color. Basically, the posthumous color, so the phantom color that's caused from staring at color and then looking somewhere else is a very pale version of its complementary. So in the case of red, you'll see a pale green and the case of green, a pale red, in the case of blue, a pale orange and so on. So the revolutionary idea that Goethe put forward is that our mind can produce colors. We can interpret reality to see colors that are not actually there or that are different from what we think we see. Now, I'm gonna get the popcorn out while I ask you what color is this dress? What color is it? Blue and brown. Beige and white. Beige and white, what else? White and gold, okay. So we've got three interpretations here. And actually, you know what? It's blue and green and black. No one's said blue and black yet, but it is blue and black, yeah? So who's right? Are we gonna have a row? Are we gonna, you know, are we gonna put it to votes? Who's gonna win? You know, is this a case? Is it the fallacy of democracy? I would say so. This dress is whatever color everyone sees it as being. The thing is that I am right because it's a black and blue dress. In reality, in real life, it actually is a black and blue dress. I am not right, I do not care. I love that I find it endlessly fascinating that some people see it as white and gold. It's beyond me, but there you go. What about this trainer? Teal and gray. So we've got teal and gray there then. Mint and beige is a new one, I love it. Good. What else? Nobody sees the pink? Yeah, I mean, again, according to the owner of the trainer, it's pink and white in real life, but I bet that if the trainer was here, there would be people who say, oh, that's not a pink trainer. That is a beige trainer. I'm sure of it. However, I also do a lot of photography and so on and I could tell immediately that this is, from the height of my wisdom, because I'm telling you what this truly is. I think it's a pink trainer with white details and white laces, but because of the light, it's got a greenish tinge. That's what I think. And I think I know better because I know photography and so on. So I was challenged to go and open the image in Photoshop and check it. It's gray. It is gray. So if there's few things that are facts, but this one is a fact because what is gray? Gray is basically, so this image is the pink trainer with the Photoshop color picker on it with all the color models. And gray, what is gray? It's just a little bit of every color and this is fundamentally what comes out here. So it definitely is gray. Here you go. Was I wrong? Was I right? Who's wrong? Who's right? I don't know. Now, another thing here. In this image, we've got an orange square flanked by a bright yellow strip, dark blue strip and lighter blue strip. It's difficult sometimes in English. In Italian, we've got like 10 words to describe blue and in English, we don't. However, on top of the first of the orange rectangle on the left, there's a brown square and on top of the lighter blue rectangle all the way to the right, there is another brown square. Now, which brown square is lighter than the other brown square? It is a trick question indeed. How many people think it's the same, but don't see it? Do you see it as being the same? You exactly. It is the same because by now you know I'm tricking you so obviously you think it's the same. However, to me, it looks darker when it sits on the orange and it looks lighter when it sits on the blue. So fundamentally, the point is that we do not know. So this image is famous as sort of the emblem of the theory of color relativity, which was elaborated by Joseph Albers, who was an artist and a scholar who worked on color extensively and all the experiments that he conducted were aimed at proving that color looks completely different according to a number of variables that are not predictable. Now, in the digital world, of course, all those variables that we've seen in the real world are amplified to the max because we're all using different screens, we're all using different devices and it's virtually impossible to know what's gonna come out. I was having a conversation yesterday with someone who was telling me that they had a client who was, the client was a bank and the bank had a website that was all built using the brand palette. Someone from the bank, from the client said, can you please change the color of the website to match my shoe? Which is of course hilarious and I told her you should get paid by the hour and say, of course I will do it and then just rake it in, kaching, kaching, kaching because obviously it's not gonna happen, is it? Because as we've just demonstrated what color is the shoe anyway, is it gray, is it pink, is it green? We don't know. So I think this demonstrates that color is largely an opinion and you shouldn't really let anybody tell you otherwise because as we were saying, the way we see colors is based on an unpredictable set of variables. Therefore there is no absolute color truth, your color interpretation is as valid as mine and vice versa. So the other interesting thing is that Goethe's idea also get a final vindication because Goethe's color ideas definitely apply to color in real life but fundamentally also Newton was right. Not that I think they particularly care that we give, we say that right but however it's very interesting how Newton did predict how color would work in monitors and on the internet but also Goethe was for sure right. So the most important lesson that we can draw from this is that color can't be chosen on the basis of personal preference or even psychology or symbolism as you really can't choose color based on the shoe you're wearing. I mean, I'm sure you're all aware of this but should a client ask for it, it's actually relatively easy. You could say yes, absolutely, you can say yes because fundamentally it doesn't matter. Whatever color you choose, for instance, now blue seems to be the color of technology, fine but green is also the color of technology, purple is also the color of technology. You can basically use any color you like. The important thing is that you, for instance, don't just rely on color to convey important information. In this image, we have the gates and terminals of an airport that differentiated by color but also by numbers and letters because that could be someone to whom gray and red look exactly the same, therefore they wouldn't be able to get to their flighting time and that would be a disaster because the reality is that 8% of men and 0.5% of women suffer from a color vision deficiency but a lot of people don't even know they're suffering from it. We found out that my brother is color blind, we didn't know because he was insisting on wearing a terrible red tie that was clashing with his suit as he was getting ready to go to a wedding, he was insisting and saying, no, no, this brown tie looks great with this brown suit. And we're like, no, mate, there's something wrong here. So you may not even know. And also the other important thing is that around 2.2 billion people globally have a vision impairment. I'm always trying to describe the slides when there's an image because I would be really happy if someone just listening to my talk were able to understand it even if they can't see it. So you have to bear in mind that vision impairments are often very, very deeply affected by color contrast more than anything else. Let's go back to the wheel now to learn something else that is useful. Now this color wheel has numbers in degrees written on it starting from zero degrees starting at the top on sitting on the red. And it goes all the way around clockwise up to 360. Now this is hue. Hue is another name for color, but it simply refers to the position on the color wheel without taking into consideration how rich, how intense, or how bright the color is, how much light it has on it. So never rely on hue when you build a color palette because color blindness relates to hue. It's just the color that people can't see. It's not the brightness or the saturation. So what happens when a client comes with an already formed color palette that they paid a lot of money for because they went to a fancy branding agency? This is a real life example now on the screen. There's a color palette that starts as pink, red, yellow, blue, green, lilac, violet, whatever. This is the color palette that my client came to me with. They're called Music Patron. They're a really cool music startup. You can look them up, musicpatron.com, super cool. I really love this palette because it's joyful. It's exciting. It's young. It's got lots going on for it. But at the same time, I looked at it and thought, I can see from experience that these colors, there's probably two color combination that we work with text, one probably yellow and black and the other perhaps red and white, but I'm not sure. So I went to check whether, and especially the blue, I was sure wouldn't work with the white. So I went to check blue background with white text on top, which is what they were asking me to do. And it's not completely not accessible. And we're looking at the contrastchecker.com, which is the simplest, quickest way of checking color contrast. And although it could be safe when really big sizes, this is not good enough for me. What to do? They've spent a lot of money for this palette. So one neat trick to have the same color, because let's not forget, hue is the color. So back to the color palette. I'm using coolers.co, C-W-O coolers, which is a lovely tool that I really like. And I open the color using the HSB model. The HSB stands for hue, saturation, and brightness. The hue of this blue is 222, which I like as a number. Saturation 49, which is good. So all these colors are not very highly saturated, which is a very good thing, as we said, so they don't vibrate too much on the screen. And the brightness is 73. So I leave hue and saturation completely alone. And what I do is I change the brightness down to 39. This gives me a much darker blue, which, in the contrast, Chakaragan passes the test entirely. I can now use this blue, and I can go to the client and argue that this is the same brand color, because the hue is the same. I'm not saying they're always four for it, but you can definitely safely say that this is the same color. So this is an example of the same hue with different brightness values. There's six boxes of blue in different brightness, and below, zero saturation, so you have the same six boxes, but in gray scale. So the first one is brightness 100, same hue and same saturation, 222 and 49. This, the second one is brightness 73, was the original color that we saw. And then down to 60, 40, 20, and zero. Zero brightness is black, same with any hue, OK? So this is the way that you can use brand colors for your clients in a way that's safe and accessible. So let your clients know that color is an opinion, but you can make it accessible. Thank you.