Засоби захисту рослин

Colors in UX Design

Material Design Colors

Material Design has a built-in base theme that you can start using right out of the box.

These include standard colors:

  • primary and secondary colors
  • Primary and secondary color options
  • Additional UI colors such as background, surface, bugs, typography and icon colors.

All these colors can be adapted to your application.



Diagram of Material color scheme displaying the baseline Material color themeA diagram of primary and secondary color palettes with three callouts

The top app bar uses light and dark variations of the main color to distinguish it from the system bar.

Diagram showing the relationship between color palette selections and an app screen

Create beautiful, useful products faster. Material Design is a customizable, open-source platform that enables teams to create high-quality digital environments.


Spectrum – Adobe Color System

Spectrum uses 13 colors for each color theme with a set of 14 shades and shades for each color. Colors are used sparingly and consciously to strengthen hierarchies and create clear communication channels. Using too many colors can be visually overwhelming and degrade user experience.

Row of squares colored red, orange, yellow, chartreuse, celery, green, seafoam, cyan, blue, indigo, purple, fuchsia, and magenta.

Colors give users context within their workflow and create a hierarchy of actions within the UI. Items in a selected or keyboard focus state are given visual importance since they relate to a user’s immediate actions.

Colors for backgrounds, borders and text

Row of Spectrum’s blue colors with annotations for component backgrounds with static color, along with contrast against black and white (all above 4.5:1).
Border colors
Row of Spectrum’s blue colors with annotation for semantic borders (700 and 800 index are 3:1 contrast).
Text colors
Row of Spectrum’s blue colors with annotation for text content (4.5:1 with gray-100).


Color semantics

Diagram illustrating through labels the semantic color meanings for red (negative), orange (notice), green (positive), and blue (informative and accent).

Spectrum assigns common values ​​to a subset of colors to create consistent user expectations. These values ​​are codified in design tokens and used in all components.

Semantics can be used in many ways to convey meaning. The semantic meanings of the spectrum include information, emphasis, negation, attention, and positivity. Use semantic colors to clearly and predictably convey the appearance of a component. If a color with semantic meaning is used, the text or icon should also be displayed to ensure that the meaning is not lost to users who cannot see or distinguish between colors.

Color transparency

Spectrum offers a set of 8 white and black values using transparency. These colors convert gray to a format that can be applied to colored backgrounds or images.

Transparent white or black background

Row of Spectrum’s transparent white and transparent black colors with annotation for component background, disabled background, and selected background (3:1 contrast).


Borders transparency

Row of Spectrum’s transparent white and transparent black colors with annotation for disabled border and field border (both below 3:1 contrast).


Text and icons colors

Row of Spectrum’s transparent white and transparent black colors with annotation for disabled text and icon (below 3:1 contrast), and text and icon (4.5:1 contrast or above).

Spectrum provides interface components, resources, and tools that enable teams to work more efficiently and make applications more consistent.


Color in Windows 11

An overview of where and how color is used in Windows 11

Windows 11 color system helps users focus on their tasks by showing the visual hierarchy and structure between UI elements. The colors are context-sensitive to create a soothing background, subtly enhance the user experience, and only highlight important elements when necessary.

There are two color modes: light and dark.

Color hero image

As in the Material Design framework, highlight colors are used to highlight important UI elements and indicate the state of an interactive object or control.

Assorted controls in light mode

Backlight color values are automatically generated and optimized for contrast in both light and dark modes.

Illumination colors are used sparingly to highlight important elements and convey information about the state of interactive elements.

Assorted controls in dark mode


IBM color design system

Carbon is IBM’s open-source development platform for digital products and experiences.

color pallets of IMB design system

ibm design system colors

At the core of this system is the IBM Design Language, which consists of working code, design tools and resources, human interface guidelines, and an active community of contributors.


Layering model for light themes

What I liked is that the system uses different tokens for different types of interface elements.

color tockens

Samsung color design system

If you look at the Samsung brand colors, you can also see that there is a combination of dark blue and black. The dark and light theme in the design. And bright colors for infographics.

samsung color design system

That’s what they write about colors for icons.

“For icons, choose colors that can reflect the app’s characteristics and apply a
a palette of colors that blend well for better uniformity.

The colors applied to the application must be different from the colors applied to the icons.”

color pallete samsung

When using a color, it is important to understand its meaning and to which UI element you are applying these color characteristics.
Color usually carries both positive and negative meanings. You should also consider that some colors may have different meanings in different cultures.

red green blue

Apple color system

Apple’s color scheme is top-notch as always. Made different colors for different devices.

apple colorsStarting with macOS 11, the system, like Android, uses the accent color to customize the appearance of your app’s buttons, highlight highlights, and sidebar icons.

accent color

Don’t just rely on color to distinguish between objects, indicate interactivity, or convey important information. When using color to convey information, make sure to present the same information in an alternative way that people with color blindness or other visual impairments can understand.

support ukraine flag

Intelligent use of color can improve communication, make your brand stand out, ensure visual continuity, convey status and feedback, and help people understand information.

A few years ago I wrote a jazz tune about monitor calibration. Choose colors with pleasure!

Anton Skrypnyk
Anton Skrypnyk
Засоби захисту рослин