Skip to content

MATERIAL - STYLE

COLOR

Color in Material Design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights.

Color Tool :

The Color Tool helps you create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination. for Color Tool refer : Click Here

Color palette :

This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors.

TO see different colors in color palette : CLick Here

Color System :

Choosing a color scheme :

You can customize your app’s color scheme to match your brand colors. Alternatively, you can create an entirely new color scheme using the material design color palette.

When creating color scheme :

  1. Use the Color Tool to create and apply palettes to your app.
  2. Ensure your app’s color usage meets accessibility standards, with sufficient contrast between elements.

Material Design’s color system

a primary color refers to a color that appears most frequently in your app. A secondary color refers to a color used to accent key parts of your UI.

Primary Color :

A primary color is the color displayed most frequently across your app’s screens and components. It can also be used to accent elements, if you don’t have a secondary color. To create contrast between elements, you can use lighter or darker tones of your primary color. this contrast helps to show division between surfaces, such as between the status bar and a toolbar.

Secondary Color :

A secondary color is used to accent select parts of your UI. It can be complementary or analogous to your primary color, but it should not simply be a light or dark variation of your primary color.

Secondary colors are best used for:

  1. Buttons, floating action buttons, and button text
  2. Text fields, cursors, and text selection
  3. Progress bars
  4. Selection controls, buttons, and sliders
  5. Links
  6. Headlines

Using color in your app :

Large UI areas and elements should be colored with your primary color.A secondary color can be used to accent smaller areas.If you don’t have a secondary color, you can use your primary color instead for these areas.

Use the primary color to accent elements, such as buttons or checkboxes.Elements that appear rarely, such as alerts, should be distinct from other elements and not use your primary color.

Alternative secondary colors

If your secondary color is too light or dark to sufficiently contrast with the background color, use a lighter or darker shade of the secondary color instead.

Usability

Hierarchy

Hierarchy refers to organizing content according to different levels of importance. Color can convey how important some content is relative to other content.

For example, a brightly colored button on a colorless background makes that button stand out.

Meaning

Color may be used to communicate the meaning of various elements on a screen. A weather app may display colors that indicate current weather conditions, and a maps app may use color to show traffic conditions, with roads colored red or green.

State

Color can provide information about:

  1. An element’s current state, such as if a button is enabled or disabled
  2. An app or element’s change of state

Contrast

Your app’s primary and secondary colors should ensure sufficient color contrast between elements so that all users can see and use your app.

Text on backgrounds

Text should be legible on the background .

  1. Dark gray text is used on light backgrounds
  2. Light gray text is used on dark backgrounds

Legibility

Text that appears on colored backgrounds should be legible and meet accessibility standards.Both backgrounds and text must use colors and opacities that, when used together, meet these standards.click Here

For opacities of following text types click here.

  1. Dark text on light backgrounds
  2. White text on dark backgrounds
  3. Icons and other elements
  4. Colored text and backgrounds

Colored text and backgrounds :

Use colored text on colored backgrounds sparingly, limiting usage to important text elements.Colored text should be used to indicate importance and selective emphasis.

Themes :

Themes let you apply a consistent tone to an app. The theme specifies the darkness of the surfaces, level of shadow, and appropriate opacity of ink elements. To promote greater consistency between apps, light and dark themes are available to choose from.

click here , and download themes.

ICONS

Material icons use geometric shapes to visually represent core ideas, capabilities, or topics. Product icons are the visual expression of a brand’s products, services, and tools.

System icons represent a command, file, device, directory, or common actions.

---------------------PENDING------------