 I've studied finance for eight years so when I accepted to be a speaker for the work camp, the decision for the topic wasn't too hard for me. It was going to be about colors. Colors play a very important role in the design and our everyday life. We select our outfits based on their colors, paint our houses with our favorite colors, purchase a product, a new phone or a new car because of their color or maybe not the pink one but that's okay. However colors still offer more. They make us communicate without using words. They evoke emotions and moods. Attract attention and draw conversation when we use it in a right way. That's why using the right color combination in the designing process is one of the most important steps in creating a successful website. But how colors impact our visitors or our customers? The first thing that visitors notice about our website is the design and the color combination. No matter how good the content or product is, even the usability of our site, due to the wrong color combination, its impression could make visitors leave the site and that would be the last thing we would like as a business owners or bloggers or a designer. So studies suggest that people make subconscious judgment about the product within 90 seconds of initial viewing. 62 to 90% of this assessment is based on color alone. 85% of shoppers place color as a primary reason why they buy a particular product. 46.1% of people say websites design is the number one criterion for discerning the credibility of the company. Color increased brand recognition by 80% brand recognition directly links to consumer confidence. And I saw this and I just feel like I had to put it in there. A Midwestern insurance company used color to highlight key information on their invoices. As a result, they began receiving customer payments an average of 14 days earlier. So as this example shows that we can definitely benefit what colors can offer to our businesses in so many different ways. But before we start, how can we choose the right colors for our projects? There are some questions we can ask to ourselves or our clients to understand better what the brand or what the website is going to be. Do they have a logo, an established logo that we can use the color from? What feelings and emotions we associated our brands or our clients' brands? What are the current color trends? Do we know our visitors' reasons, emotions and the moods to visit our sites? And what kind of images do we want to use in our sites? So after we ask these questions all it takes is a little research and write tools. Let's look into some of the very helpful ways to choose the color palette for our websites. So before we start, these are some very important options we can use using our brand colors. We can look into color psychology, color theory, using images to create a color palette. How colors communicate to our brains? Every color has different feelings or emotions attached to it. So we can use them to get people feel or think a certain way. Big companies don't pick their dominant or brand colors by accident. It is strategically chosen to be used as part of their branding and marketing goals. Using the brand colors is basically means the logo of your brand. Color psychology can help us find the color the best represents what our site stands for. Color theory can help us understand which colors look good together and which ones don't. Using images to create color palette can help us find ideas for the color combinations from the interesting images, from advertising and branding to famous work of art. So I just took a screenshot of the Jetpack homepage and I wanted to show you how they use the brand color and the secondary color and their neutral color. They use their brand color to highlight an information for their navigation and then they use their secondary color to highlight secondary information. Choosing color palette that matches our brand is a really good idea. It makes a stronger connection with the brand and helps our users easily remember our sites. Let's look at the color psychology. So color psychology can help us find the color that best represents what our site stands for. Blue represents trust, security, stability, peace and calmness and it's been used in businesses and banks to create sense of security, trust in the brand and it is actually the number one color like by both men and women. Green represents wealth, health, tranquility and nature. It's the easiest color for the eye to process so it has a relaxation effect. Green is the second preferred color by both men and women. Red represents passion, energy, urgency, excitement, vibrancy and danger. It is used to create urgency for people to buy, effective in triggering strong emotional reactions and restaurants use it to stimulate appetite. We also see that as fast food uses the most. I'm not going to read all of this but I'm going to give you just the highlights on what other colors can represent. Yellow is youthfulness, optimism and cheerfulness. Orange represents friendliness, enthusiasm and creativity. Pink represents feminine, sweetness, innocence, fertility and romance and as you see there are certain brands in there that they use these colors really shows how colors impact the brand. Purple represents royalty, wealth, success and wisdom. Gray represents neutral, simplicity, calm, futuristic and logic and black represents power, luxury, sophistication and elegance. As we have a general idea about what color captures the character of our websites now we can look into color reel to see how we can create a great color palette. So let's start with the basics. We have three primary colors yellow, red and blue and then three secondary colors are orange, purple and green. Secondary colors are created by combining two primary colors yellow and red make orange, yellow and blue make green and blue and red make purple. If we mix these colors together we get even more in between shades and altogether they create the color reel. Color harmony can be used for balancing your palette these are the in-between colors of our color reel. If you already have an idea of what your dominant color is for your website it's time to think about the secondary color to round out your color palette and your color harmony can help us find a good match. There are analogous colors is for colors for side by side on the color reel. Monochromatic colors are using one single color and explore different variations of light and saturation. Complementary colors appear opposite each other on the color reel creating a high contrast vibrant attention grabbing scheme when you use together. Tried color schemes use colors that space even me apart on a color reel like points of triangle. Hue is there are all right so we're gonna talk about the shades tones and tints and basically what what they are is we have a color is hue is basically another word for a color tint. Tints are created when you add white to any color on the color reel to lighten desaturated and dial down the colors intensity. Tones are the gray area between tints and shades. Tones are created by adding both black and white to the original color to either darken or lighten it so decrease the saturation of the original color. Shades are created to adding black to the color resulting in a richer darker and more intense color. Using tints, tones and shades can even out the color values resulting in a visual pleasing color combination. Using images to create color palette can help us find ideas of the color combination in all kinds of interesting images from advertising to branding to famous work of art. We can find color inspiration in any images we would like to use in our project and there are great tools to create color palette for us. If we already have an idea of what our dominant color is going to be now it's time to create a layout using those colors. They will make up most of the structure of our design. We'll be using them as our titles, text, body text, background and foreground elements. Sidebars, form fields and list goes on. We have the color that we use mostly 60% of our home page. The secondary colors should be around 30% and then we have a neutral color that we can use to highlight or downline some colors. But what are the things that we can do to create a better looking website? First of all we use simple complementary color palette. Fever colors help visitors focus on what the intent of the website is. Make sure your content is readable because that is also accessibility issue or we don't know what kind of screen people has. So we might want to test our colors in different screens. Keep your colors consistent. That way it won't be it won't be so confusing people to where to look or what you want to highlight on your website. Consider using shades and tints to balance your design to make it really stands out. Make important elements such as call to action buttons or login points, focal points using isolation effects and what we shouldn't do. We shouldn't use too many colors as it will make us confuse where to look, where to find the right information. We shouldn't use overly saturated colors, overly saturated colors on the background and as text. We shouldn't use low contrast between text and image. It is very hard to read and you won't be able to tell what is going on on your image or on your text. And don't use black text on a dark background. So I have some color creation tools that I want to share with you today. First we have the adobe color CC. It's been around for a while and it's one of the best color tools out there for picking your color palette. I'm going to go and show you the examples of them in a bit but I just wanted to go through it first. So we have colors. Colors are for a wide variety of tool adjusting the palette just the way we want it. The color palette generated by Canva is perfect if you're looking to create a color palette based around a particular image. So you upload an image and then it will give you what colors in there you can use. There's designseeds.com. It's very beautiful and great idea about how an image can create beautiful color palettes and you can choose by colors if you don't have an idea of what your brand will be or what your website's color will be. It can give you great great ideas. I just actually found this website when I was searching for the presentation and I thought it was it can be very very helpful. It's brand color so like you'll be able to search any brands and they'll show you all the colors that brands associate with. I searched for WordPress and WordPress uses these colors and they are pretty accurate. They did a great job and color code is another great tool. It's featuring background that changes color with your cursor movement. So it's very easy to use and then you can also show look at the color harmony that matches with your colors. So and the more we play with color and practice design the better we'll get. So I would like to show you some of the give you some examples of the color creation tools. So Adobe Color CC if you already have the color you can put it in here and then that will lock your colors and then you have the cursor to move to find the colors that you like and then if you choose let's say we choose this green right here and then we're gonna see we can change the color harmony on as we talked about analogous it's the side-by-side colors monochromatic colors they are the shades of one color complementary colors is the opposite sides and list goes on you can look at the shades you can look at the compound and then if you don't like it you can change it by just finding your right combination. Coolers are they are pretty awesome so it will change you go generate and it will give you random random color combination that maybe you wouldn't think using it but as you're seeing here you love it and you would like to use it these are nice. Color palette generator from Canva so we upload an image and then it will show us the colors that that image uses so if you really have a favorite image it's perfect you can find any colors you want and then you decide which one you would like to use. This is the design scenes I was talking about that I really like so we choose a color and then it will give us the color palette showing the images that color has and you can also go explore by the collection there's seasons, natures, wonder, studio hues and edible hues which is colors. This is the brand color that I was talking about and when you search here is what it shows any color any brand you would like to use and do the apple but it is a great inspiration for if you have a brand that is matching with your brand and you would like to see what color they use you might want to use this as well and the color code so the color code you move your cursor and it finds the different color palettes for you and if you decide one you can go and choose again the color harmony you can use it for dark gray light gray and then all bunch of different options there that you can you can find and the last thing I found this great article that shows how you know website color schemes and I really recommend you guys take a look at it it shows the different color palettes that websites use and it gives you great idea there is no limit of using colors on our websites even it's very saturated and bright to beautiful blues and yellows and very muted tones yeah so I can give you guys the address of the any of these websites if you need to and that is all actually thank you so much I really appreciate it sorry I was really excited today but so if you guys have any questions yeah yeah I mean of course it is not really a certain certain um have to say it like certain way like whatever you kind of like that will be what you want to use also but usually we have our main colors we have our secondary colors and we have our neutral colors neutral colors are using for like certain elements that separate um our main colors from the website right so we use it as a maybe background for our form elements we use it as a um background elements so like if you want to use any color and balance it I think you'll just get a great result it doesn't have to be three colors or two colors it's all about you balancing it out if that explains yeah like the more you play with it like there is no um written example for it you know you have to really visualize it and then you have to play with it what does look good after you choose your colors that will match together and then using them in your website will be your preferences um so I guess like that's why the color psychology could get into like we can find what they represent and then color psychology can help us which color is actually uh best uh represents them and then after we find out if we really they don't have any idea after we find out which color and then we can go look at the color harmony find the shades and values that it doesn't have to be blue like pure blue it has to it can be the shades of blue and then as a designer or as a developer then you can say okay I found these examples that the tools creation tools gives us we can just visualize how the colors match together and these will help us so we can create a color palette and show our clients and if they like it you know they'll use it they can create their logo with it they can use it on their websites and everything so yeah I'm gonna read I think it's hit the nail on the head where you he said you have a color palette the client likes okay and it looks bad oh it looks bad but the client likes it okay your gut feel tells you it's gonna perform so I think we have some sort of I don't know I feel like they want they won't like that idea but if you suggest all right so they have the colors that they like and now maybe as a designer you have the ability to make those colors play with their values and use them on your design that will actually look good I mean yeah I understand they might have a really bad color palette that you wouldn't know what to do with it but again don't use the color just use the shades of color at the saturation or you know intensity and then you'll find a perfect color combination that actually looks good on your eye and then I'm sure they'll be happy with it you can use both of the color palette because it's so easy now that you can use color combinations that will you can present them so you can do two of them and compare make them you know compare it and if they still like that then it's not really on your call anymore I'm sorry sure I mean there are so many great articles on the web that we can find and I can give you the the research that I did for this presentation but yeah it's it's all it's all like there are great books there are great articles and videos that we can look into and it's also our a little bit of what we like also you know I mean so like if you like a color I'm sure you'll make a great combination great palette with that color and you can present it either use it on your side and there is no um there is no really um I don't have to say that I'm sorry yeah so yeah yeah there are mm-hmm yeah yeah yeah yeah but also like mcdonald's doesn't want to make you come it wants you to make like all right I'm hungry I need to eat it's you know like they really when you look at the solar color psychology and branding it is just perfect match for everything that color psychology shows so yeah that's great all right ah yeah so like one second so monochromatic is guaranteed to match it's the shades of the colors so like I prefer this on uh just creating the um let's say I have the my I have my main color blue right so I get the shades to use maybe when you click on a um button it will show that it's been clicked so I'll use that maybe lighter color to show that you know I mean or the darker to just to point out that it's been clicked like things like that but um yeah it's I think my favorite is the monochromatic one yeah I think we're all done if you guys have any more questions think oh you do yes right here mm-hmm I just wanted to show the um different um websites that's why I use the um this one right here but yeah you can use the um import image button on this also all right thank you so much