BACK TO TOP

25 Beautiful Examples of Purple Websites

Beautiful Examples of Purple Websites

There’s a beautiful line somewhere near the ending of Alice Walker’s Pulitzer Prize-winning novel The Color Purple (later adapted by Steven Spielberg into an epic period drama), in which one of the protagonists, Shug, says “I think it pisses God off if you walk by the color purple in a field somewhere and don’t notice it.” As one of the most complex colors of the spectrum, purple has always been considered a particular treat for the eyes, a splendid, majestic and solemn occurrence in the natural world.

Traditionally perceived as a “royal” color and a symbol of wealth (due to the high costs of producing the purple dye), especially in the Western world, purple conveys a sense of class and opulence. It is also a color of magic and fantasy – you can’t imagine a unicorn in any other color, can you?

Our perception of purple is also conditioned by the fact that this color is actually a combination of red and blue. Each of the colors bring their own character to the mix – red brings passion, energy and enthusiasm, while blue conveys trust, calm and peacefulness.

When talking about the use of purple in web design, it’s important to remember that not all purples are the same. While dark hues can be used to communicate power, authority and wealth, light and pastel purples are more about tenderness, femininity and romance. Still, even if colors do carry certain meanings and create certain psychological effects, that doesn’t mean their use should be carried out according to some strict canon. Just like we saw in our selection of the best pink websites, rules are meant to be questioned and, if it makes sense, broken. After all, colors assume new meanings depending on so many factors – from the context to the way they are combined with other colors and other elements of the layout.

So, let’s take a look at some of the best examples of the use of purple in contemporary web design. Here are the websites we’re going to go through:

Girlgaze

Girlgaze

Girlgaze is a global online community that connects womxn, female-identifying and non-binary creatives with brands and businesses around the globe. It works by offering a platform for the creatives to showcase their work, and connecting them with the world’s top companies, brands and teams. The mission of the platform is to help close the gender gap and to provide visibility and access to opportunities for female-identifying creators that may have so far been denied those chances because of their gender.

The website opens with a split hero section showcasing the featured creatives’ work, with a big logo of the network splashed across. The header marquee is in a pretty lilac shade of purple, and it changes to yellow when hovered upon. The same lilac shade is repeated for one of the buttons linking to inner pages (specifically, the section of the website designated for the business part of the network), and we can also see it in a client logo carousel section of the homepage. This part of the page has a dynamic gradient background, going from yellow to pink to purple, a palette that is repeated throughout the website. The overall character of the website is modern and feminine, smart and witty, and the chromatic complexity of purple is definitely one of the contributing factors to that character.

Badovsky

Badovsky

Alex Badovsky is a Ukrainian designer, branding specialist, art director, photographer and marketing strategist – something of a one-man full-service agency. His work includes collaborations with Vogue, Mondelez, Microsoft and Lenovo, but, according to his own statement, he also enjoys working with smaller companies and up-and-coming brands, helping them shape their identity and strategy from the beginning. Rather than a portfolio (which the designer can send you upon request), the website is a practical one-page display of all the most relevant information about the designer, complete with the links to his various projects. It opens with a purple hero section consisting of just text, followed by a rather weird photograph of Alex Badovsky spitting onto his cat’s head (?), and some more text. The next section is brown, the one following that is green, and the final one is pink. The colors are full, bold and vibrant, slapped together almost haphazardly. There seems to be an intent to shock and provoke the visitor, an impression that is only increased by a semi-hidden sidebar area, with a tacky headline typeface introducing a list of the author’s latest posts. Still, despite this sort of edginess in the way the website is designed, there is charm and wit to it, obviously a testament to the designer’s own character.

Gucci Mascara Hunt

Gucci Mascara Hunt

Gucci is certainly a brand that enjoys innovation, not only in fashion and design, but also in marketing. Their campaigns frequently involve playable or interactive websites, digital content such as AI chatbots, VR and AR, and they are basically the masters of digital storytelling. One fine example of the luxury fashion company’s game-based marketing is the Gucci Mascara Hunt, advertising a new mascara called L’Obscur. The game is a combination of bowling and minigolf, and has the goal of collecting as many mascaras as possible, while avoiding the obstacles. All the elements in the game are 3D objects in soft, pastel colors, primarily pink and purple, with a sort of holographic effect. The background is a pink and purple gradient and the overall aesthetics give off a “retro Barbie mansion set in outer space” vibe. The game is simple yet addictive, and it does make you crave those mascaras, which just further proves the creative genius of the brand’s marketing department.

Re:Store

Re:Store

With an unprecedented rise of online shopping came what some have dubbed a “retail apocalypse” – the decline of brick-and-mortar shops, and especially department stores. While online shopping is all well and good, many of the so-called “Instagram brands” would certainly appreciate having a place to physically display and sell their products. That’s where Re:Store comes in. It offers young, often fledgling brands a spot on a community retail floor – like a department store, but in a decisively Gen Z vein, and with much lower rent.

The design of the website is appropriately contemporary and very 2k20 – the gradient background, animated menu opener, oversized ‘90s-style cursor and so on. The gradient is mostly purple, ranging from a lilac shade, through bluish purple to a soft powdery pink. It’s a combination that is at the same time tender and urban, romantic and edgy. The purple, in combination with a light apricot and creampuff beige, has a Mattel-like effect, not so much for a Barbie dreamhouse as for her edgy cousin’s shared loft in Portland.

Midwam

Midwam

Midwam is an experience design company from Saudi Arabia, dedicated to providing their clients with immersive experiences based on three basic drivers of human behavior – desire, emotion and knowledge. The interactive website is a journey through the phases of human experience and the points on the human body where they are formed, following along a 3D figure of a man bathed in colors resembling those of the traditional chakras – bright yellow and orange, fiery red, blue and green. The environment for this journey is a simple dark purple background, almost black, balanced off by interface elements that are either white or a deep orange hue resembling brass or even gold. It is an elegant, elaborate display of the company’s mission and philosophy, complete with actual examples of their permanent, virtual and popup projects.

Graustufen

Graustufen

Graustufen Podcast is a German-language audio magazine dedicated to design, culture and society. Rather than in episodes, it is structured in issues, each dedicated to a specific topic that is discussed with various guests from different creative backgrounds. The website is quite minimalist, with a strong brutalist vein, both in the layout structure and in the color scheme. It is divided into two vertical sections or panels and features a very reduced color scheme of purple and grayscale (in fact, in German, “graustufen” means precisely that – grayscale). The left panel, with purple background, serves as a menu whose items, when clicked, roll in the appropriate section in the panel on the right. The website has a distinct magazine quality to it, with the left purple panel serving as a sort of cover, and the right panel as the pages one can flip through, albeit vertically. In addition to the smart, clean design, the podcast is also known in the design circles for exquisite portraits of featured guests.

Purple WordPress Themes
Foton Banner
Foton

Software and App Landing Page Theme

Gluck Banner
Glück

Digital Agency Theme

Overworld banner
Overworld

eSports and Gaming Theme

Plus

Plus

Plus is an innovative brand of personal care products, specifically body washes, created to reduce the impact on hygienic products on the environment. It is made of literally zero plastics, packed in a dissolvable sachet, and with no water content whatsoever. The branding for this product, especially the website, has been done extremely well. Instead of adopting the usual “green” aesthetics replete with imagery of plants, clouds and the ocean, Plus opted for a daring palette based on light purple and red, a very stylish color pairing these days. The hero image pictures the brand’s signature dissolvable sachet in purplish water, with something of a tie-dye effect. The button, the typography, the marquee and the interface outlines are red and the rest is a big splash of beautiful light purple. As we proceed further down the page, we encounter several instances of blue, another amazing color pairing, and one that completes the circle perfectly – after all, purple is made by combining red and blue. These three colors come together to create a palette that is dynamic but gentle, lively and smart, and definitely daring, just like a brand that saves water and doesn’t use plastics should be.

Pluto

Pluto

Pluto is an XR project aiming to allow users to connect and interact with each other regardless of their location and device, across VR and wearable and mobile AR. This may sound like a word salad for anyone outside the XR aficionado circles, but the concept is actually quite simple. Non-PC virtual and augmented reality currently lacks the PC’s broad spectrum of capabilities. Pluto aims to bridge that gap by developing an app for cross-device, cross-reality interaction. So far, the app is focused on the gaming XR experience, but it plans to move beyond that realm in the near future.

The website is a combination of a dark, deep space-like background, clean, geometrical grid lines and pink-purple-blue color gradients. It is a fitting vibe for an app that aims to transcend the boundaries of physical realms and push the limits of computing. Everything is here – technology, 1980’s computer aesthetics, modern notions about layout design, top-notch UX, animation and 3D art.

Lēonard Agency

Lēonard Agency

Lēonard Agency is a French agency that places a particular accent on the fact it’s not a creative but an inventive agency. In fact, their website, which is also nothing short of inventive, is all about demonstrating that point, while also explaining the basics of the agency philosophy and methodology. The website is actually a game, in which the visitor goes through levels and unlocks knowledge rewards. The interactive design, the animation, the aesthetics – the agency managed to take each of these aspects to perfection. The website tells a compelling story, maintains a healthy level of mystery around the agency and delights the visitor with refined illustrations, exquisite animations and unconventional navigation.

While the palette is not necessarily based on purple, a lovely, coldish shade of lilac is one of the main colors, together with some warmer hues of pink, orange and yellow. The gradient passage between these colors is soft, almost ethereal. The colors also move around the screen but in such a discrete way it’s almost imperceptible. A lot of movement on the pages is scroll-initiated, but the color transitions take place on their own, which makes a lovely detail.

Blobmixer

Blobmixer

Blobmixer is a virtual toy developed by the 14islands studio from Sweden. It is a delightful, fun project that allows users to create their own 3D art, to download it and share it with others. The inspiration for the blob-like shape that serves as the starting point are islands, which are never perfect, never flat or smooth, but always and forever shaped by the persistent force of the ocean surrounding them. The interface is extremely simple and user-friendly and the blob-making process has quite a meditative quality to it.

The main color motif is a vibrant violet, which is the default background color, and various hues of purple – mauve, wisteria, plum, magenta, lavender – are featured prominently both in the displayed works and in the dynamically changing gallery background. Selected blobs are displayed on a slider with typography that twists around itself as the user scrolls past. The blobs take turns one after the other like on a runway and the backgrounds melt into each other in this fun, unique and delightful display of digital tech and creativity.

Wonderland

Wonderland

Wonderland is another experience design studio, specializing in brand experience, digital design, content production and technology. This award-winning agency has offices in Amsterdam and Los Angeles, employees from 12 nationalities and has been independently owned since 2016 when it was first founded. The common trap of many agencies from this niche is trying too hard with the website design, and the result is often over-the-top, hard to navigate, resource-demanding and overall impractical. Wonderland did a lovely job with their website, creating a beautiful, elegant, straightforward design that still showcases their contemporary spirit and design innovation.

The background is a gorgeous, sophisticated shade of deep burgundy purple melting into brown, contrasted by soft beige typography. The hero section features iridescent geometric bodies – prisms, cylinders and spheres in violet and warm yellow, some of which are animated, tastefully demonstrating the agency’s design skills. As we scroll down, the background turns darker, assuming the deepest shade of purple, bordering with black. The palette is masterfully balanced and represents an excellent showcase of the potential of the darker end of the purple shade range.

Jam 3 – FWA 100

Jam 3 – FWA 100

Jam3 – FWA 100 is a project the Jam3 design agency created to celebrate their 100th FWA win. The website is an interactive storytelling journey from the past, through the present, to the future. With a design based around 3D objects and gradient coloring, it bears a certain retro-futurist quality. The palette is a gentle, modern one, based around the color gradient of pink, blue and violet, but in tones that guarantee the overall design never slips into sugary or girly. The violet shade of purple communicates tenderness and a hint of magic, and the warmer tones give off a sense of energy and creative passion. A touch of texture gives the colors additional vitality and, together with the 3D objects and interactive animations, gives the overall design a fluid, soft character.

Fan Study By Spotify

Fan Study by Spotify

Spotify for Artists is a lesser-known feature of the popular streaming service, a free addon designed for musicians and creators in order to help them improve their presence on the platform. In addition to analytics tools, advertising recommendations and profile customization options, it also includes a terrific resource called Fan Study. It is an actual, literal study of millions of data points, uncovering a number of vital insights (including reach, engagement, release, merch, and more) that can help musicians grow their fanbase and get closer to their goals.

The website opens with a hero section with large typography stating the project’s slogan – Fans Make It Possible. The background is a beautiful deep purple tint while the typography, as well as the interface elements like separators, links and icons, are in a vibrant coral red. The two colors make a gorgeous pairing – the purple tones down the coral and provides a beautiful contrast, and the coral brings out the passionate red component from the purple. As we scroll down, the palette changes so we have dark purple on a background that goes from blue, to red, to yellow and green, ending with a dark, velvety purple footer. The website is extremely well designed, presenting the information in a clear, systematic way, while remaining visually engaging.

Bloomers

Bloomers

To close our list of the websites that make excellent, innovative use of purple, we bring you Bloomers, a branding consultancy agency from Sao Paulo. The agency website places a particular focus on the unique approach to the services – to build a world that comes after the future, one needs to reach back, research and investigate the past. This approach is visible right from the start, as the website opens with a beautiful vintage photograph of a 19th century beach scene. The rest of the website is also peppered with vintage imagery and illustrations, which are, logically, monochromatic. However, the site is far from colorless. In fact, the color that absolutely dominates the design is a lovely, vibrant shade of violet. It first appears in the agency logo, in huge typography at the top of the website, then as one of the background colors, alongside black and a silvery grey, as well as in icons, navigation links and text. This particular hue fits amazingly well with the silvery grey used for some of the typography and gives the design a bit of a retro touch.

Digital Design Days

Digital Design Days

Digital Design Days (DDD) is a global meeting point of the international digital design industry. Founded in 2016, the conference takes place in Milan, Italy and gathers the very best professionals working in digital design, digital strategy, VR, data visualisation, experiential marketing, digital storytelling and many, many other areas of the digital creative industry. For the Re-Start edition of the conference, DDD opted for a vibrant, optimistic design based on violet and turquoise. The homepage is dominated by a floating, segmented 3D object in turquoise, which can be rotated, along with the space it’s suspended in, by moving the mouse around. As we scroll down, the background – and the floating object – burst into a myriad of violet and turquoise fragments, revealing further information, in this particular case – the postponement of live conferences. The palette is now inverted – what was dark in the initial section is now light, but violet and turquoise remain in interface elements and details. Even the photographs of conference participants have a turquoise overlay. In fact, the only color outside of the palette of violet, turquoise, black and off-white is the yellow PayPal button. With such chromatic balance and symmetry, as well as plenty of breathable space in the layouts, the designers created a functional, modern, practical website that resists the urge to show off, an ailment that so often afflicts the digital design niche.

The Field: A VR Experience by WSJ Custom Events

The Field

The Field is the WSJ Custom Events’ first ever VR experience for the Future of Everything Festival. As per the explanation on the website, The Field is at the same time “a destination and a launch pad,” meaning the visitor can linger in the vacuum, encountering other instances of cosmic matter (as we ourselves are) or embark on a journey along two separate narratives, one about the COVID-19 pandemic and its impact and the other on meditation and its effects. The journey can be experienced on desktop and in VR.

The landing page opens with the title of the project in electric typography, suspended in space with tiny floating particles. The purple, or better yet, violet color is featured in the lettering itself, in buttons and the menu opener. After choosing the experience (desktop or VR), the color blends into a cosmic nebula that the user can move around and zoom in on, while the cursor leaves a fine dusty trail of star matter as it is moved around the screen. As we further navigate the website, choosing a narrative to follow, the violet color remains with us in navigational arrows, text and other interface elements. As the color on one end of the visible spectrum, violet is a fitting choice for a project visually set in a cosmic, meta-physical domain.

Zoox

Zoox

Zoox is a mobility-as-service platform, offering more than just a vehicle and more than just a transportation service. With a fleet of vehicles designed for intense urban traffic, Zoox takes care of maintenance, charging (since it’s an electric, environmentally friendly vehicle), as well as actual driving. Speaking of driving, Zoox develops autonomous or driverless vehicles, equipped with cameras, lidars and radars, with a super-comfortable interior and all the amenities one could expect from such a vehicle. We learn all this from a modern, informative and dynamic company website that introduces the Zoox vehicle in a manner that has something of a Blade Runner vibe to it. The vehicle itself is cute and sort of chubby, but the neon lights on dark background and metallic reflections in purple, pink and blue give it an edgy, futuristic character. Still, there’s actually nothing dystopian about the Zoox branding. The design instills a sense of security, trust and optimism as it introduces an innovation that could not only make riders’ lives easier but, more importantly, could actually do something good for the planet.

Fingerspelling

Fingerspelling

Fingerspelling is a terrific interactive website dedicated to teaching people the American Sign Language alphabet using machine learning. The website connects to your webcam and shows you sign language gestures while controlling the accuracy of your own gestures. It is divided into four difficulty levels and it’s actually an excellent didactic tool for mastering the basics of ASL. What’s also important, the creators of the website (the American Society for Deaf Children and the Hello Monday agency) promise that all the information, such as your webcam recordings, are processed and stored locally and not shared with third parties.

The website is simple and functional, without any bells and whistles, which makes sense, given its practical nature. It is basically a single purple page with yellow typography, a button and an animated hand performing ASL gestures. As you enter the game, the color scheme switches so now we have a yellow background with purple typography. Then, when you pick the hand you want to use, it goes back to purple for the level selection page, and then to yellow again. The two colors keep switching as you navigate the website and, being complementary colors, lend it a character that is balanced and vibrant at the same time.

Recess

Recess

Recess is a line of canned soft drinks created with the purpose of helping people cope with the stressful times we live in and everyday tensions we are facing. The intended effect is to make people feel “calm, cool, collected,” something that all of us could certainly appreciate these days. The line of beverages, based on hemp extract, magnesium, adaptogens and electrolytes, is beautifully designed, with bright matte cans in predominantly pastel colors. The design is reflected on the company website, featuring – you guessed it – a pastel gradient background sprinkled with soft, calming clouds. In addition to being one of the dominant colors on the gradient spectrum, the soft, light purple can be found in side areas that open when you click on the Shop and Cart links, as well as on the buttons. To an extent, it can be considered the website’s theme color, and a carefully chosen one too, considering this particular shade of purple stands for serenity, calm and tenderness.

Le Voyage Azarien

Le Voyage Azarien

Le Voyage Azarien (The Azarian Journey) is a beautiful, poetic project of Joseph Azar, a creative coder and developer from France. The project was born from the author’s meditations in nature, especially his observation of trees, their structure and behavior. Azar had recently bought a device with an in-built LiDAR sensor, which allowed him insight into mesh and cloud points of the objects he scanned, in this particular case – the trees. The result can truly be best described as a “voyage,” offered as either a storytelling or an interactive experience of what the author learned from observing the trees.

The website opens with a preloader shaped like a tender, outlined oak tree, which soon transforms into a magical mass of specs of light, glimmering and forming the shape of a tree and its surroundings, suspended in a dark purple environment. The navigational elements are in a lighter, lilac shade, providing just enough of contrast to the dark sky and even darker water of the animated environment. The tree branches, the moss on the trunk, the grass, the water – they all have a certain magical quality to them, due to the fact they are made up of specs of light that shimmer and dance around each other like atoms, and additional specs, resembling fireflies, only add to the poetic character of the entire scene.

The website also provides information about the technical aspects of the project, which can be of great interest to those with a coding and digital design background. It is a well-rounded and quite impressive project.

Let Girls Dream

Let Girls Dream

Let Girls Dream is a wonderful, inspiring project created to accompany the short animated movie Sitara, telling the story of a young girl in 1970s Lahore whose dreams of becoming a pilot are shattered when she is married off by her father. The film, and the accompanying project, aim to empower girls and women across the globe to share and pursue their dreams and visions, building a collective narrative towards a more gender-equal future. The campaign was created by Gucci in collaboration with the Chime for Change foundation.

The website opens with a subtle white preloader with a paper plane icon on a purple background. After it loads, we are invited to start the experience, which takes us – or, rather, flies us off – to a gorgeous purple sky with fluffy clouds, with a beautiful, poetic message about the importance of dreams. After this initial sequence, we can learn more about the project, about the movie Sitara, and we can even share our own dreams. A deep bluish-purple sky is sprinkled with stars, each standing for one dreamer’s story. The night sky can be rotated in almost all directions, inviting us to hop from one star to another and, hopefully, get inspired to share our own dreams. The designers made a great choice when they opted for purple – it’s a color associated with strong femininity, with pride, wisdom and creativity. A perfect choice to color a girl’s dream.

WeCargo

WeCargo

WeCargo was a 2019 conference dedicated to the global air cargo community. It was organized by the Liege Airport and Leansquare, and took place at Liege Airport in Belgium, with events that included talks, hackathons and panels on all issues related to air cargo freight and cargo airports. For the conference website, the designer decided to go with a dark but modern mood, with a deep bluish-purple background with various shades of blue, and something of a scanner effect, which is an apt choice for an event dealing with air freight. The typography and interface elements are predominantly white, with light blue details, and there’s a fluid distorting effect on mouse movement, giving the design a very modern touch but not disturbing the user experience. The overall mood of the design communicates professionalism, and the palette brings forth a sense of innovation and creativity.

Flavedo & Albedo

Flavedo & Albedo

Flavedo & Albedo is a brand by and for those who love makeup and hate plastics. Recognizing the fact that the makeup industry is one of the major contributors to the global plastic waste, as most of the lids, containers and pumps used for makeup cannot be recycled, this Australian company vowed to create a makeup brand that is 100% plastics-free.

The website opens with a split hero slider, with one dynamic and one static side. The purple is instantly recognized as the leitmotif here – the static part of the slider with text and a CTA is in a gorgeous pale cornflower hue, while the same (or similar) light shade of purple can be found in various details on almost every image on the website. In fact, the brand seems to have a predilection for this color as it can be found on the packaging of many products – not to mention there is an eyeliner and an eyeshadow in the same color. It is also featured as a hover color on buttons and blog list items, as well as on the website’s favicon. This light purple matches beautifully with the website’s bright and airy design based primarily on light beige and white, peppered with occasional bold colors.

Trolli – The Deliciously Dark Escape

Trolli - The Deliciously Dark Escape

Trolli, the famous German brand of gummy worms and sour bears, makes gaming a big and important part of its branding. In addition to special packaging released for an Xbox anniversary and a League Trolly community on Challonge, the company also designed an online mini-game called The Deliciously Dark Escape, in which the player is supposed to help the worms get eaten, or, as they put it, help them “die a glorious death from a giant byte mouth.”

The mini-game is designed in a classical arcade style, deliberately pixelated and set inside a “web,” a dark, neon-bathed place with pink and purple touches. In fact, purple is the color of choice for the entire Trolli Gaming line, adding a touch of 1980’s nostalgia, when all we cared about was chewing candy and breaking a friend’s record on that old arcade machine. Trolli doesn’t push the nostalgia card too far, thankfully. Their aesthetics is defined by the fact they produce gummy worms, after all, so the purple and pink palette is topped off by a generous amount of sugar and lots of humor.

Motley Crowd

Motley Crowd

A joint project from Hello Monday, Dogstudio and Set Snail, Motley Crowd represents an effort to create immersive virtual events in a time when the way people come together and experience creative work and entertainment has drastically changed. Moving well past live streaming and social media events, the collective reinvents the possibilities of both hosting and experiencing events in the digital age.

The website is in a predominantly purple palette, with deep royal purple for the background and lighter shades for interface details, such as buttons, navigation arrows, underlines and links. The main motif on the homepage is an animated object vaguely resembling a zoetrope (which is a fitting inspiration that connects the earliest form of cinema with post-digital technological efforts) that can be moved around and explored in detail. The interactive 3D design creates an immersive viewing experience and an illusion of “being there” in a physical space, ideal for attending virtual events that basically lack that precise element – being physically present at a show, a lecture or a play.

Closing Words

Purple was not always a popular choice of color in web design. However, in recent years, more and more designers opt for this versatile color, recognizing its potential both as a main and as an accent color. This rising trend has brought forth some truly stunning creations, some of which we talked about in this article.

From tech and business through branding and advertising all the way to design, culture and arts, purple is obviously a color that can easily find its place in web design. It comes in an incredibly wide range of shades and tints, and combines wonderfully with other colors of the spectrum. Thanks to this, purple is by no means an aggressive or loud color, as some might think. In fact, depending on how it’s used and combined, it can be a neutral, safe color, one that adds levity and airiness to a design. On the other hand, of course, it can also be quite bold, electrifying even. However it is used, purple is always a color that brings sophistication and class to a design.

Post your comment

Comments0