Colors Roles

Tones are assigned to color roles

 

 

key 색상은 색조 팔레트의 basic이지만 각 색조 팔레트에서 13가지 색상중 선택한 하나만 UI에서 사용됩니다.

 체계는 구성 요소에 매핑되는 특정 역할에 할당된 톤 그룹입니다.

 

예를 들어 primary color 의 색조 팔레트는 구성 요소 위에 배치되는 텍스트 및 아이콘의 색상과 같은 짝을 이루는 역할에 대한 톤을 정의합니다(On primary).

 

Colors roles 의 톤 페어링은 기본적으로 액세스 가능한 contrast를 제공하고, 추가 사용자 정의 색상이 기존 체계와 조화롭게 작동하도록 톤 조정을 알려줍니다.

 

Roles in a scheme

각각의 주요 key accent color (primary, secondary, and tertiary)은 서로 다른 강조 및 시각적 표현에 적용할 수 있는 서로 다른 톤의 4가지 호환 색상 그룹으로 제공되며 시각적 대비를 위해 쌍을 이룹니다.

accent color: (primary, secondary, and tertiary)역할은 4색 그룹의 동일한 패턴에 따라 형성됩니다.

* primary base color
*On-primary는 primary 위에 있는 콘텐츠(아이콘, 텍스트 등)에 적용됩니다.
*Primary container는 기본보다 강조가 덜 필요한 요소에 적용됩니다.
*On-primary container는 기본 컨테이너 위에 있는 콘텐츠(아이콘, 텍스트 등)에 적용됩니다.

Neutral key colors은 표면 및 윤곽선에 유사한 색상 그룹을 제공합니다.

5가지 primary color 중에서 roles에 자동으로 할당된 역할은 밝은 테마 구성 요소에 매핑됩니다.

 

16진수 값을 할당하는 대신 Token을 통해 역할을 매핑하고 코딩함으로써 색상 팔레트가 변경되면 색상을 체계적으로 업데이트할 수 있습니다. Token을 사용하면 roles의 색상 값에 대한 변경 사항을 일관되게 계단식으로 적용할 수 있습니다.

5가지 primary color 중에서 roles에 자동으로 할당된 역할은 어두운 테마 구성 요소에 매핑됩니다.

색 구성표가 생성되면 색조 팔레트에는 어두운 테마에 대한 매핑도 포함됩니다

앱은 a single generated scheme.를 통해 밝은 톤과 어두운 톤을 수신합니다

Accent colors

아래 예는 roles이 적용되는 방식을 보여줍니다.

Figma 디자인 키트는 구성 요소의 색상 매핑도 식별합니다(출시 예정)

Primary

primary roles은

FAB, 눈에 띄는 버튼, 활성 상태, the tint of elevated surfaces와 같은 UI 전체의 주요 구성 요소에 사용됩니다.

1. onPrimary 2 Primary

3 onPrimary Container 4 Primary Container

Secondary

filter 칩과 같이 UI에서 덜 눈에 띄는 구성 요소에 보조 역할을 사용하면서 색상 표현의 기회를 확장합니다.

1. On secondary container 2. Secondary container

Tertiary

Teriary roles은 primary 색상과 secondary 색상의 균형을 맞추거나 입력 필드와 같은 요소에 주의를 집중시키는 데 사용할 수 있는 대조 강조에 사용됩니다.
Tertiary color roles은 maker가 재량에 따라 사용하도록 남겨두고 제품의 더 넓은 색상 표현을 지원하기 위한 것입니다.

 

Surfaces

Neutral Roles은 표면과 배경, 강조가 높은 텍스트와 아이콘에 사용됩니다.

 

Surface colors

surface colors은 contained area을 정의하여 배경 및 기타 화면 요소와 구분합니다.

 

세 가지 핵심 surface roles이 있습니다 

surface dim, surface, and surface bright. 

 

추가적인 5가지 surface container roles

surface container lowest, surface container low, surface container, surface container high, surface container highest.

 

surface container color는  surface와 구별되는 contained area를 표현하기 위한 권장되는 기본 색상입니다.

이것은 좋은 contrast(대비)를 제공하고 다른 모든 높거나 낮은 강조 표면 역할과 유연하게 결합될 수 있습니다.

 

 

primary focus 영역은 surface 역할을 사용하고 내비게이션 영역은 표면 컨테이너 역할을 사용합니다.

Surface container colors

surface container colors 에는 surface roles 에 대한 가장 낮은 강조부터 가장 높은 강조까지의 5가지 색상이 포함됩니다.

이를 통해 surface에 대해 다소간 대비를 제공하는 표면 컨테이너 색상을 선택하거나 여러 표면 컨테이너 색상을 함께 사용하여 내포된 contained 영역을 만드는 데 유연성이 허용됩니다.

surface container colors 역할의 범위를 통해 디자이너는 the hierarchy of handheld devices를 방해하지 않고 인터페이스의 대형 화면 버전에 대한 기능을 추가할 수 있습니다.

아래 예에서 핸드헬드 장치는 surface 을 body area의 색상으로 사용합니다.

동일한 App이 더 큰 화면이  장치로 확장될 때 surface은  body area에 대한 색상 선택으로 유지되는 반면 추가된 contained area 역할은 더 높거나 낮은 강조 영역을 구분하는 데 사용됩니다.

필요한 계층 구조, 기능 영역 및 디자인 논리에 따라 디자이너는 모의 내에서 계층 구조를 만드는 데 가장 적합한 표면 컨테이너 역할을 선택할 수 있습니다.

서로 다른 surface 역할 매핑을 사용하는 동일한 인터페이스 빌드의 예

내비게이션 바, 메뉴 또는 대화 상자와 같은 Neutral-colored 구성요소는 기본적으로 특정 surface container roles에 매핑되지만 maker가 사용자 요구에 맞게 다시 매핑할 수 있습니다.

Alternative surface colors

두 가지 추가적 surface colors roles은 기본 surface roles의 varient입니다.

Surface Bright는 어둡거나 밝은 테마에서 항상 가장 밝은 표면 색상입니다.

Surface Dim은 밝거나 어두운 테마에서 항상 가장 어두운 표면 색상입니다.

 

default surface 색상은 밝은 테마와 어두운 테마 사이에서 자동으로 전환되지만(밝은 테마에서는 밝은 색상이고 어두운 테마에서는 어두운 색상으로 반전됨)

 

the surface bright and surface dim은 자동으로 전환되지 않습니다.

 

오히려 밝은 테마와 어두운 테마 모두에서 상대적인 밝기를 유지합니다.

 

 

default surface roles을 사용하는 인터페이스에서 매핑된 영역은 밝은 테마에서 가장 밝고 어두운 테마에서 가장 어둡습니다.

그러나 bright surface roles을 사용하는 인터페이스에서는 매핑된 영역이 밝은 테마와 어두운 테마 모두에서 가장 밝습니다.

 

On surface colors

surface colors roles은 배경 및 컨테이너 표면과 같은 large containment areas에 적용되도록 설계되었습니다.

텍스트 또는 아이콘과 같은 요소가 이러한 표면 앞에 나타날 때마다 해당 색상은 뒤에 있는 색상과 비교하여 명확하고 읽기 쉽습니다.

이러한 유형의 색상을 "On" 색상이라고 하며 표면의 "On" 나타난다는 사실을 나타냅니다. "On" 색상은 주로 텍스트, 아이콘 및 Stroke에 적용됩니다.

 

 

surface은 default "on" 색상 roles이며 surface Varient은 여전히 constrast 요구 사항을 충족하면서 낮은 강조 대안적 색상입니다.

Outlines

outlines은 사용성을 향상시키기 위해 경계와 강조를 만드는 유틸리티 색상입니다.

outlines 색상은 모든 surface 색상과 3:1 대비를 갖습니다.

 

outlines varient은 구분선이나 장식 요소와 같이 3:1 대비가 필요하지 않을 때 장식 요소의 경계를 만드는 유틸리티 색상입니다.

 

 

dividers에는 contrast 요구 사항이 다르기 때문에 outlines 색상을 사용하지 마십시오. 대신 outlines varient 색상을 사용하세요.

 

카드와 같이 여러 요소를 포함하는 구성 요소에는 outlines 색상을 사용하지 마십시오. 대신 outlines varient  색상을 사용하세요.

 

chips 과 같은 클러스터된 요소 또는 서로 근접한 다른 UI 요소에는 outlines varient  색상을 사용하지 마세요

대신, outlines이나 surface 색상과 3:1 대비를 제공하는 다른 색상을 사용하십시오.

 

outline varient 색상을 사용하여 시각적 계층 구조를 만들거나 대상의 시각적 경계를 정의하지 마십시오.

대신 outlines 색상이나 surface 색상과 3:1 대비를 제공하는 다른 색상을 사용하십시오.

 

Additional roles

색 구성표에는 기본적으로는 구성 요소에 거의 또는 잘 사용되지 않는 일부 역할이 포함되어 있지만 더 큰 유연성을 위해 적용할 제품에 대한 옵션으로 제공됩니다. 이러한 색상은 제품 재량에 따라 선택적으로 사용되기 때문에 위에 자세히 설명된 공통 색상 이외의 추가 역할로 간주됩니다.

Inverse colors

Inverse roles은 구성 요소에 선택적으로 적용되어,  주변 UI의 색상과 반대되는 색상을 구현하여 대비 효과를 만듭니다.

 

Inverse surface 은 배경 채우기에 사용됩니다.

Inverse On Surface는 텍스트와 아이콘에 사용되고

Inverse Primary는 Inverse Surface 색상 위에 있는 텍스트 버튼과 같은 실행 가능한 요소에 사용됩니다.

Fixed accent colors

primary fixed,  secondary fixed 및 tertiary fixed은 밝은 테마, 어두운 테마에서 모두에서 동일한 색상을 유지하는 채우기 색상입니다.  이는 이러한 테마 사이에서 톤이 변경되는 컨테이너 강조 색상과 반대입니다. 

이러한 fixed 동작이 필요한 상황에서는 equivalent Container role를 생성하는  대신 Fixed color role을 사용할 수 있습니다.

primary Fixed dim, secondary fixed dim 및 tertiary fixed dim

fixed dim 역할은 equivalent fixed 색상에 비해 더 강하고 강조된 톤을 제공합니다.

더 깊은 색상이지만 동일한  fixed 동작이 필요한 경우에 사용할 수 있습니다.

 

 

밝은 테마와 어두운 테마로 표시되는 container fill 색상에 primary fixed(1)을 사용하는 FAB.

container 색상이 테마 간에 어떻게 동일하게 유지되는지 확인합니다.

비교를 위해 기본 container(2)를 container 채우기 색상으로 사용하는 FAB는 밝은 테마와 어두운 테마로 표시됩니다.

컨테이너 색상이 테마 사이에서 톤을 어떻게 변경된다.

 

 

 

container roles과 마찬가지로 baselines의 fixed color은 비텍스트 대비의 경우 3:1, 텍스트 대비의 경우 4.5:1과 같은 최소 대비 요구 사항을 통과하지 않습니다. 이러한 대비가 필요한 요소에는 적용하지 않아야 합니다.

최소 대비가 필요한 강조 색상에 primary, secondary 및 tertiary roles을 사용합니다.

Fixed 색상은 밝은 테마와 어두운 테마에서 동일하게 유지되기 때문에 테마가 변경되면 화면의 다른 색상 사이에서 강조되는 색상이 변경될 수 있습니다. 계층적 버튼 그룹 내에서와 같이 이러한 색상 관계가 중요한 상황에서는 적용하지 마십시오.

일반적으로  primary, secondary, tertiary 및 respective container roles을 상대적으로 강조할 필요가 있는곳에 사용한다.ㅌ

이러한 색상은 밝은 테마와 어두운 테마 사이에서 톤을 변경하여 테마 간에 일관된 시각적 계층 구조를 보장합니다.

On Fixed accent colors

On fixed colors은 해당 fixed 색상 "위"에 있는 텍스트 및 아이콘에 사용됩니다.

예를 들어 On Primary Fixed는 기본 고정 색상에 대한 텍스트 및 아이콘에 사용됩니다. 동등한 2차 및 3차 색상에도 동일한 사용법이 적용됩니다.

On Fixed Variant 색상은 해당 fixed 색상에 대해 더 낮은 강조가 필요한 텍스트 및 아이콘에 사용됩니다.

 예를 들어 On Primary Fixed Variant는 기본 고정 색상에 대한 낮은 강조 텍스트 및 아이콘에 사용됩니다. 동등한 2차 및 3차 색상에도 동일한 사용법이 적용됩니다.

강조되지 않은 텍스트에 On Primary Fixed varient(1)을 사용하고 강조된 텍스트에 On Primary Fixed(2)를 사용하는 primary fixed 배너