[Android] Material2 Color

Android, Flutter 에서 컬러를 설정하다 보면 Material Color를 볼 수 있다.
알고 사용하는 게 좋아 보여 정리 한다.

Material2 Color

Material2 디자인에서 자주 사용하는 색들로 12개를 대표적으로 설정,

Material2 디자인에서 시각적 일관성을 위해 사용하는 칼라 모음이다.

 

브렌드를 대표하는 색상

Attribute Name	Description	Default Value
colorPrimary	The color displayed most frequently across your app’s screens and components. This color should pass accessibilty guidelines for text / iconography when drawn on top of the surface or background color.	#6200EE	앱의 화면과 구성 요소 전반에서 가장 자주 표시되는 색상
colorPrimaryVariant	A tonal variation of the primary color.	#3700B3	primary 색상의 음영 변형
colorOnPrimary	A color that passes accessibility guidelines for text/iconography when drawn on top of the primary color.	#FFFFFF	primary 색상 위에 그려지는 색상
colorSecondary	The secondary branding color for the app, usually an accented complement to the primary branding color.	#03DAC6	앱의 보조 브랜딩 색상으로, 일반적으로 주요 브랜딩 색상에 대한 강조된 보완색
colorSecondaryVariant	A tonal variation of the secondary color.	#018786	secondary 색상의 음영 변형
colorOnSecondary	A color that passes accessibility guidelines for text/iconography when drawn on top of the secondary color.	#000000	secondary 색상 위에 그려지는 색상

추가 색상

Attribute Name	Description	Default Value
colorBackground	The background color appears behind scrollable content.	#FFFFFF	스크롤 가능한 콘텐츠의 배경색
colorOnBackground	A color that passes accessibility guidelines for text/iconography when drawn on top of the background color.	#000000	background 색상 위에 그려지는 색상
colorSurface	Surface colors affect surfaces of components, such as cards, sheets, and menus.	#FFFFFF	카드, 시트, 메뉴 등의 구성 요소 색상
colorOnSurface	A color that passes accessibility guidelines for text/iconography when drawn on top of the surface color.	#000000	surface 색상 위에 그려지는 색상
colorError	Error color indicates errors states, for components such as text fields	#B00020	텍스트 필드와 같은 구성 요소의 오류 색상
colorOnError	A color that passes accessibility guidelines for text/iconography when drawn on top of the error color.	#FFFFFF	error 색상 위에 그려지는 색상

‘ON’ color

App surfaces use colors from specific categories in your color palette, such as a primary color. Whenever elements, such as text or icons, appear in front of those surfaces, those elements should use colors designed to be clear and legible against the colors behind them.

This category of colors is called “on” colors, referring to the fact that they color elements that appear “on” top of surfaces that use the following colors: a primary color, secondary color, surface color, background color, or error color. When a color appears “on” top of a primary color, it’s called an “on primary color.” They are labelled using the original color category (such as primary color) with the prefix “on.”

“On” colors are primarily applied to text, iconography, and strokes. Sometimes, they are applied to surfaces.

The default values for “on” colors are #FFFFFF and #000000.

뒤에 있는 색상과 명확하고 가독성 있게 표현될 수 있도록 설계된 색상

참고 링크

• https://m2.material.io/develop/android/theming/color
• https://m2.material.io/design/color/the-color-system.html#color-theme-creation