تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يستخدم إطار عمل الألوان في Material 3 Expressive تنسيق ألوان ديناميكيًا استنادًا إلى
لونَين أساسيَين تم ربطهما بنظام الألوان HCT (الصبغة والتشبع والدرجة).
العبارات الأساسية
دور اللون
مثل "الأرقام" على لوحة الرسم حسب الأرقام، يتم تعيين أدوار الألوان
لعناصر محددة في واجهة المستخدم. وتحمل هذه الحِزم أسماء مثل primary وon primary وprimary
container. يتم استخدام دور اللون نفسه لكلٍ من المظهر الفاتح والداكن. الاطّلاع على كل
أدوار الألوان
HCT
يشير اختصار HCT إلى تدرج اللون والتشبع والدرجة.
تحديد الألوان باستخدام تدرّج اللون ودرجة التشبّع ونبرة اللون (HCT)
أداة إنشاء الألوان باستخدام نموذج HCT لإنشاء مجموعة من لوحات الألوان من لون أساسي واحد لإنشاء نموذج ألوان ثلاثي الأبعاد يحدّد الألوان استنادًا إلى تدرّج ألوانها (اللون) ودرجة تشبعها (التشبع) ونغمتها (السطوع)
هناك ثلاثة ألوان رئيسية لتمييز العناصر: اللون الأساسي والثانوي والثالثي. إنّ درجات الألوان
المحايدة، مثل درجات اللون الرمادي المختلفة مع لمسة من اللون الأساسي، مثالية
للاستخدام كألوان للحاويات التي تتضمّن محتوى غنيًا بسبب طبيعتها الأحادية اللون.
تدرج اللون
درجة اللون هي إدراك لون معيّن، مثل الأحمر والبرتقالي والأصفر والأخضر والأزرق والviolet. يتم قياس درجة اللون من خلال رقم يتراوح بين 0 و360، وهو طيف دائري (القيمة 0 والقيمة 360 هما درجة اللون نفسها).
كروما
ويشير إلى مدى حيوية اللون أو حياده (رمادي أو أسود أو أبيض). يتم قياس كثافة اللون
باستخدام رقم يتراوح بين 0 (رمادي أو أسود أو أبيض تمامًا)
وإلى ما لا نهاية (اللون الأكثر حيوية)، على الرغم من أنّ قيم كثافة اللون في HCT لا تتجاوز 120 تقريبًا.
بسبب القيود البيولوجية والقيود المتعلقة بعرض الشاشة، سيكون للألوان الأساسية المختلفة
والدرجات المختلفة قيم مختلفة للتشبع.
الأسلوب
درجة اللون هي مدى سطوع اللون أو قتامه. يُشار أحيانًا إلى درجة اللون باسم
السطوع. يتم قياس درجة اللون من خلال رقم يتراوح بين 0 (أسود خالص، بدون luminance) و100 (أبيض خالص، luminance كامل).
إنّ درجة اللون مهمة لتسهيل الاستخدام المرئي لأنّها تحدّد التباين. تؤدي الألوان التي تختلف اختلافًا كبيرًا في الدرجة اللونية إلى زيادة التباين، في حين تؤدي الألوان التي تختلف اختلافًا بسيطًا إلى انخفاض التباين.
الألوان الديناميكية (مظاهر الألوان)
ينفِّذ نظام التشغيل Wear OS نظامًا لتنسيقات الألوان متوافقًا مع إرشادات أدوات تمكين الوصول إلى محتوى الويب (WCAG)-AAA، والتي يتم استخراجها من سلسلتَين أساسيتَين
للألوان. على وجه التحديد، تُستخدَم ألوان البذرة هذه كأساس للوحات الألوان الأساسية
والثانوية. باستخدام هذين اللونَين الأوّلَين، ينشئ النظام
لوحة ألوان شاملة تتضمّن لوحات ألوان أساسية وثانوية وثالثية
ولوحة ألوان السطح. بعد ذلك، يتم تطبيق هذا المظهر الذي تم إنشاؤه على مكونات Wear OS
وعناصر واجهة مستخدم النظام وشاشات المعلومات والتطبيقات.
تحدِّد كل شاشة ساعة لونَين أساسيَين، يتم استخدامهما في لوحتَي الألوان الأساسية
والثالثية.تتمّ معالجة هذه البذور من خلال خوارزمية تصبح خمسة نطاقات تنا tonal
، ويتمّ إدراج نغمات معيّنة (استنادًا إلى الإضاءة) في الأدوار
المحدّدة مسبقًا التي تتكوّن من مخطّط. يتم ربط الألوان بنظام ألوان من خلال علامات
التصميم.يتم بعد ذلك تطبيق كل رمز تصميم على واجهة المستخدم الخاصة بالنظام وشاشات المعلومات والتطبيقات
التي فعّلت استخدام الألوان الديناميكية.
استنادًا إلى إعداداتك المفضّلة، يمكنك استخدام لون بذرة معيّن أو
لون العلامة التجارية لإنشاء اللون الديناميكي.
من لون البذرة
سيؤدي استخدام ميزة "الألوان الديناميكية" إلى إنشاء مخطط ألوان سهل الاستخدام تلقائيًا استنادًا إلى
لون أساسي معيّن.
بما أنّ واجهة المستخدم قد تنتهي بأي عدد من ألوان المصدر المختلفة، من المفضّل
التصميم في البداية باستخدام نظام الألوان الأساسي حتى تتمكّن من التأكّد من
ربط أدوار الألوان المناسبة بالمكونات المناسبة في منتجك. استخدِم
أداة إنشاء المظاهر في Material Theme للاطّلاع على شكل نماذج واجهة المستخدم في مجموعة من ألوان المصدر
وتعديل الإعدادات حسب الحاجة.
لوحة الألوان (من ألوان شاشة الساعة الأساسية)
مظهر ملوّن تم تطبيقه على مربّع
مظهر ملوّن تم تطبيقه على شاشة تطبيق
من لون العلامة التجارية
على غرار الطريقة التي يتعامل بها مظهر Material 3 Expressive مع أدوار الألوان، يطبّق نظام التشغيل Wear OS
اللون على التجارب الفردية باستخدام تعبيرات ألوان ديناميكية وسهلة الاستخدام. يستخدم نظام التشغيل Wear OS المظهر الداكن فقط لأنّ واجهة الجهاز القابل للارتداء مبنية
على خلفية سوداء. بما أنّ نظام Wear
OS يعمل على الأجهزة التي تعمل باللمس، فهو يتضمّن أيضًا لوحة ألوان محدودة، لأنّه لا يتطلّب الكثير من حالات التمرير فوق العناصر والتركيز عليها. استخدِم أدوات إنشاء مظاهر الألوان المخصّصة لنظام التشغيل Wear OS لإنشاء
مظهر مخصّص لعلامتك التجارية وإنشاء لوحات الألوان المرجعية الكاملة و
أدوار الألوان المحدّدة التي تتوافق مع الرموز المخصّصة لتصميم Material Design ومصمّمة للعمل
بسلاسة مع مكوّنات واجهة مستخدم النظام.
لوحة الألوان (من ألوان العمل الفني الأساسية)
مظهر ملوّن تم تطبيقه على مربّع
مظهر ملوّن تم تطبيقه على شاشة تطبيق
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],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"]]
