Baseline color scheme tokens

M3  baseline color scheme는 user-generated color schemes와 동일한 역할 및 토큰 매핑을 사용합니다. 

 

 

UI 및 구성 요소 전체에 적용되는 Material Baseline color 입니다. 

baseline color roles 을 색상 매핑의 시작점이되며,  앱에서 dynamic 색상을 사용할 수 있습니다.

 

M3 baseline color scheme는 사용자 지정 테마의 색조 관계 논리를 따르는 보라색 기본 색과 보색 강조 색을 사용합니다.

 

baseline color은 관련 tone 그룹으로 변환됩니다.

톤은 UI의 요소에 적용될 때 대비와 시각적 흥미를 유발하는 역할에 매핑됩니다.

M3 baseline의 5가지 주요 색상에서 생성된 동일한 색조 팔레트는 dark scheme 를 구성하는 색상도 생성합니다.

Baseline color scheme tokens

Role	System token	Light scheme ref token	Dark scheme ref token	Light scheme default value	Dark scheme default value
Primary	md.sys.color.primary	md.ref.palette.primary40	md.ref.palette.primary80	#6750A4	#D0BCFF
Primary container	md.sys.color.primary-container	md.ref.palette.primary90	md.ref.palette.primary30	#EADDFF	#4F378B
Secondary	md.sys.color.secondary	md.ref.palette.secondary40	md.ref.palette.secondary80	#625B71	#CCC2DC
Secondary container	md.sys.color.secondary-container	md.ref.palette.secondary90	md.ref.palette.secondary30	#E8DEF8	#4A4458
Tertiary	md.sys.color.tertiary	md.ref.palette.tertiary40	md.ref.palette.tertiary80	#7D5260	#EFB8C8
Tertiary container	md.sys.color.tertiary-container	md.ref.palette.tertiary90	md.ref.palette.tertiary30	#FFD8E4	#633B48
Surface	md.sys.color.surface	md.ref.palette.neutral99	md.ref.palette.neutral10	#FFFBFE	#1C1B1F
Surface variant	md.sys.color.surface-variant	md.ref.palette.neutral-variant90	md.ref.palette.neutral-variant30	#E7E0EC	#49454F
Background	md.sys.color.background	md.ref.palette.neutral99	md.ref.palette.neutral10	#FFFBFE	#1C1B1F
Error	md.sys.color.error	md.ref.palette.error40	md.ref.palette.error80	#B3261E	#F2B8B5
Error container	md.sys.color.error-container	md.ref.palette.error90	md.ref.palette.error30	#F9DEDC	#8C1D18
On primary	md.sys.color.on-primary	md.ref.palette.primary100	md.ref.palette.primary20	#FFFFFF	#371E73
On primary container	md.sys.color.on-primary-container	md.ref.palette.primary10	md.ref.palette.primary90	#21005E	#EADDFF
On secondary	md.sys.color.on-secondary	md.ref.palette.secondary100	md.ref.palette.secondary20	#FFFFFF	#332D41
On secondary container	md.sys.color.on-secondary-container	md.ref.palette.secondary10	md.ref.palette.secondary90	#1E192B	#E8DEF8
On tertiary	on-tertiary	md.ref.palette.tertiary100	md.ref.palette.tertiary20	#FFFFFF	#492532
On tertiary container	on-tertiary-container	md.ref.palette.tertiary10	md.ref.palette.tertiary90	#370B1E	#FFD8E4
On surface	md.sys.color.on-surface	md.ref.palette.neutral10	md.ref.palette.neutral90	#1C1B1F	#E6E1E5
On surface variant	md.sys.color.on-surface-variant	md.ref.palette.neutral-variant30	md.ref.palette.neutral-variant80	#49454E	#CAC4D0
On error	md.sys.color.on-error	md.ref.palette.error100	md.ref.palette.error20	#FFFFFF	#601410
On error container	md.sys.color.on-error-container	md.ref.palette.error10	md.ref.palette.error90	#410E0B	#F9DEDC
On background	md.sys.color.on-background	md.ref.palette.neutral10	md.ref.palette.neutral90	#1C1B1F	#E6E1E5
Outline	md.sys.color.outline	md.ref.palette.neutral-variant50	md.ref.palette.neutral-variant60	#79747E	#938F99
Outline variant	md.sys.color.outline-variant	md.ref.palette.neutral-variant80	md.ref.palette.neutral-variant30	#C4C7C5	#444746
Shadow	md.sys.color.shadow	md.ref.palette.neutral0	md.ref.palette.neutral0	#000000	#000000
Surface tint	md.sys.color.surface-tint-color	md.sys.color.primary	md.sys.color.primary	#6750A4	#D0BCFF
Inverse surface	md.sys.color.inverse-surface	md.ref.palette.neutral20	md.ref.palette.neutral90	#313033	#E6E1E5
Inverse on surface	md.sys.color.inverse-on-surface	md.ref.palette.neutral95	md.ref.palette.neutral20	#F4EFF4	#313033
Inverse primary	md.sys.color.inverse-primary	md.ref.palette.primary80	md.ref.palette.primary40	#D0BCFF	#6750A4
Scrim	md.sys.color.scrim	md.ref.palette.neutral0	md.ref.palette.neutral0	#000000	#000000