Color theory in web design is a broad topic that requires a lot of practice to fully grasp its nuances. The choice of color also depends on the environment and the specifics of the web designer's work, because we perceive colors and shades differently than illustrators or fine artists.
We’ve already partially dedicated some materials to color in web design and Photoshop. But today we want to look at colors and palettes from a broader perspective — where and how it’s easier and more convenient to combine them, what to pay attention to, and more. Overall, we’ve gathered several resources for color selection, found some interesting pre-made palettes, and want to dive into some points of color theory as well.
Color theory in a few paragraphs
When developing a website, we have 16.8 million colors to choose from. And all of them need to be combined and matched. If you imagine how many possible combinations there are... it's practically infinite. But colors have meaning. Imagine someone gives you your favorite item. You’re happy, it brings you joy. But now imagine that the item is the right one, but the color is your least favorite — a muddy mix of green, yellow, and gray. Oh, you’ll try to stay excited, but the joy will begin to fade.
Colors have meaning. They set the tone and impact emotions, much like how fonts strongly influence human psychology.
Primary colors are the base for all shades. The human eye perceives three base colors: cyan, yellow, and magenta. Every color you see right now is a combination of those three — in different amounts of brightness, hue, and intensity. Yes, print design uses these exact colors.
On the internet, however, we use RGB (Red, Green, Blue) and their hexadecimal values.
RGB (59, 89, 145) or #3b599b – Facebook blue
RGB (0, 0, 0) or #000000 – black
Each pair of characters in the hexadecimal code represents a primary color: red – 3b, green – 59, blue – 9b.
Warm vs Cool
Colors are also divided into warm (mostly reds and yellows) and cool (mostly blues and greens) tones. Warm colors in web design evoke emotions of passion and warmth. They are bold and aggressive, which is why they’re often used in critical messages, alerts, and important buttons.
Cool colors create a sense of calm and are perfect for winter themes, night scenes, sad or watery atmospheres. They can represent loneliness, cold, or fear — but they are also soothing and non-aggressive.
Temperature
The temperature of an image can be adjusted by changing its orange tones. This can make the picture feel warmer and happier, just like the world looks more cheerful when the sun casts its yellow-orange light. Lowering the temperature does the opposite — it makes an image look colder and more gloomy, like a gray rainy day.
Tints and Shades
Tints are created by adding white to a color, and shades by adding black. Tints and shades help form monochromatic palettes by varying the amount of white or black mixed in.
For example, let’s take the base color #8dbdd8 (light blue). In the image below, the monochromatic palette shows two tints and two shades created by mixing different amounts of white and black.
Saturation, Hue, and Brightness
Colors are also defined by saturation, hue, and brightness. Saturation makes a color richer or duller. When we say "light blue" or "dark green", we’re talking about saturation.
Hue refers to the actual color relative to the basic seven of the rainbow. For instance, "blue-green" is not exactly blue or green — it’s a hue.
Brightness shows how light or dark a color is compared to pure white. It’s similar to saturation, but based on a different measurement.
Color Schemes
When it comes to color schemes, there are four main types: monochromatic (based on one color), complementary (two colors opposite on the color wheel), analogous (three colors next to each other on the wheel), and triadic (three colors forming a triangle on the wheel).
Planning a Color Layout
That’s the basic theory — and later we’ll just refer to this material. But at the beginning of your web design journey, this theory is crucial. Still, your eyes might tell you something doesn’t feel right, even if the numbers are “correct.” For example, a blue may look dull — even if technically it's saturated. That’s part of each designer’s individual perception. That’s why many web designers immerse themselves deeply in color palette design, just like others do with typography. They test shades, saturations, temperatures in combinations, and observe when and how things work.
Nevertheless, when it comes to web colors, there is the concept of "web-safe colors". This idea originated when displays couldn’t render all 16 million colors. But if such safe colors exist, why bother with anything else? Still, it’s good to understand why they exist and how they influence color choices overall.
While we technically can use any color, the best web projects often rely on a core set of shades. And yes — trust your eyes. If they don’t like what they see, try changing it.
When you need help
If you find yourself stuck even at the very beginning of a project, you can always find color inspiration online. Just visit a color palette site, customize it to your needs, collect the desired colors, and work with them in Photoshop. For example, explore webdesign-inspiration or awwwards, sort by color, and gather inspiration.
Color Explorer
This is both a library and a tool for creating color palettes. It features sets for print and web. You can choose a base color and view a wide range of related shades and tones.
Colors on the Web
This tool generates all matching colors and shades based on the one you input. It offers matching schemes, monochrome palettes, analogs, and adjustments for saturation, hue, brightness, and more.
Copaso
Copaso allows you not only to pick a color by adjusting several parameters at once, but also to generate a palette based on it. In the first step, you define a base color, then build a full range of shades and tones from it.
Colorotate
This is one of the few mobile apps that allows you to work with color palettes on your smartphone or tablet. There's also a desktop browser version. Its unique feature is 3D color work. You're presented with a color cone. Each mixing point moves within its own triangle, and the cone can be rotated freely.
There are also sets of ready-made palettes available — Christmas-themed, monochromatic, modern, citrus, and many more.
ColourLovers
This site has long served as a catalog of user-created color schemes. It typically includes flat design colors, patterns, textures, and backgrounds — all freely available.
You can also extract palettes from photos and illustrations. We’ve already written about this and listed resources for it. The idea itself is both fun and practical — check it out when you have time.
Color Profiles
But choosing a palette is only half the story. A more pressing topic in web design is the choice of color profiles. We briefly touched on it earlier (see the link at the top), but here’s what’s worth noting now. Every monitor can be calibrated to a specific profile — for example, in Windows 10 → Control Panel → Color Management. As a result, colors may look different on different screens.
It’s a tricky subject, and many web designers aren't always sure if they’ve chosen the “right” color. sRGB is most often recommended — but it’s not a requirement or the absolute best option. This also applies to images with embedded profiles and to website mockups. In short, it’s something worth exploring further.
That said, many designers choose to ignore profiles and simply work with their computer and Photoshop default settings. And that’s totally fine, because even if you agree on colors with your client, you still can’t control how they’ll appear on users’ monitors.
Material UI Colors
When Google created the Material Design guidelines, they included a detailed section on color. However, the rules are so simple that they can be applied to nearly any interface — which made them incredibly popular.
When it comes to choosing color, Material Design follows the flat design aesthetic. You can find public tools for building app and site palettes, allowing you to browse color sets, generate schemes, and more.
If you choose to work solely with Google’s color sets, we recommend trying both tools to see how they can complement each other. Additionally, you can use 0to255 to select colors by brightness and saturation.
Conclusion
Web color is generally simple, and it takes only a couple of weeks to grasp the basics. But if you decide to dive deeper into color theory, you’ll uncover a world full of nuances, challenges, patterns, and creative possibilities. Some of you may get overwhelmed by the sheer volume of info. Others might say, "No need to overthink — I just used the eyedropper on the logo and styled the site accordingly." And yet some of you will be inspired to revisit the theory again and again, to explore color combinations and start experimenting.
We just hope that our articles on color will help you in future projects, guiding you toward a practical understanding of web color through repetition and by trusting your eyes.
There are countless color palette tools and sites for inspiration — but when you sit down to "draw" your own design, the mind often goes blank. You sit there wondering, "What kind of blue should I use? A bit darker? A bit lighter? Ugh... and the client didn’t even want to think about this stuff. For them, it’s all... minor details."
The New Year holidays and winter evenings are a great time to create and imagine freely — especially when you're too tired to party but still want to do something enjoyable.