Adding custom colors to a scheme

scheme of color는 주로 key color과 complementary(보색)으로 생성된 톤의 결과입니다.

사용자 정의 색상은 core 체계와 동일한 처리를 거치므로 complementary(보색) 세트가 자동으로 할당되는 a custom key color  색상을 입력할 수 있습니다.

Inputting a key color generates tones for custom color roles

 

https://m3.material.io/theme-builder#/dynamic

Material Design

 

Material Theme Builder를 사용하여 팀은 사용자 정의 색상 역할에 대한 톤을 생성하기 위해 모든 key 색상을 입력할 수 있습니다. 

아래 다이어그램에서 노란색, 주황색 및 녹색은 사용자 정의 색상 입력입니다. 

사용자 지정 색상 입력은 톤으로 변환되어 색상 역할에 매핑되는 톤 범위를 자동으로 제공합니다.

 

 사용자 지정 색상의 예시

a custom light scheme에서 Roles 대응하여, 사용되는 4개의 호환 가능한 톤 그룹으로 추가하고 변환된다.

 

사용자 정의 색상 roles을 생성할 때 key 색상과 일치하도록 톤을 조정할 수 있습니다.

 

이 옵션을 활성화하면,

사용자 정의 색상이 더 밝거나 어두워져 scheme의 색상 간에 accessible contrast 를 유지하면서 key 색상에 더 가깝게 나타날 수 있습니다.

입력된 key 색상과 일치하도록 톤이 조정되지 않은 경우 사용자 정의 노란색, 주황색 및 녹색 color roles

입력한 key 색상과 일치하도록 톤을 조정할 때 사용자 정의 노란색, 주황색 및 녹색 color roles

 

전체적으로  core scheme 색상과 사용자 정의 색상이 전체 구성표를 구성합니다.

결과  scheme에서 적용할 색상을 선택할 수 있습니다.

왼쪽: M3 baseline light scheme의 core scheme 

오른쪽: scheme에서 사용자 정의 색상을 구성하는 사용자 정의 색상 입력의 예

Harmonization

Harmonization는 제품의 색상이 사용자 색상과 더 잘 어울리도록 색조와 채도를 자동으로 약간 바꿈으로서,

앱에 새로운 색상을 더 매끄럽게 추가하고 도입합니다.

 

core scheme를 적용할 때, 동일한 원리로 color roles 및 relationships를 사용하여 사용자 지정 색상을 적용합니다.

 

Content 및 On Content Color roles은 이 버튼에 사용되며 녹색 톤은 조화로운 색상 출력을 보여줍니다.

Container and On Container color roles used for cards

 

Product-specific custom colors

사용자 정의 색상은 error와 같은 conventional meaning를 전달하는 방법으로,

UI의 표현 색상과 함께 종종 필요한 특정 색조를 정합니다.

dynamic color environment.의 가변성과 함께 팀에 더 많은 제어 및 사용자 정의를 제공하는 데 사용됩니다.

 

머티리얼 테마 빌더에는 사용자 생성 색상과 결합할 때,

시각적 균형과 접근 가능한 contrast가 달성되도록,  사용자 지정 색상의 톤을 전환할 수 있는 색상 조화 기능이 포함됩니다.

 

사용자 정의 색상(1)은 personal scheme를 정의하는 사용자의 소스 색상(2)에 대해 평가됩니다. 

결과는 두 입력이 UI에서 성공적으로 결합될 수 있도록 원래 색상 톤에서 조화된 변형(3)입니다.

머티리얼은 사용자 정의 색상이 사용자 색상과 짝을 이룰 때 불협화음 색상 체계를 생성하지 않도록 색상 조화를 제공합니다.

조화를 통해 사용자 색상에 맞게 조정하고 전체 구성표에서 편안함을 느낄 수 있도록 색상을 약간 변경하여 앱에 새로운 색상을 더 원활하게 추가할 수 있습니다.