با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
چارچوب رنگی Material 3 Expressive از تم رنگی پویا، بر اساس دو رنگ دانه‌ای که بر روی سیستم رنگی HCT (Hue، Chroma و Tone) نقشه‌برداری شده‌اند، استفاده می‌کند.
شرایط ضروری
نقش رنگ
مانند "اعداد" روی بوم نقاشی به عدد، نقش های رنگی به عناصر UI خاص اختصاص داده می شود. آنها نام هایی مانند ظرف اولیه، روی اولیه و اولیه دارند. نقش رنگی یکسان برای تم های روشن و تاریک استفاده می شود. همه نقش های رنگی را ببینید
HCT
HCT مخفف hue، chroma و tone است.
رنگ ها را با رنگ، رنگ و تن (HCT) تعریف کنید
مولد رنگ HCT مجموعه ای از پالت های رنگی را از یک رنگ دانه ایجاد می کند تا یک مدل رنگی سه بعدی ایجاد کند که رنگ ها را بر اساس رنگ (رنگ)، رنگ (اشباع) و تن (روشنی) آنها تعریف می کند.
سه رنگ اصلی وجود دارد: اصلی، ثانویه و سوم. سایه های خنثی، مانند رنگ های مختلف خاکستری با رنگ اصلی، به دلیل ماهیت تک رنگ، برای استفاده به عنوان رنگ های ظرف برای محتوای غنی ایده آل هستند.
رنگ
رنگ عبارت است از درک یک رنگ، مانند قرمز، نارنجی، زرد، سبز، آبی و بنفش. Hue با عددی از 0 تا 360 اندازه‌گیری می‌شود و یک طیف دایره‌ای است (مقادیر 0 و 360 همان رنگ هستند).
کروما
کروما رنگی یا خنثی (خاکستری، سیاه یا سفید) یک رنگ است. کروما با عددی از 0 (کاملا خاکستری، سیاه یا سفید) تا بی نهایت (پر جنب و جوش ترین) تعیین می شود، اگرچه مقادیر کروما در HCT تقریباً 120 بالاتر می رود.
به دلیل محدودیت‌های بیولوژیکی و رندر صفحه نمایش، رنگ‌های مختلف و تن‌های مختلف حداکثر مقادیر رنگی متفاوتی خواهند داشت.
لحن
تون میزان روشن یا تیره بودن یک رنگ است. تون گاهی اوقات به عنوان درخشندگی نیز شناخته می شود. تن با عددی از 0 (سیاه خالص، بدون درخشندگی) تا 100 (سفید خالص، روشنایی کامل) تعیین می شود.
لحن برای دسترسی بصری بسیار مهم است زیرا کنتراست را تعیین می کند. رنگ‌هایی که تفاوت رنگ بیشتری دارند کنتراست بالاتری ایجاد می‌کنند، در حالی که رنگ‌هایی که تفاوت کمتری دارند کنتراست کمتری ایجاد می‌کنند.
رنگ پویا (تم رنگی)
Wear OS یک سیستم موضوعی منطبق با دستورالعمل‌های دسترسی به محتوای وب (WCAG)-AAA را پیاده‌سازی می‌کند که از دو رنگ دانه تعیین‌شده مشتق شده است. به طور خاص، این رنگ دانه ها به عنوان پایه ای برای پالت های اولیه و سوم عمل می کنند. با استفاده از این دو رنگ اولیه، سیستم یک پالت رنگ جامع شامل پالت های اولیه، ثانویه، سوم و سطحی تولید می کند. متعاقباً، این طرح زمینه ایجاد شده در اجزای Wear OS، عناصر System UI، کاشی‌ها و برنامه‌ها اعمال می‌شود.
هر صفحه ساعت دو رنگ دانه را تعریف می کند که برای پالت های اولیه و ثالث استفاده می شود. این دانه‌ها از طریق الگوریتمی قرار می‌گیرند که به پنج محدوده تنی تبدیل می‌شود، زنگ‌های خاص (بر اساس درخشندگی) در نقش‌های از پیش تعریف‌شده که از یک طرح تشکیل شده‌اند، قرار می‌گیرند. رنگ ها از طریق نشانه های طراحی به یک طرح نگاشت می شوند. سپس هر کد طراحی روی SysUI، کاشی‌ها و برنامه‌هایی که استفاده از رنگ پویا را انتخاب کرده‌اند اعمال می‌شود.
بسته به ترجیح خود، می توانید از یک رنگ دانه خاص یا یک رنگ برند برای استخراج رنگ پویا خود استفاده کنید.
از رنگ دانه
رنگ پویا به طور خودکار یک طرح رنگ قابل دسترس بر اساس یک رنگ دانه خاص ایجاد می کند.
از آنجایی که رابط کاربری ممکن است با هر تعداد رنگ منبع مختلف به پایان برسد، بهتر است در ابتدا با استفاده از طرح رنگ پایه طراحی کنید تا بتوانید مطمئن شوید که نقش های رنگی مناسب به اجزای مناسب در محصول شما نگاشت شده است. از Material Theme Builder استفاده کنید تا ببینید که تمسخرهای UI شما در طیف وسیعی از رنگ‌های منبع چگونه به نظر می‌رسند و تنظیمات را در صورت نیاز انجام دهید.
پالت رنگی (از رنگ‌های دانه واچ فیس)
تم رنگی روی کاشی اعمال می شود
تم رنگی روی صفحه برنامه اعمال می شود
از رنگ برند
مشابه روشی که Material 3 Expressive با نقش‌های رنگی رفتار می‌کند، Wear OS رنگ را به تجربیات فردی با بیان رنگی پویا و قابل دسترس اعمال می‌کند. Wear OS فقط از تم تیره استفاده می کند زیرا رابط پوشیدنی بر روی پس زمینه سیاه ساخته شده است. Wear OS پلتفرمی است که بر روی دستگاه‌های لمسی اجرا می‌شود، همچنین دارای پالت رنگ محدودتری است زیرا به حالت‌های شناور و فوکوس زیادی نیاز ندارد. از ابزارهای ساخت تم رنگی مخصوص Wear OS برای ایجاد یک تم سفارشی در اطراف برند خود استفاده کنید و پالت های مرجع کامل و نقش های رنگی اختصاص داده شده را ایجاد کنید که از نشانه های طراحی متریال پشتیبانی می کنند و برای کار یکپارچه با اجزای رابط کاربری سیستم ساخته شده اند.
پالت رنگ (از رنگ دانه آثار هنری)
تم رنگی روی کاشی اعمال می شود
تم رنگی روی صفحه برنامه اعمال می شود
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین بهروزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","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-29 بهوقت ساعت هماهنگ جهانی."],[],[],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"]]
