{"id":7020,"date":"2023-01-16T18:55:26","date_gmt":"2023-01-16T18:55:26","guid":{"rendered":"https:\/\/scallent.com\/posts\/web-design-color-trends-for-2023\/"},"modified":"2023-04-17T13:47:16","modified_gmt":"2023-04-17T13:47:16","slug":"web-design-color-trends-for-2023","status":"publish","type":"post","link":"https:\/\/scallent.com\/en\/posts\/web-design-color-trends-for-2023\/","title":{"rendered":"Web design: color trends for 2023"},"content":{"rendered":"
[vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column width=”1\/4″ column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_spacing=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ tablet_width_inherit=”default” tablet_text_alignment=”default” phone_text_alignment=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid” offset=”vc_hidden-xs”][vc_single_image image=”6761″ alignment=”center”][vc_column_text]<\/p>\n
[\/vc_column_text][\/vc_column][vc_column width=”3\/4″ column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_spacing=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ tablet_width_inherit=”default” tablet_text_alignment=”default” phone_text_alignment=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid” offset=”vc_hidden-xs”][vc_column_text]With each new year that begins there is always the expectation of what will be the new concepts and trends, whether for fashion, for design, for decoration and even when it comes to consumer behavior.<\/p>\n
With the expressive growth of the digital market, the great world forecasts could not be missing when it comes to news and innovations for this area as well.<\/p>\n
Therefore, for those who work with the Web universe, stay tuned to the color trends for the year 2023.[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column width=”1\/4″ column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_spacing=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ tablet_width_inherit=”default” tablet_text_alignment=”default” phone_text_alignment=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid” offset=”vc_hidden-lg vc_hidden-md vc_hidden-sm”][vc_single_image image=”6761″ alignment=”center”][vc_column_text]<\/p>\n
[\/vc_column_text][\/vc_column][vc_column width=”3\/4″ column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_spacing=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ tablet_width_inherit=”default” tablet_text_alignment=”default” phone_text_alignment=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid” offset=”vc_hidden-lg vc_hidden-md vc_hidden-sm”][vc_column_text]With each new year that begins there is always the expectation of what will be the new concepts and trends, whether for fashion, for design, for decoration and even when it comes to consumer behavior.<\/p>\n
With the expressive growth of the digital market, the great world forecasts could not be missing when it comes to news and innovations for this area as well.<\/p>\n
Therefore, for those who work with the Web universe, stay tuned to the color trends for the year 2023.[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_spacing=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ tablet_width_inherit=”default” tablet_text_alignment=”default” phone_text_alignment=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text]<\/p>\n
[\/vc_column_text][vc_column_text]Once trends were only directed at Fashion and were dictated by large research companies such as WGSN and Pantone. From the runways to the shop windows, then to the streets, these were the environments where the adherence to the trends dictated each year could be confirmed. Nowadays, and especially after the COVID-19 pandemic, these trends had to be adapted to the digital universe as well, as major brands in the retail and footwear sectors needed to extend their operations into this new habitat. What consumers see in shop windows and runways must be coherent with what they see on the websites and e-commerce of these same brands, so the choice of look and colors cannot just follow trends, but be part of an entire concept and visual language of each brand.<\/p>\n
With this change of scenery, it is essential to keep in mind the importance and impact that colors have on a digital project, be it a website, a blog, or an application.<\/p>\n
\nThe first reading made by users is done in the first 90 seconds of exposure and 90% of the result of this reading is impacted by color.<\/strong><\/p>\n<\/blockquote>\n
So, besides knowing what colors are trending, it is essential to understand how to use them. Let’s get to it?[\/vc_column_text][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n
What is the color of the year for 2023 elected by Pantone?<\/strong><\/h2>\n
The PANTONE\u00ae brand was created by Pantone Inc. based in the USA and considered the world’s color authority for having created, in 1967, a standard language for communication and color management, from the designer to the final consumer. The Viva-Magenta<\/strong> shade is chosen as the color of the year for 2023, which brings with it a matching color palette called Magentaverse – a name that already makes clear the strong influence of the digital universe. On the brand’s official website, the color is described as brave, fearless, and pulsating, whose exuberance promotes joy and an optimistic celebration, writing a new narrative.<\/p>\n
According to Leatrice Eiseman, Executive Director of the brand:<\/p>\n
\n“In the age of technology, we seek to design inspired by nature and what is real. PANTONE 18-1750 Viva Magenta, is inspired by the red of the cochineal, one of the most precious dyes belonging to the natural dyes family and also one of the strongest and brightest the world has ever known. The color reconnects us to what really matters, invoking the forces of nature and helping us build our inner strength.”<\/strong><\/p>\n<\/blockquote>\n
The website’s homepage<\/a> welcomes Viva Magenta, the color of 2023, and shows the Magentaverse palette with the color codes chosen by Pantone.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_single_image image=”6765″ img_size=”large” alignment=”center”][vc_single_image image=”6767″ img_size=”large” alignment=”center”][\/vc_column_inner][\/vc_row_inner][vc_column_text]<\/p>\n
Source: Pantone<\/strong><\/h6>\n
[\/vc_column_text][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n
Digital Lavender – WGSN’s 2023 Trend Color<\/strong><\/h2>\n
The global authority in forecasting consumer trends, WGSN, has also chosen a color to represent the year 2023 and the connection with technology is already explicit in the name: Digital Lavender. Founded in 1998 in West London, the company develops in-depth research that includes data curation, global analysis producing stories and tools needed to understand the public’s behavior.<\/p>\n
\n“Digital Lavender is a gender-inclusive color already established in the youth market and this is expected to expand to all fashion categories by 2023. The synesthetic aspect of this color makes it ideal for self-care rituals, therapeutic practices and wellness products.” Reports the company, which developed the color through Coloro, a system designed for creating and executing color patterns with complete confidence. In addition to dictating fashion and behavioral trends, WGSN also guides the digital market and indicates color “for electronics, digital wellness, quality of life-oriented lighting and housewares.”<\/strong><\/p>\n<\/blockquote>\n
With information overload and digitalization on the rise, both companies indicate colors that point to a counter movement, bringing stability and balance. For them, the trend colors of 2023 promise to converge the physical and virtual worlds, connecting users to well-being and bringing strength and mental health.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_single_image image=”6769″ img_size=”large” alignment=”center”][vc_column_text]<\/p>\n
Source: WGSN<\/strong><\/h6>\n
[\/vc_column_text][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n
Other colors that WGSN points as a trend for 2023<\/strong><\/h2>\n
In addition to the main one, Digital Lavender<\/strong>, WGSN indicates 4 other colors that represent the new moment that the world will live in 2023, after 3 years of imposition and detachment: Astro Dust<\/strong>, Galactic Cobalt<\/strong>, Sage Leaf<\/strong> and Apricot Crush<\/strong>. To watch the video launching the colors and learn more about each one of them, just click here<\/a>.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_single_image image=”6771″ img_size=”large” alignment=”center”][vc_column_text]<\/p>\n
Source: WGSN<\/strong><\/h6>\n
[\/vc_column_text][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n
Before choosing colors, what should be taken into consideration?<\/h3>\n
Speaking specifically about the digital universe, when choosing the colors that will be used in a project, it is essential to consider some important points:<\/p>\n
Understanding<\/strong><\/h3>\n
What is the point of applying the most amazing colors of 2023 if the user cannot understand the message that the brand is conveying? Legibility, accessibility and adaptability are the key words to have a good digital performance.<\/p>\n
\n
- Readability<\/strong> – right level of contrast between background and text;<\/li>\n
- Accessibility<\/strong> – in addition to colors, it is essential to remember that there are those who simply cannot see the colors and therefore must have access to the voiceover;<\/li>\n
- Adaptability<\/strong> – night mode, saturation level, and brightness also influence comprehension and demonstrate an important care for users.To know if you are on the right track, there are several tools that allow you to test if the colors you are using provide good readability to users. Here are some sites:<\/li>\n<\/ol>\n
\n
- https:\/\/abc.useallfive.com\/<\/a> – quickly tests contrasts. Just enter the color codes and it generates the contrast and overlap results.<\/li>\n
- https:\/\/colorable.jxnblk.com\/<\/a> – a tool that can be used to increase the readability of texts with high contrast colors.
\nhttps:\/\/<\/li>\n- www.colororacle.org\/<\/a> – extension available for Mac and Windows that shows in real time what visually impaired people will see.<\/li>\n<\/ul>\n
Brand Consistency<\/strong><\/h3>\n
Following a brand style guide is fundamental to have consistency in communication. As much as the color trend of 2023<\/strong> is Viva Magenta<\/strong>, you shouldn’t simply change the color of your website or app because of that, knowing that your brand has green as its main color, for example. Using a distinct communication at different communication points can create confusion, frustration, and even convey instability. Imagine a user wondering if they are really on the brand’s official website precisely because, upon entering, they do not immediately see the visual language they are used to seeing? Quick identification is fundamental to generate connection and keep the user active and close.<\/p>\n
A good example of communication is the world famous jewelry brand Tiffany & Co, which is already extremely recognized for the use of a very particular shade of blue in its graphic communication, stores, and packaging. The specific shade used by the brand is even now commonly referred to as Tiffany Blue<\/strong>, that is, it has become a globally recognized standard.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row][vc_column][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n
The meaning of colors and the sensations they convey<\/strong><\/h3>\n
The sensations that colors transmit are much discussed, especially at the end and beginning of a new year. Colors have many meanings, and being aware of these meanings can help a lot when choosing the colors of a digital product.<\/p>\n
Colors and the sensations connected to colors:<\/strong><\/h3>\n
\n
- Pink<\/strong>: romanticism, innocence and love.<\/li>\n
- Violet<\/strong>: spirituality, intuition, wisdom, and serenity.<\/li>\n
- Red<\/strong>: joyful color of action, passion, courage, and self-confidence.<\/li>\n
- Orange<\/strong>: joy, success, sympathy, and cooperation.<\/li>\n
- Yellow<\/strong>: creativity, good luck, and communication.<\/li>\n
- Green<\/strong>: energy, hope, regeneration, and nature.<\/li>\n
- Blue<\/strong>: purification, harmony, understanding, and clarity of understanding.<\/li>\n
- White<\/strong>: harmonizes, peace, purity, positivity.<\/li>\n
- Black<\/strong>: independence, dignity, and power of decision.<\/li>\n<\/ul>\n
[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner]<\/p>\n
[vc_images_carousel images=”6773,6775,6777″ img_size=”large” autoplay=”yes”]<\/center>[vc_column_text]<\/p>\n Source: Tiffany & Co<\/strong><\/h6>\n
[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_column_text]As we can see in the images above, Tiffany & Co’s website, despite being very clean and clear, to highlight the products it is selling, brings color in a subtle way in order to maintain the visual coherence of its communication.<\/p>\n
\n
- In one image, the home screen of the brand’s official website, brings an information on top of the Homepage with the color in the background, highlighting the message.<\/li>\n
- In the other image, the shadow produced by the jewelry in the highlights images, brings the color almost like a watermark, besides being in the larger image, which highlights the little box where the jewelry is kept.<\/li>\n
- In another screenshot from the same site, even using high contrast colors in the background (yellow and orange), they don’t overlap, on the contrary, they highlight even more the color of the brand in the famous packaging with white lace.<\/li>\n<\/ul>\n
Besides Tiffany & Co, other brands are extremely effective when using their color pattern in different communication points, standing out and captivating consumers. The fast-food chain McDonald’s almost no longer needs to use the entire logo because by combining the two primary colors yellow and red it has created an identity that is recognized anywhere in the world. If one day one of McDonald’s stores changed its colors to green and white, consumers might think they were entering a Starbucks store, another brand that has also created its identity in the combination of colors always standing out in its communication and products.[\/vc_column_text][vc_row_inner][vc_column_inner][vc_column_text]Beyond these already popular meanings and references, when creating a brand or communicating some message it is always worth considering some factors related to colors and the impact that they have on users. Several studies already conducted on the interference and importance of colors in the digital universe, reveal that it can improve the understanding of a message by up to 73%, the ability to learn by up to 68%, and facilitate reading by up to 40%.<\/p>\n
Here are some examples of brands and what the colors they choose convey to their users:<\/p>\n
Coca-Cola<\/strong> \u2013 red<\/strong> – transmits joy, vibration and celebration, the main concept of the Apple brand – white or silver – the color transmits technology, innovation and modernity<\/span><\/p>\n
Fedex<\/strong> \u2013 orange \u2013 color that conveys speed and cooperation<\/span><\/p>\n
Facebook \u2013 blue <\/strong>\u2013 the color conveys trust and transparency<\/span><\/p>\n
Thus, it is very important to consider what colors convey when choosing which colors to use in your logo, the base of your website homepage, a call to action button, or the icon of your app.<\/p>\n
In addition to what you want to convey through color, you should always keep in mind, the brand values and company culture, all of these elements should be in harmony so that, visually, the logo and communication reflect exactly what the company and brand want to say to its customers and consumers.<\/p>\n
If you are working with a brand that already has a defined color, you must be careful when combining it with other colors, because they can highlight, contrast, or even overlap the main color, resulting in the opposite of what is desired. Contrasting colors do not always highlight the main color, they can also overshadow or create mental confusion. Combining vibrant colors with more neutral ones always works, as does combining colors from the same palette, choosing different shades of the same color, some lighter and some darker.<\/p>\n
The tip is to always choose a main color – or use the brand color – and then combine 1 to 3 extra colors that will compose the visual palette of the project or style guide. This palette should be applied to all communication, whether online or offline.<\/p>\n
To help create color palettes, there are some free tools available, such as Color Palette<\/a>, Cohesive Colors<\/a>, and 0 to 255<\/a>.<\/strong><\/p>\n
Besides testing the usability of the chosen color combinations, as already mentioned, it is always valid to create a visual image of the product and test it with the users themselves to know their opinion. Nothing better than to test in practice the efficiency of the chosen color palette.<\/p>\n
Read also: How image influences brand success<\/a><\/h3>\n
[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"
[vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column width=”1\/4″ column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_spacing=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ tablet_width_inherit=”default” tablet_text_alignment=”default” phone_text_alignment=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid” offset=”vc_hidden-xs”][vc_single_image image=”6761″ alignment=”center”][vc_column_text] Gabriela Polidoro Lima UX Designer & Content Writer [\/vc_column_text][\/vc_column][vc_column width=”3\/4″ column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” … <\/p>\n