Swift Decor was born to simplify decorating. Our motto is to offer simple and beautiful design swiftly, hence our name "Swift". When we started building our website our content and functionality was a no brainer, yet we had no idea how to choose the colors for the site.

We had a sense of what we were looking for in the aesthetics of the site. We wanted to emote soft airy feelings; relaxed yet modern and of course a great color palette. Our products are inspired by beautiful Design, so the question is how can we sell “design products” if the website lacks design on its own? This was definitely a concern and with such a large array of colors and combinations we didn’t know where to start.

Back in January, we visited 2016 Pantone’s Design Exhibition in Atlanta. We loved everything in the exhibition. The colors were balanced and coordinated, so trendy and sophisticated. What could we do to bring this feeling to our site? And there it was… our color eureka moment! We decided to use the 2016 Pantone Color of the Year Palette as the color scheme of our website. Our best decision ever!

When you have an online business you are constantly checking your site. Pretty much all day every day, so we wanted to use a group of colors that would inspire us rather than bore us. At the Pantone exhibition we watched the video of how Pantone selected these colors. We were in love with the message of the video. 

The color description is flawless, its exactly what we were looking for.... “For the first time Pantone introduces two shades, Rose Quartz and Serenity as the PANTONE Color of the Year 2016. Rose Quartz is a persuasive yet gentle tone that conveys compassion and a sense of composure. Serenity is weightless and airy, like the expanse of the blue sky above us, bringing feelings of respite and relaxation even in turbulent times.” 

Rose Quartz and Serenity were the first two colors on our list. We choose colors that would express our feelings and ideas about our brand. Since we didn't know exactly how many colors we needed, we selected 12. It sounds like too many colors (I thought so too) but in the long run, it’s better to have extra options.

These 12 colors would cover all the website basics such as banners, buttons, backgrounds and text.  Having few colors would restrict our design aesthetic. Too many colors would make the site look disjointed so 12 seemed like a perfect balance. So far we have used 10 of our original color selection.

We choose cool tones in blues, greens and grays to keep the site neutral yet trendy. Also adding warm and playful colors to keep the palette interesting. Since, we wanted to keep it as simple as possible, we selected 2 shades of the same color akin. We selected Rose Quartz & Malaga, Arctic Ice & Navy Blue and Opal Blue & Arctic. Every color option had a second tone in the equivalent palette. Also, we added two more vibrant colors for contrast, Blooming Dahlia (a coral tone) and Cream Gold (a bright yellow). 

To tally up our color selections we had a set of three shades of grey (not fifty), two tones of green, three tones of blue, two tones of red including Rose Quartz (if you count it as a light shade of red), a coral/orange tone and a yellow tone.

To incorporate the exact color into our site we needed to find the hex color number. There is a great tool called color-hex it gives you the color reference number in different formats (RGB, HSL, HSV, CMYK etc) ensuring the colors are the exact match we selected from Pantone.

The colors selected we carry throughout our marketing, emails, graphics etc. When creating marketing materials and graphics the hex number is extremely important in programs such as photoshop, mailchimp, privy, shopify theme customization etc. We basically branded our entire company based on these colors.

We printed this color palette with the hex numbers as a reference guide. We do the same process of printing a color palette when curating our Designer-In-A-Box collections. Having a color reference guide allows us to easily check contrast and combination. We continue to use this chart for easy reference across different online platforms.

Now that we had selected the color palette, it was time to decide what to do with the colors and where to use them. For our website menu we wanted a calm and relaxing color. Mostly so we wouldn’t get tired of looking at it and also to give our site visitors a feeling of openness and welcoming. 

Opal blue was the one, light enough to be calm, airy and welcoming. The color adds enough tone to be used in the background while using white text in our main menu options.

At times the color looks blueish and some other days it looks greenish.  It depends on your mood and the color complexity represents the artistic vision of our brand. We just can’t get enough of this color! 

(Here is a great guide on Psychological properties of colors). Additionally, we use it as a background color in several pages, the color goes well with white text yet darker text also stands out. 

The clickable buttons need to say “I’m here, click me”, Navy Blue was perfect for this as it inspires trust.

Our site features a hovering color- change on our buttons. We use Blooming Dahlia as an accenting feeling communicating “I’m exciting too, I will take you to a great page.”  

To keep the interactive colors flowing in the main page, we applied to the banner's scroll dots. We want to encourage our site visitors to scroll through our banner. Blooming Dahlia adds cohesiveness to the visitor interaction while accenting the scroll motion.

For the Signup tab, Shopping Cart and hover-over buttons we wanted a color to be visible and give a pop against the background. We choose Cream Gold. Having the same color on distinct site features gives uniformity to the clicking motion. 

For the “Check this out first” Malaga was selected as our alert color.  

It is also the color in the hover-over interaction for all thread links. In the case of our thread links we notice our text was too thin and Malaga will make the readability stand out against black text and our white site background. 

Volcanic Glass is the darker shade of gray we selected thus making it an easy choice for the footer. The color gives the footer weight at the bottom to continue our white text theme throughout the site. Although it is a medium-dark tone, it does give room to the Navy Blue button to be visible. We use this grey as the main color in our “learn more” icons and in specific titles.

Our checkout page needed a different background than our main page. Using contrast while browsing through a site's pages resets and refreshes the visitors mind set.  Cloud Dancer, a light grey was the perfect background tone in our checkout page. While being almost unnoticeable it gives the checkout box the perfect amount of brightness. Additionally, it matches perfectly with the Opal Blue in the checkout panel.

Puritan Grey; the medium grey on our palette made it to our accordion panels in our product page. Why? We don’t know, but for some weird reason this medium tone gray goes well anywhere!

On our front page we use Arctic Ice as a background accent. This light bluish-lilac grey pairs nicely with Navy blue. At one point we wanted to use Serenity, but the contrast was too rugged. We are happy with Artic Ice it embodies our contemporary feel to the site.

Last but not least, Rose Quartz “persuasive yet gentle”. We selected the color of the year to highlight the background for our social media feeds. Rose Quartz gives the content the spark it deserves yet “gentle” enough to contrast against grey text. We hope Rose Quartz is “persuasive” enough to give us more followings and blog shares, too!

Finally, Serenity and Arctic (the remaining colors in our palette) are in our future plans for our website. As I said before, we haven’t used them yet, soon enough you will see them up somewhere in our pages.

So what is our biggest lesson from the Pantone Website Project? 

Selecting a color palette for any website is a MUST! Why? 

First, it makes the aesthetic of the web experience more appealing for your customers. 

Second, It gives your site a professional finish without the fee of a professional. 

Third, it will save you time in the long run. Every time you are updating content, creating ads and printing marketing material, there is no wasting time thinking about what color should you use.  

And last but not least, color allows you to communicate with your customers in a subtle manner; once you select a palette your branding is cohesive.

This project was definitively a web design eye opening experience. After seeing the results, I feel more confident on our current and future aesthetic vision not only in our website but in our branding.

I want to hear from you, submit your comments below and if this post was helpful to your website designing project please share!

Swift Décor is an online interior décor retailer. We make decorating convenient and affordable. Decorate like a pro with our sets including the most needed essentials to turn your living room into a professionally designed space. All pieces have been masterfully placed together by a team of designers to maximize your existing furniture. All items come together in ONE box and delivered to your doorstep. Check out our collections here!