The name Pantone stands for color. Each year, they choose a color that illustrates the current trends in design, and this year the honor fell to Ultra Violet . We are talking about an intense color with a provocative name that is not commonly used on the web, because of the difficulty you will encounter when you incorporate it into modern designs.
Ultra Violet can be intimidating, but it is also ripe with creative opportunities when it comes to web design. In this article, we will introduce the color, talk about its parent (purple) and its integration into the web design. Then we'll teach you some tips for incorporating Ultra Violet into your directory.
Let's get to work!
- 1 An introduction to the ultra-violet (and what makes the Pantone color of the year)
- 2 The Role of Purple Color in Web Design
- 3 3 tips for using ultra violet in your website designs
- 4 1. Use it with contrasting colors
- 5 2. Implementing gradients as part of your design
- 6 3. Use Ultra Violet as the color of emphasis
- 7 Conclusion
An introduction to the ultra-violet (and what makes the Pantone color of the year)
Ultra Violet is a bold color choice that stands out wherever you use it.
The Pantone Color Institute is a company that advises companies on the colors to use for the identity of their brand and the development of their products. They also engage in what is called "color prediction," essentially predicting the colors that will be in vogue in the immediate future. Each year, they choose a color of the year – in part, a prediction of future design trends.
In recent years, the Pantone Color Institute offers relatively safe bets for its color of the year. Some recent selections include Greenery, Rose Quartz, Serenity and Marsala :
Most of them have a resolutely pastel quality, so the choice of Ultra Violet for the color of the year 2018 was a surprise. It is a rich shade of purple, with very "majestic" qualities. The color itself has been associated with all "mystical" things, and even with the exploration of space. Pantone was also quick to point out Ultra Violet has been a staple of many famous wardrobes, including Prince and David Bowie. In other words, you are in good company if you decide to use color in your designs. Given this, here are the color charts Ultra Violet:
Pantone: 18-3838 or 2096 C
RGB: 101 R, 78 G, 163 B
CMYK: 76 C, 75 M, 0 Y, 0 K
Before you start experimenting, you should keep reading to learn more about the traditional uses of purple in design. In addition, we will also provide some tips on the effective use of Ultra Violet later.
The Role of Purple Color in Web Design
Purple is a rare color in the & # 39; wild & # 39; This same scarcity is perhaps what made it so common when it comes to power symbols. Some examples include Roman magistrates (who wore purple clothes), as did the Byzantine and Roman emperors . Purple and purple are not the same, but when it comes to design, they share many similarities in the way we use them. Take the website BDDI 2018 dedicated to 3D musical experiments by designers and developers:
The site uses a mostly purple background, which is a bold choice that gives it a bohemian look. To keep the content legible, they use contrasting colors such as white (always a safe bet) and fluo green. Whether you use Ultra Violet or a more classic or purple shade, contrast is your friend. This brings us to our next example, Kinsta who uses purple gradients mixed with white for his background:
In this case, the use of purple is more subtle, and the design of the gradient gives the entire page a modern style. Also note how the site changes from purple to white, which indicates to you that you are looking at different sections. Turning to one last example, Divi himself uses purple for many of his user interface (UI). Here is the menu of theme options, for example:
Violet also appears mainly in the Divi Builder:
Overall, the contrast between white and purple makes for a pleasant combination. In addition, it should allow you to find the buttons and elements you need faster since your eye should be attracted to the color. That's not to say, of course, you should avoid all other colors in favor of purple and purple. We recommend instead keeping Ultra Violet in your back pocket for situations where you want to draw attention to a page or item.
3 tips for using ultra violet in your website designs
There are, of course, almost endless ways to use any color in projects. However, these three tips will help you make the most of your choice of bright colors.
1. Use it with contrasting colors
One of the best ways to bring out any color is the contrast. For example, Ultra Purple and Purple face with orange, green, blue and white. Here is an example of a purple element on a blue background, which draws eyes to him:
On the right you can see that there is another purple element – a button, in this case. This brings out the white background button, and it increases the readability of the white SUBMIT text on the top. As we mentioned earlier, we are big fans of purple shades when it comes to Divi. Here is an example of our layout packs that use several shades of purple, which clash with the blue elements to help each other:
The key to using contrast properly is to choose the right colors and to make sure there is a balance in the way you use each one of them. To help you with the first, you can use a color wheel to see what tones you find in front of Ultra Violet.
2. Implementing gradients as part of your design
Gradients are a fun way to add a lot of color to your web designs. They stand out visually and make excellent headers, like the example of Kinsta that we showed you earlier in this article. Here is another presentation of a Divi layout that uses a gradient background with the color purple:
From the functionality point of view, there is not much going on in the screenshot above – the page simply displays a simple contact form. However, using a simple gradient background with a choice of bold colors is enough for the section to appear visually.
Implementing gradients in WordPress can be difficult unless you use the right tool for the job. Divi, for example, allows you to create degraded background overlays for all the modules you use and the elements it contains.
3. Use Ultra Violet as the color of emphasis
Earlier, we talked about the utility of contrast in website design. Accents are a way to use contrast to your advantage, to highlight specific items with colors that are hidden. Take a look at this Divi price table, for example:
Here we use Ultra Violet as an accent color to highlight the plane towards which we want to direct the user. We do not use this color anywhere else on other tables, and it stands out because other tables use more mute tones. Another good example would be this section Contact Us Built with Divi:
Here we have two separate sets of items – contact information, and social media icons. The first is distinguished by the contrast between the white text and the dark background. However, we decided to use an accent color – Ultra Violet, of course – to make social icons even more pop. The obvious choice would have been to use white for those too, but then the four icons would have mixed with the text, which is a boring design choice.
The main conclusion is that accent colors should be bold and take advantage of the benefits of contrast. However, you should limit their use to a handful of items per page maximum, so that they do not blend in with the rest of your design.
There are many colors & # 39; sure & # 39; when it comes to web design, such as white, black, blue and red. People have the habit of seeing them, so you have to use them creatively if you're aiming for the wow factor. With Ultra Violet however, color alone makes a statement, and it helps to jostle your creations.
If you do not know how to incorporate Ultra Violet into your web designs, here are some tips to get you started:
Use it with contrasting colors, such as orange or green.
Implement it as part of a gradient for an elegant effect.
Use it as an accent color on the white backgrounds.
Do you have questions about the use of Ultra Violet in your next web project? Let's talk about it in the comments section below!
Article image thumbnail by AmzhyIttay / shutterstock.com.