Colors are the foundation of any design. Whether the design is for a website, a mobile app, or simply a general style guide for a brand, it’s important to pick the colors carefully in a way that distinguishes the design while providing its consumers a pleasing experience. Some of the most common ways of picking colors include drawing inspiration from nature, picking complementary colors, supplementary colors, or shades. This article will go over color-picking techniques along with how to apply colors to style sheets.
Picking a Picker
Many color pickers, including the default HTML color picker, show palettes of colors to pick from. They are generally ordered by the colors of the rainbow in the shape of a wheel or a table of squares. Each square represents a particular shade of a rainbow color. So within the “red” column, there are varying shades of red. Clicking on one of these shades sometimes reveals a hex value (format: #FFFFFF) or an RGB value (format: 255, 255, 255). This represents how the screen calculates the exact shade of the particular color—a combination of red values, green values, and blue values.
One of the best tools to help in picking pleasing colors for a theme is Adobe Color. The left side of the color picker lets you select a “Harmony Rule” for your colors. Among these, the easiest patterns that look good are “Analogous”, “Complementary”, “Compound”, or “Triad”. In order to use these properly, it’s necessary to start with a base color in the middle. The other 4 colors will be calculated automatically from the base depending on the “Harmony Rule” that is selected. Refer to the image below, which shows the harmony rules on the left and the base color in the middle.
Though a color picker will give you great suggestions for which colors to pick, the choice is ultimately yours as the web designer or developer on which colors to implement. For example, the base color of this website (https://nowispow.com) is rgb(0, 130, 130). From this base color on the picker, you can go to “Triad” and find a close shade of the secondary color, a dark purple hue. The actual secondary color used here is a few shades darker and less saturated than the shade of purple recommended by the “Triad” setting.
Colors for context
In websites and applications, colors are most commonly used to provide your visitors with a sense of where their navigation experience will lead them. Each button and element on the page, with a single word and a color, should be able to convey meaningful information about what interacting with that element will do. Some themes will reserve colors for specific types of actions. In addition to having a primary and secondary color, some themes will also have colors like info, warning, danger, and default. By reserving colors like these for specific types of actions, it creates powerful associations among your users with your theme, which helps to increase their familiarity and usability.
Using CSS, there are a number of ways to influence the color of elements, with the most common one being the background-color property. Font colors are changed with the color property. For links, it’s common to have some kind of global style associated with them, along the lines of the following:
a {
color: #008282;
}
a:visited {
color: #820D63;
}The above pseudo-class for :visited will help users distinguish between links they’ve already visited on your site and new pages they’ve yet to visit. It’s also a good idea to have class names for specific background colors, like .secondary-bg for applying the secondary color in the background. This allows you to also add text contrast all elements (generally buttons, but also card-like elements) using that background color.
Bonus: Pastel backgrounds
Often you may want to use a light-colored background, like with in-app notifications, so that the dark-colored text is more readable. Pastel colors are defined as having a low saturation and high brightness. In order to take an existing color in your theme and convert it into its pastel variant, go back to the color picking utility and on the bottom left, where there is a “Color Mode”, switch to HSB, which stands for Hue, Saturation, and Brightness. Then adjust your color to have a low saturation (middle slider, somewhere between 5-15) and high brightness (bottom slider, somewhere between 90-100). Depending on the color, you’ll find a shade that’s bright enough to be a good background without being too bright on the eyes.