Color System

머티리얼 디자인 색상 시스템을 사용하면 Brand 또는 앱의 Style 을 반영하는 색상 테마를 만들 수 있습니다.

Color usage and palettes

머티리얼 디자인 색상 시스템은  meaningful way 으로 UI에 색상을 적용하는 데 도움이 됩니다. 

 

1. 이 시스템에서는 브랜드를 나타내는 Primary 색상과 Secondary 색상을 선택합니다.

2 .그런 다음 각 색상의 Dark Light variation을 다양한 방식으로 UI에 적용할 수 있습니다.

Colors and theming

색상 테마는 조화롭고 접근 가능한 텍스트를 보장하며 UI 요소와 화면을 서로 구별하도록 설계되었습니다.

The Material Design palette tool or 2014 Material Design palettes are available to help you select colors.

Principles

Hierarchical(계층적)

색상은 어떤 요소가 상호 작용하는지, 다른 요소와 어떻게 관련되는지, 중요도 수준을 나타냅니다.

중요한 요소가 가장 눈에 띄어야 합니다.

Legible(읽기 쉬운)

텍스트 및 아이콘과 같은 중요한 요소는 컬러 배경에 표시될 때 가독성 기준을 충족해야 합니다.

Expressive(인상적인)

브랜드 스타일을 강화하는 기억에 남는 순간에 브랜드 색상을 보여주세요

 

Color theme creation

The baseline Material color theme

머티리얼 디자인은 proverbial box에서 꺼내 바로 사용할 수 있는 기본 제공 테마로 디자인되어 제공됩니다.

 

- primary 및 secondary 색상
- Variants of primary 및 secondary
- background, surface, error, typograph 및 iconography에 대한 색상과 같은 추가 UI 색상

Primary color

primary Color는 앱의 화면과 구성 요소에서 가장 자주 표시되는 색상입니다.

 

Dark Light Variants
primary Color은  Dark/Light primary variants을 함께 이용하여 앱의 색상 테마를 만드는 데 사용할 수 있습니다.

Distinguish UI elements

시스템 표시줄(StatusBar)의 상단 앱 표시줄(AppBar)과 같은 UI 요소 간에 대비를 만들기 위해 기본 색상의 밝거나 어두운 변형을 사용할 수 있습니다. 이를 사용하여 FAB의 아이콘과 원형 컨테이너와 구별할 수도 있습니다.

 

statusBar - primary Variant

appBar - primary

statusBar - primary Variant1

appBar - primary

fab -primary Variant2

Secondary color

secondary color은 제품을 강조하고 구별하는 더 많은 방법을 제공합니다.

secondary color을 갖는 것은 선택 사항이며 UI의 일부를 강조하기 위해 드물게 적용해야 합니다.

 

secondary 색상이 없는 경우 primary 색상을 사용하여 구성요소를 강조할 수도 있습니다.

- Fab
- 슬라이더 / 스위치와 같은 선택 컨트롤
- 선택한 텍스트 강조 표시
- progress Bar
- link / headline

 

Dark and light secondary variants

primary 색상과 마찬가지로 secondary 색상에도 dark/light variant가 있을 수 있습니다.

색상 테마는 primary 색상, secondary 색상, 각 색상의 어dark/light variant을 사용할 수 있습니다.

 

statusBar - primary Variant1

appBar - primary

fab - secondary 

 

Surface, background, and error colors

surface, background 및 error 색상은 일반적으로 brand image 나타내지 않습니다.

- surface color는 card, sheet 및 menu와 같은 구성 요소의 표면에 영향을 줍니다.

- background는 스크롤 가능한 콘텐츠 뒤에 나타납니다. 기본 배경 및 표면 색상은 #FFFFFF입니다.

 

- error 색상은 텍스트 필드의 잘못된 텍스트와 같은 구성 요소의 오류를 나타냅니다. 기준 오류 색상은 #B00020입니다.

Typography and iconography colors

"On" colors

app surfaces 은 primary 색상과 같은 색상 팔레트의 특정 범주에 있는 색상을 사용합니다.

Text나 Icon과 같은 요소가 surfaces  앞에 나타날 때마다,  뒤에 있는 색상에 대해 명확하고 읽을 수 있도록 디자인된 색상을 사용해야 합니다.

primary 색상, secondary 색상, surface 색상, background 색상 또는 error 색상과 같은 색상을 사용하는 표면의 "위에" 나타나는 요소에 색상을 지정한다는 사실을 참조하여 "On" 색상이라고 합니다.

 

색상이 primary 색상 위에 "위에" 나타나는 경우 "OnPrimary"라고 합니다.

기존 색상 범주(예: 기본 색상)를 사용하여 "on"이라는 접두사를 사용하여 레이블이 지정됩니다.

 

"On" 색상은 주로 Text, Icon 및 Stroke에 적용됩니다. 때로는 Surface에 적용됩니다.

Accessible colors

dark/light Text 뒤에 접근(배치) 가능한 배경을 보장하기 위해 배경은 primary 및 secondary 색상의 dark/light variants 을 사용할 수 있습니다.

반대로 색상을 변경하여 dark / light back ground 앞에 나타나는 타이포그래피(Text에 적용)에 사용할 수 있습니다.

Color swatches

swatches 은 유사한 색상 범위에서 선택한 색상 샘플입니다

흰색 텍스트를 사용하는 앱에는 흰색 텍스트에 대해 액세스할 수 있는 배경이 있어야 합니다.

이 흰색 Check 표시는 다양한 배경 색상 견본에 대해 흰색 텍스트에 액세스할 수 있는 경우를 나타냅니다.

900-400 색상 견본이 이 UI에 적용되었습니다.

 

검은색 텍스트를 사용하는 앱에는 검은색에 대해 액세스할 수 있는 배경이 있어야 합니다.

이 검은색 check 표시는 다양한 배경 색상 견본에 대해 검은색 텍스트에 액세스할 수 있는 시기를 나타냅니다.

UI에는 300-50까지 색상 견본이 적용되었습니다.