Your website’s character is largely determined by the colour scheme used. Well-chosen shades add vibrancy to webpages whereas glaring or inappropriate shades distract visitors. It can be strategically used for guiding site visitors’ eyes to the regions you want. You can emphasize action items for which you want attention.
Selecting Appropriate Colours For Your Webpages
For building optimized colour palette for your site, you need to follow the proven website colour selection tips shared below.
1) Understand the uniqueness of your brand
For choosing shades, you need to understand the attitude that best describes your brand. You can take clue from site’s content. Try to categorize your site’s attitude as loud, fun filled, information laden, somber, minimalistic or classic.
2) Select the primary colour
Once your brand’s attitude is clear, start visualizing the colour that best represents it. Keep an eye for the saturation and brightness levels of the shade. Choose shade which is more saturated to showcase flashy or optimistic mood. Darker shade is recommended if the attitude is serious.
Select the hue next. Hue gives meaning to colour as site visitors would relate hues to ideas. Red is seen as representative of power whereas money is associated with green. You can experiment. Also, you can seek inspiration from the hues used by your brand’s competitors on their websites.
3) Select Supporting Colours
While undertaking colour selection in website design, you may go for 2-3 shades that complement each other. You can have a primary colour and few shades to support it. The shades you would choose must be aligned with the overall mood of your site. You can experiment various colour relationships with tools like Adobe Colour.
4) Give Expansion To Your Colour Palette
Once you have settled on the primary and supporting colours, you need to look for more variations in the colour palette for added versatility. You can mix the primary shade with white for getting various tints. Similarly, you can mix the colour with black for getting shades.
For color selection CSS Sass functions can be useful. You need to give percent values to the functions which you will use for creating distinct shades. These would make them different from primary shade. The example of CSS Sass function is given below.
$main-color: #9AE799;
$main-color-lightest: lighten($main-color, 20%);$main-color-lighter: lighten($main-color, 15%);$main-color-light: lighten($main-color, 10%);
$main-color-dark: darken($main-color, 40%);$main-color-darker: darken($main-color, 50%);$main-color-darkest: darken($main-color, 60%);
You can create ‘rich black’ with darker or black shade of the primary colour. You can also choose lighter grays which are tinted with the primary shade. Black or white tints enhance your webpage’s personality. The feel and appearance become more coherent.
If the product on your site is interactive, go about adding shades for indicating errors, warnings etc. Usually, red, yellow and green shades work fine. If your site’s primary colour is green, for example, and you want to give a feeling of friendliness, you can desaturate the red shades used for indicating warnings or errors. Make the hue complement your site’s nature.
You can expand color palette CSS style by altering the base with mix Sass colour function. For toning down the shades, you need to add desaturate function. An example is shown below.
$success: mix($base-color, desaturate(green, 50%), 50%);$warning: mix($base-color, desaturate(yellow, 30%), 5%);$error: mix($base-color, desaturate(red, 50%), 20%);
5) Use Contrast Properly
When finalizing website color scheme , you need to consider colour contrast carefully. By tweaking hue, brightness and saturation adequately, you make your webpages easily readable for colour blinds and people with poor vision. Ensure that the contrast between background and text is enough for making content legible to all users. Within the Chrome’s dev tools, you can use inspect panel to check the adequacy of contrast.
By now, you have become familiar with the principles and CSS tricks that will facilitate ease of colour selection for your website design. Start implementing this in your site. By adhering to them, you need no longer depend on guesswork for creating stellar web solutions.
If you need help regarding the designing of your website or any related issues, then feel free to reach us.
Top comments (0)