Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 |
Tags
- 추상팩토리패턴
- 추상 팩토리
- 디자인패턴 #
- compose
- 옵저버 패턴
- 프로토타입 패턴
- El
- 안드로이드 디자인시스템
- r
- 함수형프로그래밍
- Observer Pattern
- 디자인패턴
- Singleton
- android designsystem
- Kotlin
- 코틀린
- 팩토리 메소드
- Abstract Factory
- factory method
- designPattern
- 빌터패턴
- builderPattern
- F
- Functional Programming
- 싱글톤
- Design Pattern
- ㅋㅁ
- PrototypePattern
- ㅓ
- material3
Archives
- Today
- Total
오늘도 더 나은 코드를 작성하였습니까?
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 |
'Android Material Design3' 카테고리의 다른 글
| Color & accessibility (0) | 2023.04.06 |
|---|---|
| Adding custom colors to a scheme (0) | 2023.04.05 |
| Colors Roles (0) | 2023.04.03 |
| Color System(keyColor & tone) (0) | 2023.04.03 |
| Copy linkColor & contrast (0) | 2023.03.31 |
'Android Material Design3' Related Articles
more
