website color schemes – ColibriWP Blog https://colibriwp.com/blog WordPress know-how to boost your design skills Tue, 26 Apr 2022 10:41:19 +0000 en-US hourly 1 https://wordpress.org/?v=5.7.14 https://colibriwp.com/blog/wp-content/uploads/2019/09/favicon-01.png website color schemes – ColibriWP Blog https://colibriwp.com/blog 32 32 Colors that Go with Green in Websites https://colibriwp.com/blog/colors-that-go-with-green-in-websites/ Thu, 30 Jan 2020 07:36:37 +0000 https://colibriwp.com/blog/?p=4686 Colors have a huge impact upon website users. In building sites, designers often choose green as base color for their pages. The important thing is how they pair green with other colors and nuances, to get a nice visual effect and an effective website? An interesting report about how color psychology influences conversion rates and…
Read more

The post Colors that Go with Green in Websites appeared first on ColibriWP Blog.

]]>
Colors have a huge impact upon website users. In building sites, designers often choose green as base color for their pages. The important thing is how they pair green with other colors and nuances, to get a nice visual effect and an effective website?

An interesting report about how color psychology influences conversion rates and boosts sales shows that green is:

 

  • Better suited for certain niches, and quite unpopular for others
  • Popular for energy, technology, finance, household and food
  • Unpopular for car, airplane and clothing
  • Questionable for health care
  • Between 62% and 90% of the product assessment is based on color alone
  • Color impression is responsible for 60% of the acceptance or rejection of a product.

 

But an effective site is not just about sales, it’s also about brand recognition and remembering. Base color and the particular color combination in websites help users shape their own image of the brand.

 

mind share for the brand

Source

 

In combining green with other colors and tints, you should consider the different meanings green has in different cultures around the world:

  • Western cultures – green stands for nature and freshness, spring, environmental awareness, luck, wealth, on the positive side.
  • Middle East – green represents luck and wealth
  • Eastern cultures – green symbolizes youth and new life

Beside the interest these meanings inherently arise, they’re of utter importance for planning global communication campaigns. The color has to be in line with the message you want to transmit, otherwise it might have subjacent implications that drive people away from your goods/services. Choose colors carefully, after you’ve chosen your target market.

So, we can conclude that not only is the niche a factor in determining whether green is an appropriate color or not. There’s also the region factor and the target audience with cultural specificities.

 

In the following lines, we’ll exemplify combinations of green with other colors, and see what significations they’re bound to convey:

 

Green, violet and orange color scheme

 

violet and orange in color schemes

 

While green and orange match based on their opposition in the color wheel, violet is quite an unusual color that comes up. Violet has the effect of drawing attention towards the topic of the website, raising awareness and focusing attention on each and every detail in the site pages. Green, turned to violet, stands indeed for an emergency. This is related to the whole site identity and the team activism towards a zero-carbon future. If violet is the accent color, orange comes to soften the message: it is used for driving engagement and call to actions that invite users to take initiatives. Action itself is bound to soften the climate of emergency. Green should remain the base color, and so does the website imply through the color scheme and its message.

 

The next website shows a pretty similar color palette, only the orange softens more the overall message:

 

orange and violet in color schemes

 

Colors that Go with Green: Brown and White

 

brown and foggy grey plus green

 

In this website, the mix of colors comes naturally: the photo integrates green and brown (+ some shades of foggy grey), unto which text is shown in white. Given that the background has darker colors, white comes in handy to create contrast. It’s also in line with the naturalness of the view, while focusing attention onto title and call-to-action. All the text of the page is displayed in white, including logo, title and subtitle, plus CTA button text. It’s remarkable how, through the use of colors, text and image support each other: green, brown and some tints of grey push the text forward, while white ensures harmony with the image naturalness.

 

The same color mix is used in websites such as:

First example green and white:

 

popular color scheme

 

Second example 2 green and white:

 

another popular color palette

 

Third example 3 light green and white:

 

light green and white

 

Fourth example 4 dark green and white:

 

dark green and white

 

Colors that Go with Different Nuances of Green: Red, White

 

red, white, green

 

In the Geli website, there’s a nice interplay among different nuances of green: the green of the background, the green of leaves, the other green of other leaves… Overall, green spreads all throughout the page, and other colors interfere only to the point of better harmonizing the “greens” interplay. Some red and a little more of white are all the site needs to create a nice presentation of “Goods for green”. What’s special in the site is this exact combination of nuances that are distinct from one another, in reciprocal complementation and easy to form a coherent whole. As it’s best practice for green websites, text is displayed in contrasting white.

 

Following a similar color combination pattern:

Example green, red and white

 

white, red that go with green

 

Other Colors that Go with Green: Yellow, White

 

yellow, white, green

 

Another successful combination is that of dominant green, yellow as accent color and some white for background, texts and a few icons. It has power to transmit a vibrant feel and a consistent message (proudly funding Canadian artists for over 30 years!). Dark green contrasts perfectly with yellow and both put to the forefront a featured photo with a white background. For reasons of coherence, the text color alternates between white and yellow, so text and image better intersect their meanings and symbolism. The Call-to-Action buttons have all yellow background, so they are visible enough and urge to taking action. The layout and colors spread contribute to a clean design, that’s easy and pleasant to browse through.

 

Green, blue and black

 

blue, black and green

 

If you find surprising to associate green with blue, let this website surprise you. On top of that, black comes to complete the color scheme with dark nuances. In fact, this mix of colors borrows its naturalness from… nature. One might associate blue with air, sky and light, that come down on solid ground and grass. A black frame wraps this décor and it contrasts with the lightened picture. As you might have already got accustomed, text is displayed in white, for reasons of visibility and harmonious color scheme. The CTA buttons perfectly fit into the design, as they alternate colors in the picture: green and blue.

 

The above-mentioned color combinations are the most popular in web design. You can use them as such for your website. Or you can take them as a source of inspiration for developing a different, unique color scheme. However, you have to keep in mind that green goes well with many colors: orange, brown, yellow, even blue, violet, black and white. Starting from here, you can innovate as much as you like, given that you have an eye on color combination principles, for your website design.

 

 
[sibwp_form id=1]

The post Colors that Go with Green in Websites appeared first on ColibriWP Blog.

]]>
Brown Color Palettes for Exceptional Websites https://colibriwp.com/blog/brown-color-palettes-websites/ Tue, 17 Dec 2019 12:49:44 +0000 https://colibriwp.com/blog/?p=4589 Brown color palettes are indicative of certain meanings in websites. Brown is the color of earth, it signifies steadfastness, stability and balance. Also, it implies reliability and friendliness, as well as simplicity, that’s why it’s a good idea to choose a brown color palette for your website. When included in a website color scheme, brown…
Read more

The post Brown Color Palettes for Exceptional Websites appeared first on ColibriWP Blog.

]]>
Brown color palettes are indicative of certain meanings in websites. Brown is the color of earth, it signifies steadfastness, stability and balance. Also, it implies reliability and friendliness, as well as simplicity, that’s why it’s a good idea to choose a brown color palette for your website. When included in a website color scheme, brown gives the impression of wholesomeness and peace, harmony and stability. If that’s what your brand needs to communicate, use brown in your website color combo.

So, let’s see some examples of brown color palettes in websites:

 

  1. Athena Art

 

Athena Art brown color palettes

 

This website design plays with geometric shapes and original brown color palettes that focus the attention on the site content. A great part of the homepage is covered with light brown, in combination with violet, which gives a feeling that this website content is to pay attention to. The design is unusual, and it gives the impression of elegance and modernity. The color scheme matches the topic of the website, also giving it a modern aspect that seems to be intricately related to “Athena Art Finance”.

 

  1. Sahel

 

Sahel brown color palettes

 

This website mixes different nuances of brown. The images are placed onto a light brown background, which ensures enough negative space is preserved. Also, it leaves the impression of 3D movement, which makes the website stand out and grabs the attention of users. The design of the homepage is simple, leaving the decision to users as to where they navigate and how they go further exploring the website.

 

  1. Lincor Watches

 

 

This website uses light brown in the background of the homepage Hero. It gives a sense of trust, and leaves enough room for negative space. As a result, the message is brought to the forefront, and it grabs people’s attention with its friendly tone. This goes hand in hand with the friendliness of the color scheme and the simplicity of it.

 

  1. Alps Coffee

 

Alps Coffee brown color palettes

 

This website uses brown as suggestive of coffee. This is the very topic of the Alps coffee website, that’s why brown is used in the homepage Hero image. It involves calm and comfort, steadfastness and stability, and harmony. The logo, the menu and the text color are the same brown as that which is used for the photo, so there’s design coherence and visual balance.

 

  1. Authentic CFF

 

 

This website doesn’t use brown as the main color in its pages. However, light brown is the accent color, for underlining and marking some parts of content, all throughout the pages. Call-to-Action buttons are in brown. Some sections appear on a brown background. The logo itself consists of brown, the same brown nuance as the rest of the homepage items. The hamburger menu and the expanded menu are on a brown background. All these create unity within the page and give coherence to content.

 

  1. Art4web

 

Art4web brown color palettes

 

In this website, brown comes naturally, as indicative of the beauty ritual. For the homepage, the designer used split screen, so the page unfolds only onto the right part of the screen. All throughout this right side of the page, brown alternates with blue-green nuances, for exquisite effects. In some sections, light brown appears in the background, while text is visible in a different brown nuance that contrasts well with that background. The presentation is remarkable as unique, and recommends Salon Sona as special for the beauty ritual.

 

  1. Ultimagstaad

 

 

This website is about a 5-star hotel. It uses brown both in the Hero image and in the following homepage sections (background, titles & subtitles). It conveys a sense of luxury and cosiness, that’s indicative of the hotel luxury. For elements on hover, they use the brown color, making micro-interactions part of the whole web design.

 

We hope these few examples inspire you for the next website design project. Hence, you should know what brown nuance to use in what part of the website, so the whole stays unified and coherent, transmitting the values you want to, through the use of brown.

The post Brown Color Palettes for Exceptional Websites appeared first on ColibriWP Blog.

]]>
Inspiring Red Color Palettes for Websites https://colibriwp.com/blog/red-color-palettes-websites/ Wed, 27 Nov 2019 13:44:42 +0000 https://colibriwp.com/blog/?p=4527 peop Red color palettes transmit strong messages too website users. Red is a powerful color. And it has different meanings, that come to life depending on the context where they belong. Among the connotations of red and red color palettes: Luxury – red is the color of opulence, abundance and richness. It might indicate luxury…
Read more

The post Inspiring Red Color Palettes for Websites appeared first on ColibriWP Blog.

]]>
peop

Red color palettes transmit strong messages too website users. Red is a powerful color. And it has different meanings, that come to life depending on the context where they belong.

Among the connotations of red and red color palettes:

  • Luxury – red is the color of opulence, abundance and richness. It might indicate luxury spaces. It’s appropriate as a symbol of expensiveness.
  • Danger – red is also the color that denotes danger. It marks an alert, and triggers better attention and concentration to the events that are happening.
  • Energy – red is a highly efficient color. It encourages action, and sets users in a state when they’re more inclined to convert. That’s why, sometimes, designers choose red for Call-to-Action buttons in websites.
  • Boldness – due to its message, red causes boldness to manifest itself. Red increases chances people try a product of or a service package, and be more inclined to experiment novelty.
  • Interactivity – this is particularly sprecific to websites, where red might helps increase people’s engagement with the site elements. This color invites to action, and users happily start exploring a website’s content, when red inspires them to do so.

 

In the following lines, a series of successful sites explains the effects of red color palettes upon visitors.

 

  1. Species in Pieces

 

example red color palettes

 

A website destined to raise awareness towards the danger of species in extinction. As the name itself suggests, Species in Pieces draws the attention to some facts that need to change. The survival itself of some species is threatened, and this is eloquently suggested through the red used for the page text. This color is all the more efficient as the text is surrounded by negative space. The technique has the role of bringing to the forefront a message all users should keep in mind and react to.

 

  1. Multimedia Guides to Polish Culture

 

example 2 red color palettes

 

This time, red indicates culture, the Polish culture. The same color in the image overlay and some part of the title text creates coherence and a more efficient message. People will remember the red color they associate with the site, which serves to branding purposes. Red brings Polish culture to the attention of readers, and promises to involve them into exploring the Polish culture through multimedia guides.

 

  1. Interactive.red

 

 

Interactive.red is a digital agency that included red into its brand identity. That’s why the term “red” is present in the very domain name of the website. Throughout the site, the red color is spread in different strategic locations, attracting attention towards the company and its services. It encourages users to take action, that is to choose Interactive.red services. One of such strategic locations is the Help section, which is delimited in the upper and lower parts by red. Also the text within this section is partially displayed in the same color, ensuring coherence in design and orienting visitors towards the best action they can take: contact Interactive.red.

 

  1. Kitkat

 

 

Kitkat is about dessert. It’s about indulging in savouring a KitKat, and a break. The red color palette refers to the luxury of having such moments for yourself. It encourages to buy, and it encourages to taste the KitKat. In this case, the website background is all red, which means you shouldn’t wait long before buying. The white of text boxes creates good contrast, and keeps the attention focused onto the site presentation. Otherwise, the presentation is simple, easy to scan and appealing to readers’ emotional level.

 

  1. Bowtieapp

 

 

As the text in the website says it, Bowtie is a desktop accessory that allows you to see and control your music, with some nice tools they make available for you. Red presents theatre curtains that imply a show which people watch in a comfortable atmosphere. And to keep a unified style into the page, the Download button is red, too (the same nuance as the theatre curtains).

 

  1. Uchicago.edu

 

strategically used red color palettes

 

This website belongs to the University of Chicago. It has an .edu domain and it has authority as an educational institution. Red appears only in the header, where the university logo occupies a central place. It transmits that the University implies a high level of professionalism and high standards. Exclusiveness is another meaning for red in the website pages. Grey nuances and much white space balance its use.

 

  1. Nhdist

 

inspiring red color palettes

 

Another use of red in the upper part of the page (the menu bar) is valid for Nhdist. Red represents quality beverages – it’s a symbol of high quality and expensiveness. As in other examples, red comes in contrast with white text and dark nuances in the header background. High-end offers are another expression for “New Hampshire’s Choice for Quality Beverages”.

 

We hope the above examples inspire you to create your own color scheme. Depending on how well red represents your brand, you might choose it as the main color or as a secondary color that emphasizes a certain message into your website. Either way, red color palettes help you increase engagement and maximize conversions.

The post Inspiring Red Color Palettes for Websites appeared first on ColibriWP Blog.

]]>
Silver Color Palette for Websites https://colibriwp.com/blog/silver-color-palettes-for-websites/ Wed, 06 Nov 2019 15:13:25 +0000 https://colibriwp.com/blog/?p=4352 This time, we’ll cover significance and effects of a special website color scheme: the silver color palette. First, it would be nice to have a clear picture of silver color palettes and their influence on design. What are the effects of a silver color palette?   Silver in a website page makes that page shine.…
Read more

The post Silver Color Palette for Websites appeared first on ColibriWP Blog.

]]>
This time, we’ll cover significance and effects of a special website color scheme: the silver color palette.

First, it would be nice to have a clear picture of silver color palettes and their influence on design.

What are the effects of a silver color palette?

 

  1. Silver in a website page makes that page shine. It won’t shine with vivid colors, but it will give brilliance to the presentation. This effect outperforms that of strong colors, with luminosity. It makes that page special, from the very design.
  2. Also, silver gives elegance to a website presentation. The association of color and the precious metal serves to bringing elegance into the design. It works well combined with simple to no decoration, short text and much negative space.
  3. A silver color palette is appropriate for business websites. It suggests high-end products and services, so use it carefully. Do not select silver unless your offer lives up to the presentation. Silver brings pricey products/services to the forefront. There’s more chance to buy costly products when all the website guarantees for their quality.

 

*Important: don’t mix silver and gold, unless you want an out of the ordinary effect and you know how to handle it.

 

What is such a color scheme composed of?

 

This color scheme involves different tints of grey (a greater or lesser concentration of color) and a high luminosity degree.

Silver can come in combination with different colors: pink, yellow, red, blue, etc. Those colors add a touch of liveliness and concreteness to the website color scheme.

On the other hand, you can go further and give metallic shades to silver. This strengthens the silver effect. It makes it eloquent enough to give weight to the presentation.

 

In the following lines, we’ll make a top 3 of websites that excellently use silver color palettes:

 

  1. Beauregard

 

Silver color palette - example

 

Within this site, luxury is at home. And silver nuances melt precious metal and website color scheme in an eloquent manner. Pure silver is suggested by sheer use of silver colors. Needless to say, zoom in and blur effects can emphasize some details and fade in on others. Additional colors in the page serve to enhancing the expressiveness of silver. Much silver concentrates in the Hero of the homepage. Hence, visitors start with elegance and style in mind, when browsing the website.

 

  1. Microsoft – By the Numbers

 

Silver and pink color palette - example

 

This website capitalizes on the use of grey, gradients of grey and the best version of grey, which is silver. Its use matches the brand, a clean presentation and an inspired intro for the stories that make Microsoft. Other colors that enter this color scheme are pink (and gradients), plus white. They’re lighter colors that balance grey and silver with refreshing tones. Thus, the homepage Hero has an intro with a pleasant aspect, inviting to read more. Silver is rather suggested than really applied onto the page. This way, it has even more power to refer to high-quality, even excellence, than it would have had as simply put on portions of page.

 

  1. My360mirror

 

Elegant silver color palette - example

 

This website makes use of colors, so metallic nuances come up front. Grey is generously spread in the background, and brings silver to users’ attention. It’s the product itself that gets contours with silver. It shines in the page as the new product to have, and the new idea to try out. The design is minimalist; thus users’ attention focuses better on the product itself, and the main message. All elements in the page converge to creating an excellent silver color palette that suits My360mirror. Text, logo, description, menu items, all have light grey/white nuances that augment the silver expressiveness.

The post Silver Color Palette for Websites appeared first on ColibriWP Blog.

]]>
Orange and Blue Color Palette for Websites https://colibriwp.com/blog/orange-and-blue-color-palette/ Mon, 21 Oct 2019 15:04:36 +0000 https://colibriwp.com/blog/?p=4302 Orange and blue are complementary colors. There’s no better combination than to use orange and blue in the same website, and attract attention towards it. In the following lines, we’ll show you some examples of a successful orange and blue palette in websites. Perhaps they’ll inspire you in your work.   Vitrinesurlareleve     This…
Read more

The post Orange and Blue Color Palette for Websites appeared first on ColibriWP Blog.

]]>
Orange and blue are complementary colors. There’s no better combination than to use orange and blue in the same website, and attract attention towards it. In the following lines, we’ll show you some examples of a successful orange and blue palette in websites. Perhaps they’ll inspire you in your work.

 

Vitrinesurlareleve

 

Orange and blue color palette

 

This color scheme focuses on orange and blue, in a combination where each color emphasizes the other. There’s a dark blue selected for this color combo, and it creates dazzling contrast with pure orange. This has the role to make the website memorable, easy to remember and to return to, whenever people feel like it. The color scheme creates vibrancy, and makes an impact upon readers, just through colors themselves. Blue and orange successfully complement each other, and allow some white text to tell its story onto an electric background.

 

Cubicleninjas

 

 

This website utilizes a softer color scheme, as compared to the previous one. In that the orange is milder, and the blue is scattered here and there, creating a visual contrast that’s easy to remember, without being too bold. Additional colors are part of the color scheme, thus the orange/blue balance is struck elegantly. Some violet and some black are part of the color scheme. Thus the blatant contrast between orange and blue is somehow attenuated. As in the previous example, the color of the text is white: it’s the best option for a background that’s filled with blue and orange.

 

Justinbird

 

 

This website has a lot of orange into the background… and a little blue. It seems to fuel readers with energy and concentrate their attention to the blue and especially, that part of website containing the text presentation. The blue bird directs users’ eyes towards the text. One thing this website has in common with the 2 previous ones: text that appears directly onto the background, within that combination of orange and blue, is white. However, when the alternative is white background, the text color switches to black (orange is for the menu items, for the sake of design coherence).

 

Snapplr

 

Original orange and blue color palette

 

Similarly, this website has a vast deployment of orange, and a little blue. It impresses through simplicity, and much negative space that favours concentration onto the text. Only, the negative space is not white this time, but it’s orange. The website has an element in common with all the others that we presented. It’s text onto the background is white, thus it accounts for good legibility.

 

CSS Design Yorkshire

 

 

This website has orange and blue in its color scheme, without making them prevalent. The no. 1 color in this combination is black, and it receives touches of pink, green, white, grey, aside from orange and a little bit of blue. It seems black and orange play the most important role into the website. Meanwhile, other colors come to sustain the main color combination, with chromatic additions that enliven the page. Small sparkles of colors, different from the main color combination, raise the interest of users into what each box in the Editor’s Latest Selections contains.

 

Daddydesign

 

Orange and blue color palette - website example

 

Here, too, the combination of orange and blue is salient. It’s visible enough to make the page memorable and shadow all other colors used for creating the image gallery. It seems that brown, grey and black serve the only purpose of propelling orange and blue to the most visible part in the website. And here, too, the color of the text is white, as the best option for an orange and blue color combo in the background. What is more, the images in the gallery have an orange overlay when users hover their mouse over the items. This serves for better coherence into the website design.

 

This collection of 6 types of orange and blue color palette for websites might serve you as source of inspiration in creating your own color scheme for a new website. Notice the different approaches, as well as the main best practices.  Hence, you won’t start from scratch in choosing the best color scheme for your website.

The post Orange and Blue Color Palette for Websites appeared first on ColibriWP Blog.

]]>
Mint Color Palette that Works Wonders for a Website https://colibriwp.com/blog/mint-color-palette-websites/ Fri, 04 Oct 2019 10:54:30 +0000 https://colibriwp.com/blog/?p=4226   A mint color palette can really work wonders for a website. Let’s see how: As refreshing as you say “mint”… this can be an effect that’s really undreamt of, for websites. A suitable color combination will work wonders for your website pages. More precisely, it will take that website out of anonymity and into…
Read more

The post Mint Color Palette that Works Wonders for a Website appeared first on ColibriWP Blog.

]]>
 

A mint color palette can really work wonders for a website. Let’s see how:

As refreshing as you say “mint”… this can be an effect that’s really undreamt of, for websites. A suitable color combination will work wonders for your website pages. More precisely, it will take that website out of anonymity and into the limelight. It will charm users and give them reasons to turn and return to your much-cherished website.

 

In the following lines, we’ll walk you through possible mint color palettes that add brilliance to websites:

 

1. Mint for consumption

Mint color palette in site

Image credit: https://colorpalettes.net/color-palette-3986/

 

This mint color palette is used for culinary websites, full of recipes visitors cannot help but eat with the eyes. The prevalent mint color spreads all throughout the page and balances warm hues with a refreshing note. Powerful orange is counterbalanced by a similarly bold color: mint color. The art of combining these hues in the color scheme resides in the selection of the right shades/luminosity and saturation for each color. Bold hues are slightly toned down by the background brown, creating a relaxing experience for visitors that want to dwell longer on the page and discover interesting content. The mint color palette examplified above might be a good choice for food-related websites that want to keep their readers hooked.

 

2. Mint color palette for florist’s website

 

Florist's site - mint color palette

Image credit: https://colorpalettes.net/color-palette-3838/

 

As a second example, this mint color palette is innovative in its use for a florist website. It’s unusual, as it implies blue & green hues for flowers, making them special and worthy of attention. Although it’s present in combination with white, the mint color has darker tones, and creates significant contrast in the page. And this contrast, not at all overwhelming, gives an agreeable experience to users who land on the page and want to explore its content. The above image rendering a mint color scheme can be resourceful, inspiring, innovative in giving your website a special note. All hues are light, passing the mint color through different variations that show the true potential of a color that’s borrowed from nature. You can give this color palette a try, and check its effects upon readers way before they return to thank you.

 

3. Mint color palette for a cool party

Mint color palette for party and weddings website

Image credit: http://www.theperfectpalette.com/2013/04/party-palette-shades-of-teal-mint.html

 

Another mint color palette, which is perfect for events websites: wedding, parties, etc. Light and dark tones of mint are only visible enough to spread out a celebration atmosphere into the website pages. A mint color has a variety of nuances that adapt well to every element in the page. In the background, colors are just a little more faded, so the minty items in the foreground focus users’ attention upon themselves.

Overall, the party is cool, and the vibrancy works its way to the website visitors. Such a presentation couldn’t be but a promise that your event will be perfectly organized, much enjoyed. Minty tones refresh, and nuances of the mint color tell the story in multiple ways. The event is not only cool, it’s also a pleasure to take part to and witness joy. Much than witness, get involved into the party, and make it memorable, together with the others. A website with a mint color palette can tell you all this in a few seconds, through its exquisite presentation.

 

4. Mint color palette for technical stuff

 

Mint color scheme for technical stuff

Image credit: http://alanrmulally.co/different-shades-of-mint-green/

 

Last, but not least, this mint color palette can be observed in the complete design of a website. The image above tells a lot on the effects mint color can trigger upon readers of this page. Background and foreground interplay, so light hues support darker hues which, in their turn, emphasize light hues of mint color. This gives an effect of pleasant repetition all the more useful as it chains items until the most important ones get the most prominent position in the page. All this play of colors includes white, both through white space and white text. The end result, this design successfully represents the use of a mint color palette in a technical website. Hence, a technical website is simpler to understand, as it suggests accessibility and easy comprehension that content placed on this color scheme will ensure.

 

All in all, mint color schemes are an inspired choice for a pretty wide range of niches. In the examples above, we listed some of them, and we hope they’ll serve as sources of inspiration for your own website. Which one would you like to test?

The post Mint Color Palette that Works Wonders for a Website appeared first on ColibriWP Blog.

]]>
Turquoise Color Schemes for Websites https://colibriwp.com/blog/turquoise-color-schemes-for-websites/ Mon, 30 Sep 2019 11:10:43 +0000 https://colibriwp.com/blog/?p=4217 Turquoise is an interesting color. And turquoise color schemes stir up curiosity . Both in real life and online, it is deemed a perfectly visible color, intriguing and extremely eloquent, at the same time. In today’s article, we’ll focus on the online use of turquoise, in interesting combinations that make websites stand out. More precisely,…
Read more

The post Turquoise Color Schemes for Websites appeared first on ColibriWP Blog.

]]>
Turquoise is an interesting color. And turquoise color schemes stir up curiosity . Both in real life and online, it is deemed a perfectly visible color, intriguing and extremely eloquent, at the same time.

In today’s article, we’ll focus on the online use of turquoise, in interesting combinations that make websites stand out.

More precisely, we’ll start from one single color: turquoise. It’s a greenish-blue color, whose RGB code is #40E0D0.

When choosing a color scheme for your website, turquoise can come in different combinations, depending on your selection in the website builder. In this case, we’ll take the example of Colibriwp.

Some suggestions of color combinations that include turquoise

Turquoise color schemes

Image credit: https://www.color-hex.com/color-palette/1836

 

This graphic shows different shades of turquoise, each with its HEX/RGB code. These can be combined with contrasting colors, that showcase content you want to emphasize in the website pages.

Shades go from the lightest turquoise to the darkest nuances, so you have to pick the shade that best matches the turquoise color schemes you want to build and integrate into your website.

 

Turquoise color schemes

Image credit: https://www.color-hex.com/color-palette/43053

 

This color palette combines turquoise and blue and you have the HEX/RGB code for each of the nuances that are combined. This color combo is suitable for a website where you prefer lighter nuances. Otherwise, you can choose the shade that best matches your design.  Therefore, you can start building your own color scheme starting from that color. It’s recommended that you choose contrasting colors in relation to the basic turquoise you’ve selected for your color scheme.

Now, we’ll pass turquoise through all color schemes available in Colibriwp. We’ll discuss the effects of every color scheme that integrates turquoise in its combination:

 

Turquoise in color scheme 1

 

How to create turquoise color schemes in ColibriWP

 

For ease of use, each color in the selected color scheme has details about the HEX code. This way, the color can be replicated anywhere else into the site, by just introducing the same HEX code for the element you want to customize.

This is an interesting color combination, due to the presence of orange and white into a chain of otherwise cold colors. There’s a perfect balance between blue, turquoise, green, on the one hand, and orange, white, black, on the other hand. The first range of colors ensures the basis upon which to build the presentation. The second range of colors sustain visibility of elements that borrow these nuances and shades.

For each color in the color scheme, you can expand the panel with the HEX code you might need to note down for further use in the website.

 

Turquoise in color scheme 2

 

 

This is a livelier color scheme. It includes orange and yellow, for a brightness effect. White couldn’t miss from the color combination that determines the chromatic balance of the whole website.

These adjacent colors, next to turquoise, tone it up and down depending on the area you are customizing in the website pages. It’s adequate for websites where you need a sufficiently visible color scheme. In the meantime, they allow content to shine by itself in the different pages.

This color scheme uses complementary colors in a successful way, leaving room for uniqueness to work its way to what’s obvious and agreeable to notice in the web pages.

Note down the HEX code for each color, to replicate it in other areas of the website, if you want to keep a coherent color scheme all throughout the pages.

 

Turquoise in color scheme 3

 

 

This color scheme puts together turquoise and a variation of it, orange and green for an interesting color combination. The turquoise variations and vivid colors create a chromatic balance you can successfully use in your website, for agreeable effects. The contrast between cold and warm colors is light, due to the nuances this color schemes includes. Orange and green are perfect for call-to-action buttons. They are salient within the overall color scheme, where turquoise, blue, white and black are dominant.

 

We hope these chromatic combinations inspire you and help you design the perfect website, that eloquently express your company’s or your identity. Also, feel free to experiment with different combinations. And feel free to include different nuances in the color scheme you’ll use as the basis for your design. ColibriWP is the right tool for such experiments.

 

The post Turquoise Color Schemes for Websites appeared first on ColibriWP Blog.

]]>
Beige Color Palette for Websites https://colibriwp.com/blog/beige-color-palettes-websites/ Tue, 17 Sep 2019 13:32:33 +0000 https://colibriwp.com/blog/?p=4198 Beige is part of the soft colors that work wonderfully for some websites background. A beige color palette is suitable for niches such as architecture, interior design (its role is to make the visit comfy), fashion and lifestyle (its role is to make you feel at ease on the website), cosmetics and treatments, etc. In…
Read more

The post Beige Color Palette for Websites appeared first on ColibriWP Blog.

]]>
Beige is part of the soft colors that work wonderfully for some websites background. A beige color palette is suitable for niches such as architecture, interior design (its role is to make the visit comfy), fashion and lifestyle (its role is to make you feel at ease on the website), cosmetics and treatments, etc.

In the following lines, we’ll give a few examples of websites that successfully use beige color palettes:

 

  1. Bang Olufsen

 

 

Beige color palette in website

 

This website is about how to transform the interior space of a room. It uses warm colors, mostly beige and brown, to suggest comfort and cosiness. The products are all the more emphasized as they are exhibited onto a warm-colored background: they suggest modernism and coolness, and they invite to further exploration or acquisition.

 

  1. Coffee Club

 

A more pronounced beige color palette

 

The Coffee Club website makes use of colors that associate well with the comfort of drinking coffee. Its background colors contain beige, which integrates in a perfect color palette that transmits what it means to choose well-being. Beige contrasts with more pronounced colors with he role of drawing attention and make users read content on the page.

 

  1. Chocolatmilano

 

Beige color palette - website example

 

In the same vein as the coffee shop, this website uses beige in combination with colors that transmit: the pleasure of tasting chocolate, wellness, comfort and cosiness. In addition, this beige color scheme raises the standard to a high-end presentation of luxury products. That’s why users are welcomed by the title: “The luxury gelato shop”. Onto a background with beige nuances, products and shop shine with color, and not a common one: it’s the color of luxury.

 

  1. Designeat

 

 

This is the website of a design and development company. So, it’s no wonder they use colors in a successful way, managing to create a color scheme that moulds perfectly onto their brand. Beige is part of the color scheme, and it’s in contrast with blue. This is valid in the upper part of the homepage, as the flow of colors continues with more pronounced nuances towards the bottom of the page. It’s important to note that beige integrates well in the overall color palette. It ensures a balance among more striking colors.

 

These websites all make good use of beige in their color palette. The choice of color is key to branding. It’s also fundamental to select the best colors to communicate with visitors at an emotional level. In the case of such websites, beige underlines comfort, cosiness, wellness and luxury. It can also combine well with contrasting colors. Thus, it creates a color palette where beige gives a note of simplicity and uniqueness.

The post Beige Color Palette for Websites appeared first on ColibriWP Blog.

]]>
Black Color Palette for Websites https://colibriwp.com/blog/black-color-palettes-websites/ Wed, 14 Aug 2019 11:20:40 +0000 https://colibriwp.com/blog/?p=4138 Black is an elegant color. Even for websites, a black color palette adds a note of gracefulness and high style. That is why, black is for sites of companies that sell high-end products and services, to convey a sense of luxury and expensive price for high quality. Also, black conveys authority, that’s why you should…
Read more

The post Black Color Palette for Websites appeared first on ColibriWP Blog.

]]>
Black is an elegant color. Even for websites, a black color palette adds a note of gracefulness and high style.

That is why, black is for sites of companies that sell high-end products and services, to convey a sense of luxury and expensive price for high quality.

Also, black conveys authority, that’s why you should use it for portfolio websites. It has the role to attract attention over the work of an author having an expert status in their area.

 

In the following lines, we’ll see what black color palettes can do for a website, and how they transmit values through the mere color:

  1. Sklobovskaya’s website

Example of black color palette

 

In this site, the background is a smoky black. It serves to better emphasize the author’s work and impress a style on it. It leaves readers the impression of perfect, irreproachable work that imposes itself through artistry.

  1. Jybh.fr

Elegant black color palette

 

If a plain page like this were to be defined through specific words, these would be: top-notch website, exquisite presentation, clean and clear branding, velvety black. And because of the velvety black, this website arouses curiosity and the desire to find out more. So, direct impact on dwell time on site.

  1. Jack Daniel’s

New black color palette

 

In Jack Daniel’s site, black and, generally dark colors, are favoured. Black color palettes are showing social status, a high stance and a fair treatment of people who enjoy whiskey. The presentation is made in all seriousness, with total respect for high quality and special times when people will drink whiskey.

  1. Publikcoffee

Example of black color palette

 

For Publikcoffee, a black background matches vintage text, in a tone of elegance that’s impossible to pass over. It serves to creating high contrast between background and text, bringing their message front and center, in a unique way: “Quality over Quantity. Community over Corporate. Planet over Profit.” As a consequence, the black color palette serves to assert the café’s values, in plain simple sentences.

  1. Cappen

 

The design of Cappen’s deploys, onto a background color palette: geometric forms, neatness, precision of details and inspired typography. The title animation draws attention towards what’s special about Cappen. The black background cannot but emphasize the power of those words. On top of that, content in the page leaves enough room for the black background to exert its power of expression.

  1. Myblissandbone

 

This website background contains black fern. It’s a wedding website, so the black color palette comes in strikingly, instead of vivid or light colors. The black background has the role to situate events and weddings at a higher level, one of luxury and exquisite decors. So the black used for the fern in the background cannot be but intriguing, inviting to learn more.

  1. Culture Basic Agency

 

This is the website of a creative agency that lets colors go of in favour of a more striking message. And for the message to be well received, it has to be white on black. It also must have appropriate typography than connects the dots between different parts of the presentation. The design using a black background is somehow sober, however, the agency’s presentation goes out of the ordinary with truths and conceptions that promise a lot for new brands.

 

The collection of 7 black color palettes used for websites demonstrates the ability to express values through colors. It’s a powerful tool to use when you want to create outstanding websites, unusual websites and particularly interesting pages. People will be curious about what’s inside those pages, and will be much more attentive to the message you have to convey. One last thing though: use black color palettes carefully. If the message doesn’t live up to users’ expectations, the website will not reach its full potential, but it’ll be just one among other websites.

The post Black Color Palette for Websites appeared first on ColibriWP Blog.

]]>
Blue Green Color Palette for Websites https://colibriwp.com/blog/website-blue-green-color-palette/ Fri, 26 Jul 2019 13:08:02 +0000 https://colibriwp.com/blog/?p=4062   Is a blue green color palette suitable for websites? Who’s said blue and green cannot go together? They’re colors that, with a pinch of creativity, can go a long way in transmitting a website’s personality. Well, it also depends on the blue and green nuances, to make them perfectly match. Blue and green are…
Read more

The post Blue Green Color Palette for Websites appeared first on ColibriWP Blog.

]]>
 

Is a blue green color palette suitable for websites?

Who’s said blue and green cannot go together? They’re colors that, with a pinch of creativity, can go a long way in transmitting a website’s personality. Well, it also depends on the blue and green nuances, to make them perfectly match.

Blue and green are two colors that underline reciprocally each other’s power of expressiveness. You cannot say one takes priority over the other, but they intermingle in a pretty unusual way to give force to an original presentation.

 

Website examples with blue green color palettes

 

We’ll present you a few examples of successful combinations of blue and green, resulting in a blue green color palette just perfect to copy for your own website:

  1. OK BYE

 

blue green color palette

 

The alternance of blue and green capitalizes on water and leaves colors in a natural environment. The richness of green seems to invade the background with water, while water slides into the leaves curtain insidiously. Each of the 2 elements gives the impression of grandeur. On scroll, the prevalence of green is gradually taken over by the water blue and a traditional picture of a swimming pool.

You have to visit yourself the OK Bye site, to see how creativity finds its place in a stunning combination of blue and green.

 

  1. Bright Scout

 

 

In this case, the combination of blue and green refers to a technical presentation. Blue stands for reliability, stability and balance, but also trustworthiness. Green comes as a bold expression of blue, in that it represents transformational directions of design and technology. Green seems to be integrated into a gradient, that perfectly reflects how it “accelerates the speed of innovation”.

 

Throughout the homepage, the same alternance between blue and green is reiterated in different sections, down to the bottom of the page. This means the blue green color palette is a great solution for replicating the brand into the website presentation.

 

  1. Haka Films

 

blue green color palette

 

This is a more complex blue and green color scheme. Additional colors were used in the website, although in a reduced proportion as compared to the 2 dominant colors.

In the Front Page of Haka Films website, the green in a central box has the role of focusing readers’ eyes towards an important element of the presentation. In comparison with the several nuances of green, an electric blue surrounds this box with intriguing color and imagery. Although in small quantities, some brown and some white or grey will ensure the balance between natural green and electric blue: a composite creation.

 

  1. Leafworks

 

 

This presentation is highly artistic and utterly suggestive of the organization’s field of activity: herbal genetics company. The blue green color palette plays heavily upon the subtle choice of tints and nuances, which really make an impression.

In the intro page, green is prevalent, signifying the application area for LeafWorks company. However, some blue underlining the page title slightly suggests where the nucleus of activity is placed (within the company). It seems to counterbalance the unpredictable character of natural elements, when under certain conditions.

 

  1. Akua

 

 

This page presents a combination of green and blue in a color palette that has room for pink and orange, as well. To give liveliness to the presentation, this color combination uses the right proportions inviting to search, research and eventually, purchase.

Green is for the page title text.  So the text presentation approaches the products quality as much as possible. Decorations receive some blue nuances. The intention is to give freshness and authenticity to the presentation of “superfood from the sea”.

 

That is our selection of 5 websites that use the blue and green color palette successfully. They convince users to explore for more. We hope they serve as a good start and some inspiration for your next project, where your unique blue and green website color scheme will impress and impact users.

If you want to start from an appropriately colored WordPress theme and add small customizations to your new website, here’s a list of the 60+ best green WordPress themes.

The post Blue Green Color Palette for Websites appeared first on ColibriWP Blog.

]]>