How To Web Design & Dev Creating a Web Color Scheme Share Pin Email Print Web Design & Dev Basics HTML CSS by Jennifer Kyrnin Updated March 18, 2017 01 of 10 Understanding Color and Web Color Schemes Base Color - mustardy yellow. Image by J Kyrnin There are four basic color schemes that you can use for a Web site. Each page of this article shows a picture of the color scheme, and how you can generate a similar scheme in Photoshop. monochromaticUsing colors of the same hue. They may have different tints or shades depending upon how much white or black is added. analogousThis uses colors that are close to one another on the color wheel. complementaryThis is often seen as "opposite" because the two colors in a complementary color scheme are opposite one another on the color wheel. triadicThese colors are evenly spaced on the color wheel. All the color schemes will use this yellow as the base color. 02 of 10 Monochromatic Web Color Scheme Monochromatic Web Color Scheme. Image by J Kyrnin This color scheme uses the mustardy yellow of my base color and adds some white and black to tint and shade the scheme accordingly.upper left - the base color #ffe500 upper right - added a fill of 50% white to get #fff280 lower left - added a fill of 75% white to get #fff8bf lower right - added a fill of 50% black to get #7f7200 Monochromatic color schemes are often the easiest on the eyes of all the color schemes. The gentle changes in tint and shade make the colors flow into one another better. Use this color scheme to make your site appear more fluid and collected. 03 of 10 More Monochromatic Web Color Scheme Monochromatic Web Color Scheme. Image by J Kyrnin Added a square of 20% black to get more colors in the scheme. Adding black or white to your colors can create a new color to your palette without messing the tone of the page. 04 of 10 Analogous Web Color Scheme Analogous Web Color Scheme. Image by J Kyrnin This color scheme takes the yellow base color and adds and subtracts 30 degrees to the hue in the Photoshop color palette.upper left - the base color #ffe500 upper right - +30 degrees to get #99ff00 lower left - -30 degrees to get #ff6600 lower right - 100% white #ffffff Analogous colors can work very well together, but sometimes they can badly clash. Be sure to test these schemes with more people than yourself, your family and friends. When they work, they create a site that is more colorful than the monochromatic scheme, but nearly as fluid. 05 of 10 More Analogous Web Color Scheme Analogous Web Color Scheme. Image by J Kyrnin Added a square of 20% black to get more colors in the scheme. 06 of 10 Complementary Web Color Scheme Complementary Web Color Scheme. Image by J Kyrnin Complementary color schemes, unlike other color schemes typically only have two colors. The base color and it's opposite on the color wheel. Photoshop makes it easy to get the complementary color - simply select the area of color that you want the complement of and hit Ctrl-I. Photoshop will invert it for you. Make sure to do this on a duplicate layer, so you don't lose your base color.left - the base color #ffe500 right - the complement #001aff Complementary color schemes are often a lot more striking than other color schemes, so use them with care. They are most often used on pieces that need to stand out. 07 of 10 More Complementary Web Color Scheme Complementary Web Color Scheme. Image by J Kyrnin To get this version, I added 50% white to the bottom half of the colors and 30% black to the center square. As you can see, it gives you a few more options but it's still a complementary color scheme. 08 of 10 Triadic Web Color Scheme Triadic Web Color Scheme. Image by J Kyrnin Triadic color schemes are made up of 3 colors more or less equally spaced around the color wheel. Because a color wheel is 360 degrees, I again used the hue box in the color picker to add and subtract 120 degrees from the base color.upper left - the base color #ffe500 upper right - +120 degrees to get #e500ff lower left - -120 degrees to get #00ffe6 lower right - 100% white #ffffff Triadic color schemes often produce very vibrant Web pages. But like complementary color schemes, they can affect people differently. Be sure to test.You can also create tetradic or 4-color color schemes, where the colors are equally spaced around the color wheel. 09 of 10 More Triadic Web Color Scheme Triadic Web Color Scheme. Image by J Kyrnin As with the other examples, I added a 30% black square to the colors to get the additional shades. 10 of 10 Discordant Web Color Schemes Discordant Web Color Schemes. Image by J Kyrnin Beauty is in the eye of the beholder, but it is an unfortunate fact that not all colors go together. Discordant colors are colors that are farther than around 30 degrees apart on the color wheel and are not complementary or part of a triad.Discordant color schemes can be very shocking and should only used to generate attention. Remember that because these colors will often clash, the attention you get may not be exactly what you're looking for. Was this page helpful? Thanks for letting us know! Share Pin Email Tell us why! Other Not enough details Hard to understand Submit Continue Reading