컬러 시스템이란, 브랜드 또는 스타일을 반영하기 위한 색상 테마를 결정짓는 컬러 정보. UI에서 컬러를 활용하여 우선순위 및 계층적인 개념을 표현할 수 있으며 상호작용 요소로 활용되기도 함.
또한, 접근성에 대한 개념을 염두해서 컬러에 대한 정보의 제약이 없도록 사용해야 함.
UI 내에서의 배색
UI에서 배색은 우선 순위에 따라 Primary, Secondary 크게 2가지를 주로 활용하며 웹 애플리케이션처럼 화면이 넓고 우선 순위가 다양한 경우 Tertiary를 사용하기도 함. Primary Color는 클릭을 유도해야 하는 버튼 같은 요소에 사용되며 주로 브랜드 컬러를 Primary로 등록하여 활용함.
또한, 성공, 경고, 에러 등의 대한 색상은 System Color로 지정하여 활용함.
UI에서 컬러를 사용할 때 유도하고자 하는 영역에
배색의 황금 비율
색 분배에서 주조색, 보조색, 배경색의 비율을 5:25:70으로 하는 것을 황금비율이라는 의견도 있는데, 앱 디자인 내에서 유저에게 한 화면에서 한 가지 행동을 주로 제안해야 할 경우 개인적으로 5:15:80 정도가 적절함. (여기서 15는 그래픽 아이콘, 혹은 이미지 요소 내에 컬러로 쳐도 괜찮아 보임)
주의점
너무 많은 컬러 사용은 지양해야 함. UI 내 사용자가 콘텐츠에 집중할 수 있도록 불필요한 컬러는 제외하고, 행동을 유도해야 하는 경우나 강조하여 정보를 안내해야 하는 경우에만 적절한 컬러를 사용해야 함.
참고
https://material.io/design/color/the-color-system.html#color-theme-creation