Color System(keyColor & tone)

Key colors

 

색 구성표의 기초는 13가지 톤이 있는 별도의 색조 팔레트와 개별적으로 관련된 5가지 key 색상 세트입니다.

각 색조 팔레트의 특정 색조는 UI 전체의 색상 역할에 할당됩니다.

주요 색상은 동적 색상 구성표를 만들기 위한 기초입니다. 

주요 색상이 설정되면 Material의 알고리즘은 상호 작용 상태, 오류 및 접근 가능한 대비를 표현하는 데 필요한 전체 색상 스펙트럼을 지정합니다. 맞춤 색상도 체계에 추가할 수 있습니다. 

 

Neutral colors

neutral key 색상은 배경에 대한 surface 색상 역할과 강조 텍스트 및 아이콘에 사용되는 색상을 도출하는 데 사용됩니다.

neutral varient key 색상은 텍스트, 아이콘 및 구성 요소 윤곽선과 같은 중간 강조 요소에 대한 색상 역할을 파생하는 데 사용됩니다.

Additional colors

Error colors

강조 및 중립 키 색상 외에도, 색상 시스템에는 Error에 대한 시맨틱 색상 역할이 포함되며, Error 역할 자체의 형태로 Error 발생, Error 컨테이너 및 Error 발생 컨테이너 역할이 추가됩니다.

 

Product-specific custom colors

사용자 정의 색상은 Error와 같은 conventional 의미를 전달하는 방법과 유사하게,  UI의 표현 색상과 함께 종종 필요한 특정 색상으로 고정되어 있다. 또한 dynamic color 환경의 가변성과 함께 팀에 더 많은 제어 및 사용자 정의를 제공하는 데 사용됩니다.

 

Tonal palettes

100 톤은 항상 100% 흰색으로 범위에서 가장 밝은 톤입니다. 0 톤은 100% 검정색이며 범위에서 가장 어두운 톤입니다.

One key color becomes thirteen tones

색조 팔레트는 흰색과 검정색을 포함하여 13가지 색조로 구성됩니다. 

톤 값 100은 빛이 최대라는 개념과 동일하며 결과는 흰색입니다. 

0에서 100 사이의 모든 톤 값은 색상에 존재하는 빛의 양을 나타냅니다.

 

각 색상의 색조 값은 해당 역할과 관련된 숫자로 표현됩니다.

primary40은 tone 값이 40인 primary key 색상입니다.