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
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
m3.material.io
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)입니다.
머티리얼은 사용자 정의 색상이 사용자 색상과 짝을 이룰 때 불협화음 색상 체계를 생성하지 않도록 색상 조화를 제공합니다.
조화를 통해 사용자 색상에 맞게 조정하고 전체 구성표에서 편안함을 느낄 수 있도록 색상을 약간 변경하여 앱에 새로운 색상을 더 원활하게 추가할 수 있습니다.