Wear Material 3 Expressive 색상 시스템은 주요 구성요소에 세 가지 강조 레이어(기본, 보조, 3차)와 두 가지 중성 표면 레이어를 사용합니다. 각 역할은 일관된 대비를 가진 다양한 값을 제공하므로 표현력이 뛰어나면서도 접근하기 쉬운 색상 조합을 사용하여 모든 테마에서 통일된 환경을 제공할 수 있습니다.
역할이 있는 색상 테마의 예
색상 역할이란 무엇인가요?
색상 역할은 색칠하기 캔버스의 '숫자'와 같습니다. 색상은 UI 요소와 색상이 적용되는 위치를 연결하는 역할을 합니다.
색상 역할이 Material 구성요소에 매핑됨: 정적 기준 색 구성표를 사용하든 동적 색상을 사용하든 이러한 색상 역할을 사용합니다. 제품에 맞춤 구성요소가 포함된 경우 이 색상 역할 세트에 맞춤 구성요소를 올바르게 매핑해야 합니다.
색상 역할이 접근성을 지원: 색상 시스템은 접근성이 더 뛰어난 색상 조합을 기반으로 합니다. 이러한 색상 쌍은 최소 3:1의 색상 대비를 제공합니다.
색상 역할이 토큰화됨: 역할은 토큰을 통해 디자인과 코드에 구현됩니다. 디자인 토큰은 디자인 시스템의 시각적 스타일에 포함된 작고 재사용 가능한 디자인 결정을 나타냅니다.
필수 용어
색상 역할 이름에 표시되는 주요 용어는 다음과 같습니다.
표시 경로: 배경과 강조도가 낮은 대형 화면 영역에 사용되는 역할입니다.
Primary, Secondary, Tertiary: 포그라운드 요소를 강조하거나 강조하지 않기 위해 사용되는 강조 색상 역할입니다.
컨테이너: 버튼과 같은 포그라운드 요소의 채우기 색상으로 사용되는 역할입니다. 텍스트나 아이콘에는 사용해서는 안 됩니다.
사용: 이 용어로 시작하는 역할은 페어링된 상위 색상 위에 텍스트 또는 아이콘의 색상을 나타냅니다. 예를 들어 on primary는 기본 채우기 색상과 대비되는 텍스트와 아이콘에 사용됩니다.
대안: 이 용어로 끝나는 역할은 변형이 아닌 쌍에 대한 강조도가 낮은 대안을 제공합니다. 예를 들어 윤곽선 변형은 윤곽선 색상의 강조가 덜 된 버전입니다.
기본 역할
기본 역할은 UI의 주요 구성요소(예: 가장자리 맞춤 버튼, 눈에 띄는 버튼, 활성 상태, 색조 버튼 스타일의 아이콘)에 사용됩니다.
기본
기본
기본(대비)
기본 버튼이나 클릭 유도 문구와 같이 UI에서 가장 중요한 작업에는 기본 역할을 사용합니다. 이 색상은 눈에 띄고 즉시 알아볼 수 있어야 사용자가 주요 상호작용으로 이동할 수 있습니다.
Primary-Dim
Primary-Dim
기본(대비)
어둡게 표시 역할은 일반적으로 기본 작업과 시각적으로 구분되어야 하지만 즉각적인 사용자의 주의나 상호작용이 필요하지 않은 요소에 사용됩니다.
Primary-Container
Primary-Container
On-Primary-Container
카드나 모달과 같은 배경 요소에 기본 컨테이너를 적용하여 섹션이나 선택한 상태를 강조 표시합니다. UI 내에서 중요한 콘텐츠 또는 진행 중인 활동에 사용자의 주의를 끌 수 있습니다.
보조 역할
보조 역할은 UI의 주요 구성요소에 사용되며, 기본 역할만큼 중요하지는 않지만 눈에 띄어야 합니다. 기본 및 보조를 레이아웃에서 함께 사용하여 차별화와 포커스를 만들 수 있습니다.
보조
보조
보조(대비)
보조 버튼이나 보조 작업과 같이 UI가 밀집된 영역에서 작업을 지원하는 데 보조 역할을 사용합니다. 복잡한 레이아웃에서 기본 요소를 가리지 않고 가시성을 유지합니다.
Secondary-Dim
Secondary-Dim
보조
Secondary-Dim 역할은 밀집된 영역의 수동 요소에 차분한 대비를 제공합니다. 보조 색상을 보완하면서 미묘한 깊이를 더하여 UI를 깔끔하게 유지하고 사용자가 탐색할 수 있도록 도와줍니다.
Secondary-Container
Secondary-Container
On-Secondary-Container
빽빽한 레이아웃에서 보조 요소를 정렬하려면 Secondary-Container를 적용합니다. 구조와 구분을 만들어 보조 콘텐츠가 구별되도록 하지만 강조되지 않도록 합니다.
고등 역할
3차 역할은 기본 색상과 보조 색상의 균형을 맞추거나 입력란과 같은 특정 요소로 관심을 유도하는 데 사용할 수 있는 대비 강조를 위해 사용됩니다.
또한 목표 달성 등 콘텐츠가 변경되거나 눈에 띄어야 할 때 이를 나타내는 데 도움이 될 수 있습니다.
3차
3차
On-Tertiary
Tertiary 역할은 핵심 요소에 관심을 끌기 위해 사용됩니다. 서드 파티 역할은 배지, 스티커, 특수 작업 요소와 같이 눈에 띄어야 하는 구성요소에 특히 효과적입니다.
Tertiary-Dim
Tertiary-Dim
3차
3차 작업과 관련 있지만 즉각적인 포커스가 필요하지 않은 버튼이나 작업에는 3차 어둡게 역할이 사용됩니다.
Tertiary-Container
Tertiary-Container
On-Tertiary-Container
배지에 관한 컬렉션이나 스티커와 같은 3차 관련 콘텐츠를 그룹화하는 배경에는 Tertiary-Container를 적용합니다. UI의 균형과 구조를 유지하면서 3차 요소를 강조합니다.
시맨틱 역할
Error-Red는 오류, 삭제, 긴급과 관련된 모든 항목을 심각한 문제로 표시하는 데 사용됩니다. 문제나 경고에 즉각적인 관심을 끌도록 설계되어 사용자가 수정 조치가 필요한 영역을 빠르게 파악할 수 있습니다.
오류-빨간색의 색조는 접근성 표준을 충족하기 위해 배경과 충분히 대비되어야 하며, 명확하게 표시되고 경고나 성공 메시지와 같은 다른 상태 색상과 구분되어야 합니다.
오류
오류
On-Error
의미적이지만 약간 테마 색조가 있는 빨간색으로, 삭제, 닫기 또는 닫기 작업(예: 스와이프하여 표시)을 나타냅니다. 오류-어두운 색상보다 약간 덜 경고적이고 긴급한 컨테이너 대안으로 추가되었습니다.
Error-Dim
Error-Dim
On-Error
의미적이지만 약간 테마 색조가 있는 빨간색으로, 안전 알림, 실패한 대화상자 오버레이 또는 중지 버튼과 같이 우선순위가 높은 오류 또는 긴급 작업을 나타냅니다.
Error-Container
Error-Container
On-Error-Container
오류 상태를 사용하는 구성요소의 눈에 덜 띄는 컨테이너 색상입니다. 활성 상태의 긴급 상황 공유 버튼이나 카드, 실패한 오버레이 대화상자와 같이 채워진 상태보다 상호작용이 적은 활성 오류 상태를 나타낼 수도 있습니다.
노출 영역 컨테이너 및 고도
노출 영역 컨테이너는 UI 내에서 깊이와 높이를 정의하는 데 중요한 역할을 하며, 색상을 통해 구조와 계층 구조를 제공하여 구성요소의 중요도와 상호작용에 따라 구성요소를 구분하는 데 도움이 됩니다.
Surface-Container-Low
Surface-Container-Low
노출 영역(대비)
On-Surface-Variant
Surface-Container 아래에 있어야 하는 펼쳐진 컨테이너(예: 알림의 펼쳐진 카드)에 적합합니다. 콘텐츠가 여전히 제한된 공간에서 이점을 얻을 수 있는 비대화형 카드에도 사용할 수 있습니다.
Surface-Container
Surface-Container
노출 영역(대비)
On-Surface-Variant
대부분의 요소의 기본 컨테이너 색상입니다. 중립적이고 적당한 강조 표시를 제공하므로 일반적인 UI 구성요소에 적합합니다.
Surface-Container-High
Surface-Container-High
노출 영역(대비)
On-Surface-Variant
Surface-Container 위에 배치되거나 Surface-Container와 함께 사용해야 하는 강조된 구성요소에 적합합니다. 이 색상은 UI의 중요한 영역에 초점과 계층 구조를 제공하는 데 도움이 됩니다.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-07-27(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-07-27(UTC)"],[],[],null,["# Color roles and tokens\n\nThe Wear Material 3 Expressive color system employs three accent layers\n(primary, secondary, tertiary) for key components and two neutral surface\nlayers. Each role offers a range of values with consistent contrast, enabling\nexpressive yet accessible color combinations for a unified experience across any\ntheme.\nAn example of a color theme with roles.\n\nWhat are color roles?\n---------------------\n\nColor roles are like the \"numbers\" in a paint-by-number canvas. They're the\nconnective tissue between elements of the UI and what color goes where.\n\n- **Color roles are mapped to Material components:** You'll use these color roles whether you're using the static baseline scheme or dynamic color. If your product contains custom components, they'll need to be properly mapped to this set of color roles.\n- **Color roles support accessibility:** The color system is built on more accessible color pairings. These color pairs provide a minimum of 3:1 color contrast.\n- **Color roles are tokenized:** Roles are implemented in design and code through tokens. A design token represents a small, reusable design decision that's part of a design system's visual style.\n\nEssential terms\n---------------\n\nHere are key terms you'll see in the names of color roles:\n\n- **Surface:** A role used for backgrounds and large, low-emphasis areas of the screen.\n- **Primary, Secondary, Tertiary:** Accent color roles used to emphasize or de-emphasize foreground elements.\n- **Container:** Roles used as a fill color for foreground elements like buttons. They shouldn't be used for text or icons.\n- **On:** Roles starting with this term indicate a color for text or icons on top of its paired parent color. For example, on primary is used for text and icons against the primary fill color.\n- **Variant:** Roles ending with this term offer a lower-emphasis alternative to its non-variant pair. For example, outline variant is a less emphasized version of the outline color.\n\nPrimary roles\n-------------\n\n\nPrimary roles are used for key components across the UI, such as the Edge\nHugging buttons, prominent buttons, active states, and icons on the tonal button\nstyles. \n\n\u003cbr /\u003e\n\n\n**Primary**\n\n1. Primary\n2. On-Primary\n\nUse the Primary role for the most important actions in the UI, like primary\nbuttons or calls to action. This color should stand out and be instantly\nrecognizable to guide the user toward key interactions. \n\n**Primary-Dim**\n\n1. Primary-Dim\n2. On-Primary\n\nDim roles are typically used for elements that need to be visually distinct from\nthe primary action but don't require immediate user attention or interaction. \n\n**Primary-Container**\n\n1. Primary-Container\n2. On-Primary-Container\n\nApply Primary Container for background elements like cards or modals to\nhighlight sections or selected states. It helps draw attention to important\ncontent or ongoing activities within the UI.\n\n\u003cbr /\u003e\n\nSecondary roles\n---------------\n\n\nSecondary roles are used for key components across the UI, which are not as\nimportant as the primary role, but still need to stand out. Primary and\nsecondary can be used together in layouts to create differentiation and focus. \n\n\u003cbr /\u003e\n\n\n**Secondary**\n\n1. Secondary\n2. On-Secondary\n\nUse the Secondary role for supporting actions in areas with dense UI, such as\nsecondary buttons or complementary actions. It maintains visibility without\novershadowing primary elements in complex layouts. \n\n**Secondary-Dim**\n\n1. Secondary-Dim\n2. Secondary\n\nThe Secondary-Dim role offers a muted contrast for passive elements in dense\nareas. It complements the secondary color while adding subtle depth, keeping the\nUI clean and helping users navigate. \n\n**Secondary-Container**\n\n1. Secondary-Container\n2. On-Secondary-Container\n\nApply Secondary-Container for organizing secondary elements in dense layouts. It\ncreates structure and separation, ensuring secondary content is distinguishable\nbut not dominant.\n\n\u003cbr /\u003e\n\nTertiary roles\n--------------\n\n\nTertiary roles are used for contrasting accents to balance primary and secondary\ncolors or bring heightened attention to an element such as an input field.\nTertiary roles can also help indicate when content changes or should stand out,\nsuch as a goal being reached. \n\n\u003cbr /\u003e\n\n\n**Tertiary**\n\n1. Tertiary\n2. On-Tertiary\n\nThe Tertiary role is used for drawing attention to key elements. Tertiary roles\nare particularly effective for components that need to stand out, such as\nbadges, stickers, or special action elements. \n\n**Tertiary-Dim**\n\n1. Tertiary-Dim\n2. Tertiary\n\nUse the Tertiary Dim role for buttons or actions that are related to tertiary\nactions yet don't require immediate focus. \n\n**Tertiary-Container**\n\n1. Tertiary-Container\n2. On-Tertiary-Container\n\nApply Tertiary-Container for backgrounds that group tertiary-related content,\nlike collections of badges or stickers. It emphasizes tertiary elements while\nmaintaining balance and structure in the UI.\n\n\u003cbr /\u003e\n\nSemantic roles\n--------------\n\n\nError-Red is used to indicate critical issues as error, delete, and anything\nrelated to emergency. It is designed to draw immediate attention to problems or\nwarnings, ensuring users can quickly identify areas that need corrective action.\nThe tone of Error-Red should maintain sufficient contrast against backgrounds to\nmeet accessibility standards, ensuring it is clearly visible and is\ndistinguishable from other status colors like warnings or success messages. \n\n\u003cbr /\u003e\n\n\n**Error**\n\n1. Error\n2. On-Error\n\nA semantic, yet slightly theme-tinted red, which indicates remove, delete, close\nor dismiss actions, such as Swipe to Reveal. Added as a container alternative\nthat is slightly less alarming and urgent than the error-dim color. \n\n**Error-Dim**\n\n1. Error-Dim\n2. On-Error\n\nA semantic, yet slightly theme-tinted red, which indicates high priority errors\nor emergency actions, such as safety alerts, failed dialog overlays or stop\nbuttons. \n\n**Error-Container**\n\n1. Error-Container\n2. On-Error-Container\n\nLess prominent container color, for components using the error state. Can also\nindicate an active error state which feels less interactive than a filled state,\nsuch as an active emergency sharing button or card, or on a failed overlay\ndialog.\n\n\u003cbr /\u003e\n\nSurface containers and elevation\n--------------------------------\n\n\nSurface containers are key in defining depth and elevation within the UI,\nproviding structure and hierarchy through color, helping to differentiate\ncomponents based on their importance and interaction. \n\n\u003cbr /\u003e\n\n\n**Surface-Container-Low**\n\n1. Surface-Container-Low\n2. On-Surface\n3. On-Surface-Variant\n\nGreat for an expanded container that needs to sit below Surface-Container, such\nas an expanded card in the Notification. Can also be used for non-interactive\ncards, where content still benefits from containment. \n\n**Surface-Container**\n\n1. Surface-Container\n2. On-Surface\n3. On-Surface-Variant\n\nThe default container color for most elements. It provides a neutral, moderate\nelevation, making it suitable for general UI components. \n\n**Surface-Container-High**\n\n1. Surface-Container-High\n2. On-Surface\n3. On-Surface-Variant\n\nIdeal for high-emphasis components that need to sit on top of, or in combination\nwith Surface-Container. This color helps bring focus and hierarchy to critical\nareas in the UI.\n\n\u003cbr /\u003e"]]
