The role of color in product design: ux of color palettes

Play the Adobe color game

In this time of social distancing and remote working, the Color team has been hard at work bringing you not just tools to enhance your creative and collaborative workflows, but also to have fun, compete with your friends, and encourage team building.


The Adobe Color Game is a fun and competitive color-matching web game that tests memory and color recognition. Earn points by correctly repeating the color sequences, and fine tune your ability to distinguish between similar shades of hue. Share your high score on Twitter and see who among your friends can master our tricky color wheel.

Image by Erica Larson.

#MadeWithAdobeColor

The Adobe Color team loves building color tools for our community. Chat with us on the web by selecting the feedback icon in the top menu and tell us what new color workflows you would like to see.

We are so excited to see what you create, and we would love to continue the conversation! While sharing your work on Behance, don’t forget to select Adobe Color under “Tools Used” for the opportunity so we can see the beautiful things you create. Be sure to tag them with #AdobeColor on social media.

As always, follow us through the Creative Cloud social channels (, , and Instagram) and on the Adobe Drawing Instagram!

Use the power of Creative Cloud Libraries for a seamless creative workflow

Your color themes are automatically saved to Creative Cloud Libraries. Powered by the Adobe CreativeSync technology, Creative Cloud library makes your favorite assets available to you anywhere. You can start a project anywhere on one device, pick it up on the go on another, and finish it on any device.

You can use these color themes for your creative projects in Creative Cloud desktop apps like Photoshop CC, Illustrator CC, InDesign CC, After Effects CC, and Flash Professional CC, and Adobe Creative Cloud mobile apps for iOS and Android like Illustrator Line, Illustrator Draw, and Photoshop Sketch. This will help you keep your creative work cohesive from a color perspective.

Pantone

Print creatives, surface designers, and spot colorists will love the Pantone color workflow. Pantone provides a universal language of color that enables color-critical decisions through every stage of the workflow for brands and manufacturers. More than 10 million designers and producers around the world rely on Pantone products and services to help define, communicate, and control color from inspiration to realization — leveraging advanced X-Rite technology to achieve color consistency across various materials and finishes for graphics, fashion, and product design. Easily convert your color themes into Pantone versions and seamlessly use them in Adobe products to set spot colors quickly and easily.

Image source: Adobe Stock / Andrey Sukhachev.

From any theme, simply choose “Pantone Match” to convert the colors to a theme of Pantone colors. Choose your book and match the Pantone shade to craft your perfect print palette. Download the Adobe ASE file or Pantone swatch image to share with your collaborators. Drop the Adobe ASE file into the icon of any compatible Adobe application to instantly load your Pantone theme into the swatch panel.

Дополнение

Сервис Adobe Color имеет всевозможные функции, которые подскажут решение любому дизайнеру. И подходит как для создания цветовой гаммы автоматически, так и самостоятельного подбора оттенков.

Как должна выглядеть цветовая палитра для сайта? Определённого ответа нет. У всех свои предпочтения. Также может зависеть и от тематики сайта. Возможно, у вас уже есть логотип фирмы. Тогда можно воспользоваться извлечением темы или градиента.

Будет зависеть и от целевой аудитории. Например, если это детский портал с развлекательным контентом, то цвета можно подобрать «весёлые». А если посетителями являются взрослые и деловые люди, то подойдёт более сдержанная палитра цветов.

Если возникнут сомнения, спросите мнение независимых экспертов. Коими могут являться ваши родственники, друзья или коллеги по работе. Копируйте, делитесь, экспериментируйте. И всё обязательно получится!

Воспользуйтесь инструкцией по созданию графических дизайнов в сервисе Canva. И узнайте о списке других полезных программ для вебмастеров.

Зачем нужна палитра цветов?

Программа Adobe Color подойдёт не только создателям сайтов, но и оформителям сообществ социальных сетей. Профессиональным дизайнерам и любителям. Создателям открыток и шаблонов. Женщинам и мужчинам, следящим за модой. Любому человеку, которому захотелось поиграть цветами.

Палитра цветов занимает важное место в продвижении сайта. Казалось бы, при чём тут цветовая гамма? Вспомните себя

Наверняка вам доводилось посещать сайты, цветовое оформление которых отталкивало. Ведь неграмотный подбор может не только раздражать глаза. Но и говорить об отсутствии профессионального подхода к разработке дизайна сайта.

Кроме того, повлиять на поведенческие факторы могут и кислотные цвета. Которые просто не дадут сосредоточиться на контенте

Да, они привлекут внимание несомненно. Но можно ли читать и вникать в текст, когда кругом кричащие цвета? А если человек итак провёл весь день за компьютером, а затем попал на такой сайт в конце трудового дня?

Lauren Hom

Lauren Hom is a lettering artist, designer, and educator based in Detroit, Michigan. You might know her better as Hom Sweet Hom, the small creative studio she runs that specializes in custom lettering, quirky creative content, and online courses on art and business for creatives. About the page she created, Hom says, “When Adobe asked me to design a letter-themed coloring book page, I was in the middle of looking for a snack (no surprise there). So I designed my piece to honor the one constant in any work-from-home creative’s life: snacks. We’re all out of the good snacks in my household, so I figured drawing them would be the next best thing.”

New harmonization rules

Adobe Color offers three new harmonization rules to help you create the perfect color theme for your design needs. These harmonies make it easy to pick color themes with even more robust harmonization options.. Use the brightness slider on individual swatches for even more range to your color choices.

Split complementary

This harmony rule adds two complementary colors from the base color. Play with the angle of the split as the symmetric angle will stay intact, closer together provides similar colors, while a wider angle will give more contrast between the secondary shades.

Double split complementary

Using this rule gives you two pairs of complementary colors spaced evenly around your base color. Add more contrast by using the angle of the pairs to move from similar to contrasting colors. Double split complementary is great for cases where you need a lot of contrasting colors to your palette.

Square

Square color harmony uses a set of four points equally spaced around the wheel, and a second saturation option for your base color. This color rule offers maximum color contrast options.

Adobe RGB (1998) color image encoding


ICC-based color management workflows are becoming the standard for ensuring reliable color reproduction from screen to print. Many professional workflows are built around the Adobe RGB (1998) ICC color profile first introduced in Adobe Photoshop 5.0 software and now available across the Adobe product line.

Every device for capturing and reproducing graphics and images be it a scanner, a digital camera, a monitor, or a printer has different capabilities for reproducing color, resulting in color inconsistencies. In an ICC-based color-management system, color profiles are created for each device, so that the colors in an image can be modified throughout the workflow to compensate for the differences in each supported device. The goal is to maintain the visual appearance of the image to the greatest degree possible.

Effective color management requires that a color profile be attached to every image or graphic to indicate the «native» color conditions also known as the color space under which the file was created. Adobe applications introduced the idea of a «working» color space, one that is not necessarily tied to a specific device but that represents the ideal conditions for image reproduction. The Adobe RGB (1998) profile has been widely adopted as a working space because it provides a relatively large and balanced color gamut that can be easily repurposed for reproduction on a variety of devices.

Adobe’s own ICC profile for the Adobe RGB (1998) color space is included with all Adobe color-managed software applications, including Adobe Acrobat 5.0 and later, Illustrator 9.0 and later, InDesign, GoLive 6.0 and later, Photoshop 5.0.2 and later, and Photoshop Elements software. With the appropriate legal agreements, it is also available for distribution by third-party hardware and software vendors. Find out more about the Adobe RGB (1998) color image encoding (PDF: 551k) used for the Adobe RGB (1998) color space.

Legal note regarding color-space naming: Only the Adobe RGB (1998) ICC profile created by Adobe Systems Incorporated can accurately be referred to as «Adobe RGB (1998).» ICC profiles created by other vendors, even if they conform to the color image encoding described in the Adobe RGB (1998) color image encoding document, cannot be referred to as «Adobe RGB (1998).» If vendors choose to create their own profile according to this specification, and they want to indicate to their customers that this profile was written in accordance with Adobe’s specification, then an alternate phrasing is required, such as «compatible with Adobe RGB (1998).»

Main color scheme

A color wheel is a must-have tool for creating color palettes. Anyone who wants to create their color scheme should use the color wheel.

Color wheel

Below are three main color scheme standards that make creating new schemes easier, especially for beginners:

Monochromatic

Monochromatic color scheme is the simplest to create because it’s created from different shades of a single hue. Colors in this scheme go well together, producing a soothing effect. But despite its simplicity, it’s easy to create a boring UI using monochromatic scheme so be careful!

A monochromatic color scheme

Analogous

Analogous colors are groups of three colors that are next to each other on the color wheel. As the name suggests, analogous color palettes are created using analogous colors. Usually, one color is used as a dominant color while others are used to enrich the scheme.

An analogous color scheme

Complementary

Complementary colors are opposite of each other on the color wheel. The high contrast of complementary colors creates a vibrant look. In their most basic form, complementary color schemes consist of only two colors that contrast strongly. This scheme is used to attract the viewer’s attention.

Complementary color scheme

Create

We know how important the Create workflow is to our users, so you will find all the familiar tools with a refreshed look. See your colors pop on a clean white workspace, or toggle Dark Mode on. Set your base color to apply Color Harmony Rules, and drag the color drops around the color wheel to see them in action. Or select “custom” to individually set your swatch colors.

Have an image that is giving you major inspiration vibes? Simply drop it onto the “Extract from Image” workflow to generate a color palette. Choose from various color moods, which are based on the saturation of the color, and amount of black contained in each swatch, or drag the color bubbles to manually select shades in the image. Then pop back to the main color wheel to refine your palette.

Sofi Bastos

Sofi Bastos is a graphic designer and DJ from Montevideo, Uruguay, who’s currently living, loving, and laughing in London. Always curious and eager to discover, she loves to travel through space and time with her senses. Passionate about arts, music, culture, the world, and the cosmos, she describes her brain as “a melting pot of influences and inspiration that are ever evolving and manifesting in everything I do and am.” About her Adobe Coloring Book work, she says, “Play shapes the brain, opens the imagination, and invigorates the soul. I want to encourage everyone to give yourself permission to play every day. Practice play as a state of being as it’s in the process where you find joy, surprise, pleasure, and all its treasures!”

Как выбрать идеальный цвет

Если верить исследованиям, большинство людей принимают подсознательное решение о покупке продукта в течение 90 секунд. Причем это решение чаще всего основывается на восприятии цветов, которые видит человек. Наверняка вы заметили, что большинство luxury-брендов делают ставку на черный, а за экомарками прочно закрепился зеленый и его оттенки.

Чтобы научиться подбирать красивые сочетания оттенков и улавливать гармонию, придется потратить немало времени на самообучение. Если времени на это нет, а к работе нужно приступать, сосредоточьтесь на основах.

Изучите фирменные цвета конкурентов или обратите внимание на оттенки, используемые в смежной отрасли. Попросите у клиента информацию о рекламных продуктах компании — если повезет, вам выдадут брендбук и вопрос о подборе цвета отпадет

Попросите у клиента информацию о рекламных продуктах компании — если повезет, вам выдадут брендбук и вопрос о подборе цвета отпадет.

Make the gradient

Gradients are one of the most powerful and versatile design components. They can add depth to illustrations, impactful color to your designs, or elegantly enhance UI. Finding a color combination and creating a gradient can be a tedious experience. The Adobe Color team has been hard at work developing easy but powerful gradient extraction tools.

Drop your image into the Extract Gradient tab, and our algorithm will automatically try and find a pleasing gradient in your image. If not to your liking, just click and drag on the photo to resample for a new color combination.

Photo by xbrchx / Adobe Stock.

If you are particular about where the colors in your gradient are, you can edit the color stop position as well as the midpoint position to get exactly the color blend you want. Add color stops for a maximum of fifteen different shades or remove them down to a minimum of two.


With the addition of gradients to the Adobe Color website, you can now find the beautiful things you create in My Libraries

Палитра цветов — инструкция по работе в Adobe Color

Теперь разберёмся, как работать с палитрой цветов в программе. Заходим в сервис Adobe Color и регистрируемся. Можно обойтись и без этого, но тогда вы не сможете сохранять палитры в библиотеке. Впрочем, чтобы сэкономить время, можно авторизоваться через Facebook. Итак, пройдёмся по разделам и вкладкам Adobe Color.

Раздел «Создать»:

Цветовой круг

И по умолчанию нам открывается произвольная палитра в разделе «Создать». В центре экрана расположен Цветовой круг. Слева имеются переключатели правил гармонии цветов. А справа функция сохранения и выбор места.

Чтобы начать создавать подборки автоматически, нужно в средний столбец вставить основной цвет. Если вы уже выбрали главный цвет сайта, вставьте его номер. Или поиграйте настройкой цветов, передвигая бегунки ниже, пока не выберите наиболее подходящий.

К каким именно объектам сайта применяется основной цвет? Взгляните на главную страницу. Возможно, уже какой-то цвет по умолчанию назначен для заголовка, меню сайта и кнопок «Читать далее». Исходя из этого и ориентируйтесь. Какой оттенок вы хотите наблюдать в этих местах.

Листаем чуть ниже

Обратите внимание, что слева можно развернуть вкладку и выбрать цветовой режим из RGB, CMYK, HSV и LAB. В зависимости от этого будут меняться бегунки, но цвет остаётся тем же

Передвигая их в среднем столбце, будет меняться цвет посередине. И подходящие к нему тона в левых и правых блоках.

Таким образом, автоматически подбирается цветовая палитра. Как только определились с основным цветом, вспомните о типах схем слева:

  • Последовательная
  • Монохромная
  • Треугольная
  • Комплементарная
  • Сплит-комплементарная цветовая схема
  • Двойная сплит-комплементарная
  • Квадратная
  • Составная
  • Оттеночная
  • Произвольная (для ваших изменений)

Переключайте правила сочетания цветов и выбирайте понравившуюся группу. Тут же вы можете её подредактировать на свой вкус. И сохранить кнопкой справа. Также можно наводить курсор на цветовой круг и плавно менять оттенки.

Извлечение темы

Ещё одно отличное решение для подбора палитры цветов. Загрузите или перетащите любую понравившуюся картинку на экран. Тогда извлечение темы произойдёт автоматически. К тому же, можно перемещать фиксаторы на изображении. И палитра будет меняться.

Слева также располагаются цветовые настроения темы. Красочное, яркое, приглушённое, насыщенное и тёмное. Когда группа будет собрана, сохраните её в библиотеку. Сохранять можно как с публикацией в сервисе Adobe Color, так и скрыто. А кроме того, придумывать произвольное имя подборки.

Извлечение градиента

Новинка в Adobe Color — извлечение градиента. Загрузка картинки происходит аналогичным образом

А слева обратите внимание на выбор количества точек градиента. Данная функция удобна тем, что при наведении курсора на цветовой блок, можно скопировать его номер

А затем в разделе «Цветовой круг» вставить его в основной столбец и поиграть цветами.

Цветовая игра

В последней вкладке данного раздела разработчики сервиса Adobe Color разместили игру. Так что, если совсем нечем заняться, можно поиграть и потренировать память.

Раздел «Смотреть»

Если вас ещё не посетили идеи по поводу цветового оформления сайта, зайдите в раздел «Смотреть». Изучайте все источники или разверните вкладку справа. И откройте Цветовые темы, Творческие проекты или Фотографии Stock, чтобы смотреть готовые решения. Наслаждайтесь и вдохновляйтесь красивыми видами, пока не определитесь.

Тенденции

Ещё один вариант подбора палитры цветов для сайта. В тенденциях моды вы найдёте изображения с готовыми схемами. Наведите курсор и сохраните наиболее симпатичные варианты. В дальнейшем вы можете редактировать их в разделе «Цветовой круг».

Моя библиотека

И наконец мы добрались до последнего раздела, в котором сохраняются все ваши творческие идеи. Кстати, у вас есть возможность создавать несколько библиотек. Например, первая будет для сайтов. Вторая для пабликов социальных сетей. Третья для рукоделия. Вариантов сколько угодно.

Теперь вы можете открыть любой шаблон. И перед вами появятся различные функции. Меняйте название и назначайте теги. Загружайте на ПК или копируйте в различных форматах. Очень удобно, когда хотите с кем-то поделиться. Особенно, если выполняете работу на заказ.

Также можно опубликовать в Adobe Color. Продолжить редактировать в цветовом круге. Или удалить. Ну а чтобы применить какой-либо цвет из палитры на сайте, просто копируйте, нажав на блок. А затем вставляйте в нужное место в файле CSS.

Use color rule presets to create harmonious color themes

Landscape painter and teaching artist Mitchell Albala quotes in his book, “A color strategy is like a recipe for harmony—a set of color relationships that are proven to work well and can be used as a formula for building our color composition.”

Let us understand the very basics of color rules in HSB (Hue Saturation Brightness) color space to help you choose a beautiful and harmonious palette.

Go to the color wheel on Color CC website and notice the HSB values when you apply the color rules. Hue (H) is the color pigment measured from 0 to 360 degrees on the circle (for example: 0=red, 60=yellow, 120=green, 180=cyan, 240=blue, and 300=magenta). Saturation (S) is the amount of white added in the color. Brightness (B) is the amount of black in the color. Both Saturation and Brightness are measured from 0% to 100%.

Choose your base color (HSB: 182, 100, 75) and apply the color rules. Notice the color theme you get.

Analogous

Analogous themes use colors that are adjacent on the color wheel. Analogous colors usually blend well with one another and are harmonious and pleasing to the eye.

Monochromatic


Monochromatic colors are variations in saturation and brightness of a single color. So when you use this color rule, Adobe Color CC gives you five colors sharing the same hue (H:182) but different saturation and brightness values. Monochromatic colors go well together and produce a soothing effect.

Triad

Triadic themes use colors that are evenly spaced around at 3 equidistant points on the color wheel. When you use this color rule, Adobe Color CC gives you two colors with the same hue but different saturation and brightness values from the first point on the color wheel (HSB: 182, 90, 45 & HSB: 182, 100, 75), two from the second point on the color wheel (HSB: 51, 90, 55 & HSB: 51, 95, 45), and one color from the third point (HSB: 321, 90, 79). Triadic colors tend to be contrasting (but not as contrasting as complementary colors!) while retaining harmony when used together.

Complementary

Colors that are opposite each other on the color wheel are considered complementary colors. When you use this color rule, Adobe Color CC gives you two colors with the same hue as the base color (HSB: 182, 100, 45 & HSB: 182, 90, 100), the base color itself (HSB: 182, 100, 75), and two colors with the same hue from the opposite point on the color wheel (HSB: 23, 100, 45 & HSB: 23, 100, 75). Complementary colors give a very high contrast and tend to stand out when used together.

Compound

Compound color themes are a mix of complementary and analogous colors. When you use this color rule, Adobe Color CC gives you two colors with the same hue that are adjacent (analogous) to the base color (HSB: 214, 90, 95 & HSB: 214, 60, 35), the base color itself (HSB: 182, 100, 75), and two colors opposite to the base color (complementary) but adjacent to each other (HSB: 15, 75, 78 & HSB: 6, 90, 95). Compound color theme has the same strong visual contrast as the complementary color theme, but has less pressure.

Shades

When you use this color rule, Adobe Color CC gives you five colors – all sharing the same hue (H: 182) and saturation (S: 100) but different brightness.

The shades generated from Adobe Color CC share the following relationships in the HSB color space in terms of brightness (represented here by b1, b2, b3, b4, and b5):

HSB values                                                  Brightness relationship

Shade A: 182, 100, b1=25                             b1 < b2 < b3 < b4 < b5Shade B: 182, 100, b2=50                             b2 = b1+ 25Shade C: 182, 100, b3=65                             b3 = b2 + 15Shade D: 182, 100, b4=75                             b4 = b3 + 10 (base color)Shade E: 182, 100, b5=80                             b5 = b4 + 5

Okay, let us not get too technical over here but understand that a good color palette has mathematical foundations! In fact, there is a whole scientific field dedicated to the understanding of color. Color Expert and Principal Color Scientist at Adobe Lars Borg, who designed the algorithms powering the Adobe Hue CC app, tells us more about color science and the takeaways for creative artists from such a deep field in the blog post Color Science, Explained.

Custom

Now that you are getting the hang of it, try custom mode. Manually select the colors on the color wheel in your palette without any rules controlling it!

The basics of color theory

Before diving into details on how to choose a color palette for your next project, it’s important to understand a few basic terms about color.

Hue

Hue is one of the main properties of a color. It means both a color and a shade of a color (a color mixed with black). For example, blue, green, orange, and yellow — each of these is a hue.

Color hue scale

Color saturation is the intensity of color. As saturation increases, the colors appear to be purer.

Color saturation

A tone is produced by mixing a color with grey.

Color tone example. Image by color-hex.

Tint

A tint is a mixture of a color with white, which reduces darkness.

Color tint example

Here is how all elements work together:

Painter’s color mixing terminology graph

Explore

The Explore page now features a variety of content from Adobe Stock and Behance, as well as from the Adobe Color community. Scroll through the curated feed to find inspiration, or filter by source to search communities individually. Adobe Color makes it easy to click through to Adobe Stock for licensing imagery, or to Behance to follow artists, find out more about the artwork, or see the entire project. Simply select the project name to see more or click on the artist’s name to view their Adobe Stock or Behance profile.

Adobe Color has improved the search experience with contextual searching, allowing you to precisely identify the kind of color you are looking for. Adobe Sensei brings the power of AI and machine learning to suggest meaningful tags based not only on color but also on contextual searches like “moody,” “happy,” and “peaceful.”

Adding themes to your library takes just one click, and they are instantly synced through the Creative Cloud in your desktop and mobile applications — or you can download the theme as an ASE swatch file to use in Adobe applications. UX designers will love the ability to copy as a variety of web development formats including CSS and XML, as well as the ability to click a swatch to copy the Hex value to your clipboard.


С этим читают