Material 3 Expressive 색상 프레임워크는 HCT (색조, 채도, 색조) 색상 시스템에 매핑된 두 개의 시드 색상을 기반으로 동적 색상 테마 설정을 사용합니다.
필수 용어
색상 역할
색상 역할은 색칠하기 캔버스의 '숫자'와 마찬가지로 특정 UI 요소에 할당됩니다. 이러한 컨테이너의 이름은 primary, on primary, primary container와 같습니다. 밝은 테마와 어두운 테마 모두에 동일한 색상 역할이 사용됩니다. 모든 색상 역할 보기
HCT
HCT는 색조, 채도, 색조를 나타냅니다.
색조, 채도, 색조 (HCT)로 색상 정의
HCT 색상 생성기는 하나의 시드 색상에서 색상 팔레트 세트를 만들어 색조(색상), 크로마 (채도), 색조 (밝기)를 기반으로 색상을 정의하는 3차원 색상 모델을 만듭니다.
기본, 보조, 3차 등 세 가지 주요 강조 색상이 있습니다. 기본 색상이 가미된 다양한 그레이 색조와 같은 중성 색조는 단색 특성으로 인해 리치 콘텐츠의 컨테이너 색상으로 사용하기에 적합합니다.
색조
색조는 빨간색, 주황색, 노란색, 녹색, 파란색, 보라색과 같은 색에 대한 인식입니다. 색조는 0~360 사이의 숫자로 수치화되며 원형 스펙트럼입니다 (값 0과 360은 동일한 색조임).
채도
Chroma는 색상이 얼마나 다채로운지 또는 중성 (회색, 검은색 또는 흰색)인지를 나타냅니다. 크로마는 0 (완전히 회색, 검은색 또는 흰색)에서 무한대 (가장 선명한 색상)까지의 숫자로 수치화되지만 HCT의 크로마 값은 최대 120입니다.
생물학적 및 화면 렌더링 제한으로 인해 색조와 색조에 따라 최대 크로마 값이 다릅니다.
어조
색조는 색상이 얼마나 밝거나 어두운지를 나타냅니다. 색조는 휘도라고도 합니다. 색조는 0 (순수한 검은색, 밝기 없음)에서 100 (순수한 흰색, 완전한 밝기) 사이의 숫자로 수치화됩니다.
색조는 대비를 결정하므로 시각적 접근성에 매우 중요합니다. 색조 차이가 클수록 대비가 높아지고 차이가 작을수록 대비가 낮아집니다.
동적 색상 (색상 테마 설정)
Wear OS는 지정된 두 가지 시드 색상에서 파생된 웹 콘텐츠 접근성 가이드라인 (WCAG)-AAA를 준수하는 테마 설정 시스템을 구현합니다. 특히 이러한 시드 색상은 기본 및 보조 팔레트의 기반이 됩니다. 시스템은 이 두 가지 초기 색상을 사용하여 기본, 보조, 3차, 노출 영역 팔레트를 포함하는 포괄적인 색상 팔레트를 생성합니다. 그런 다음 생성된 테마가 Wear OS 구성요소, 시스템 UI 요소, 카드, 앱에 적용됩니다.
각 시계 화면은 기본 및 3차 팔레트에 사용되는 두 가지 시드 색상을 정의합니다.이러한 시드는 5가지 색조 범위가 되는 알고리즘을 거치며, 특정 색조 (휘도 기반)는 스키마로 구성된 사전 정의된 역할에 삽입됩니다. 색상은 디자인 토큰을 통해 스키마에 매핑됩니다.그런 다음 각 디자인 토큰이 동적 색상 사용을 선택한 SysUI, 카드, 앱에 적용됩니다.
원하는 대로 특정 시드 색상 또는 브랜드 색상을 사용하여 동적 색상을 파생할 수 있습니다.
종자 색상
동적 색상은 특정 시드 색상을 기반으로 접근성이 좋은 색 구성표를 자동으로 만듭니다.
UI에 여러 개의 소스 색상이 포함될 수 있으므로 올바른 색상 역할이 제품의 올바른 구성요소에 매핑되도록 하려면 처음에는 기준 색 구성표를 사용하여 디자인하는 것이 가장 좋습니다. Material 테마 빌더를 사용하여 다양한 소스 색상에서 UI 모의 뷰가 어떻게 표시되는지 확인하고 필요에 따라 설정을 조정합니다.
색상 팔레트 (워치 페이스 시드 색상)
카드에 적용된 색상 테마
앱 화면에 적용된 색상 테마
브랜드 색상
Material 3 Expressive에서 색상 역할을 처리하는 방식과 마찬가지로 Wear OS는 동적이고 접근성이 뛰어난 색상 표현을 통해 개별화된 환경에 색상을 적용합니다. Wear OS는 웨어러블 인터페이스가 검은색 배경에 빌드되므로 어두운 테마만 사용합니다. 터치 기기에서 실행되는 플랫폼이므로 Wear OS는 마우스 오버 및 포커스 상태가 많이 필요하지 않으므로 색상 팔레트가 더 제한적입니다. Wear OS용 색상 테마 빌더 도구를 사용하여 브랜드를 중심으로 맞춤 테마를 빌드하고 Material Design 토큰을 지원하며 시스템 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 system\n\nThe Material 3 Expressive color framework uses dynamic color theming, based on\ntwo seed colors mapped on the HCT (Hue, Chroma and Tone) color system.\n\nEssential terms\n---------------\n\nColor role\n: Like the \"numbers\" on a paint-by-number canvas, color roles are assigned to\n specific UI elements. They have names like primary, on primary, and primary\n container. The same color role is used for both light and dark themes. See all\n color roles\n\nHCT\n: HCT stands for hue, chroma, and tone.\n\nDefine colors with hue, chroma, and tone (HCT)\n----------------------------------------------\n\nHCT color generator creating a set of color palettes from one seed color to\ncreates a three-dimensional color model that defines colors based on their hue\n(color), chroma (saturation), and tone (lightness)\n\nThere are three main accents colors: primary, secondary and tertiary. Neutral\nshades, such as various tones of gray with a hint of primary color, are ideal\nfor use as container colors for rich content due to their monochromatic nature.\n\n### Hue\n\n\nHue is the perception of a color, such as red, orange, yellow, green, blue, and\nviolet. Hue is quantified by a number ranging from 0-360 and is a circular\nspectrum (values 0 and 360 are the same hue). \n\n\u003cbr /\u003e\n\n### Chroma\n\n\nChroma is how colorful or neutral (gray, black or white) a color appears. Chroma\nis quantified by a number ranging from 0 (completely gray, black or white) to\ninfinity (most vibrant), though chroma values in HCT top out at roughly 120.\n\nBecause of biological and screen rendering limitations, different hues and\ndifferent tones will have different maximal chroma values. \n\n\u003cbr /\u003e\n\n### Tone\n\n\nTone is how light or dark a color appears. Tone is sometimes also referred to as\n*luminance*. Tone is quantified by a number ranging from 0 (pure black, no\nluminance) to 100 (pure white, complete luminance).\n\nTone is crucial for visual accessibility because it determines contrast. Colors\nwith a greater difference in tone create higher contrast, while those with a\nsmaller difference create lower contrast. \n\n\u003cbr /\u003e\n\nDynamic color (color theming)\n-----------------------------\n\nWear OS implements a theming system compliant with [Web Content Accessibility\nGuidelines (WCAG)-AAA](https://www.w3.org/TR/WCAG22/#contrast-enhanced), derived from two designated *seed\ncolors*. Specifically, these seed colors serve as the basis for primary and\ntertiary palettes. Using these two initial colors, the system generates a\ncomprehensive color palette encompassing primary, secondary, tertiary, and\nsurface palettes. Subsequently, this generated theme is applied across Wear OS\ncomponents, System UI elements, tiles, and apps.\nEach Watch face defines two seed colors, used for primary and tertiary palettes.\n\n\u003cbr /\u003e\n\nThese seeds are put through an algorithm that becomes five tonal ranges, specific tones (based on luminance) are slotted into the predefined roles that consist of a scheme. Colors are mapped to a scheme through design tokens.\n\n\u003cbr /\u003e\n\nEach design token is then applied to the SysUI, tiles and apps that have opted in to using dynamic color.\n\n\u003cbr /\u003e\n\nDepending on your preference, you can use either a specific seed color or a\nbrand color to derive your dynamic color.\n\n### From seed color\n\nDynamic color will automatically create an accessible color scheme based on a\nspecific seed color.\n\nBecause the UI could end up with any number of different source colors, it's\nbest to initially design using the baseline color scheme so you can ensure the\nright color roles are mapped to the right components in your product. Use the\nMaterial Theme Builder to see how your UI mocks look across a range of source\ncolors and adjust settings as needed.\n\n\nColor palette (from Watch face seed colors) \n\nColor theme applied to a Tile \n\nColor theme applied to an app screen\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### From brand color\n\nSimilar to the way Material 3 Expressive treats color roles, Wear OS applies\ncolor to individualized experiences with dynamic and accessible color\nexpression. Wear OS uses only the dark theme because the wearable interface is\nbuilt on a black background. Being a platform that runs on touch devices, Wear\nOS also has a more limited color palette as it doesn't require as many hover and\nfocus states. Use the Wear OS-specific color theme building tools to build a\ncustom theme around your brand and generate the full reference palettes and\nassigned color roles that support Material Design tokens and are built to work\nseamlessly with system UI components.\n\n\nColor palette (from artwork seed colors) \n\nColor theme applied to a Tile \n\nColor theme applied to an app screen\n\n\u003cbr /\u003e"]]
