קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
במסגרת הצבעים של Material 3 Expressive נעשה שימוש בנושאי צבעים דינמיים, שמבוססים על שני צבעים מקוריים שממופים למערכת הצבעים HCT (גוון, צבע וטון).
מונחים חיוניים
תפקיד צבע
כמו 'המספרים' על קנבס לצביעה לפי מספרים, תפקידים של צבעים מוקצים לרכיבים ספציפיים בממשק המשתמש. השמות שלהם יכולים להיות primary, on primary ו-primary container. אותו תפקיד צבע משמש גם בעיצוב בהיר וגם בעיצוב כהה. הצגת כל התפקידים לפי צבע
HCT
האותיות HCT מייצגות את המילים hue (גוון), chroma (עוצמת צבע) ו-tone (טון).
הגדרת צבעים באמצעות גוון, רוויה וטון (HCT)
גנרטור צבעים מסוג HCT שיוצר קבוצה של לוחות צבעים מצבע זרע אחד, כדי ליצור מודל צבע תלת-ממדי שמגדיר צבעים על סמך הגוון (הצבע), הצפיפות (הרוויה) והגוון (הבהירות) שלהם
יש שלושה צבעים משניים עיקריים: צבע ראשי, צבע משני וצבע שלישי. גוונים ניטרליים, כמו גוונים שונים של אפור עם נגיעת צבע ראשי, הם אידיאליים לשימוש כצבעים של קונטיינרים לתוכן עשיר בגלל האופי המונוכרומטי שלהם.
גוון
גוון הוא תפיסת הצבע, כמו אדום, כתום, צהוב, ירוק, כחול וסגול. הצבע מוגדר במספר שנע בין 0 ל-360, והוא ספקטרום עגול (הערכים 0 ו-360 הם אותו צבע).
כרומה
הצבעה היא מידת הצבעוניות או הנייטרליות (אפור, שחור או לבן) של צבע. הצבע מוגדר במספר שנע בין 0 (אפור, שחור או לבן לחלוטין) לבין אינסוף (הצבע הכי עז), אבל ערכי הצבע ב-HCT מגיעים ל-120 בערך.
בגלל מגבלות ביולוגיות והגבלות על עיבוד המסך, לגוונים ולצבעים שונים יהיו ערכי צפיפות צבע מקסימליים שונים.
טון
הטון הוא מידת הבהירות או החושך של הצבע. לפעמים קוראים לגוון גם עוצמת הארה. הטון מוגדר במספר שנע בין 0 (שחור טהור, ללא בהירות) ל-100 (לבן טהור, בהירות מלאה).
הטון הוא קריטי לנגישות חזותית כי הוא קובע את הניגודיות. צבעים עם הבדל גדול יותר בגוון יוצרים ניגודיות גבוהה יותר, ואילו צבעים עם הבדל קטן יותר יוצרים ניגודיות נמוכה יותר.
צבע דינמי (עיצוב לפי צבע)
ב-Wear OS מופעלת מערכת עיצוב שתואמת להנחיות של Web Content Accessibility Guidelines (WCAG)-AAA, שמבוססת על שני צבעים מוגדרים. באופן ספציפי, צבעים אלה משמשים כבסיס ללוחות צבעים ראשיים ושלישיים. על סמך שני הצבעים הראשוניים האלה, המערכת יוצרת לוח צבעים מקיף שכולל לוחות צבעים ראשיים, משניים, שלישיים ולוחות צבעים לרקע. לאחר מכן, העיצוב שנוצר חל על רכיבי Wear OS, על רכיבי ממשק המשתמש של המערכת, על כרטיסי מידע ועל אפליקציות.
בכל תצוגת שעון מוגדרים שני צבעים ראשוניים, שמשמשים ללוחות הצבעים הראשיים והשלישיים.הזרעים האלה עוברים עיבוד באמצעות אלגוריתם שמניב חמישה טווחי צבעים, וניתן להקצות צבעים ספציפיים (על סמך בהירות) לתפקידים מוגדרים מראש שמרכיבים את התוכנית. הצבעים ממופה לערכה באמצעות אסימוני עיצוב.לאחר מכן, כל אסימון עיצוב מוחל על ממשק SysUI, על המשבצות ועל האפליקציות שבחרתם להשתמש בהן בצבע דינמי.
בהתאם להעדפה שלכם, תוכלו להשתמש בצבע זרעים ספציפי או בצבע המותג כדי להפיק את הצבע הדינמי.
מצבע זרעי ה-HTML
התכונה 'צבע דינמי' תיצור באופן אוטומטי ערכת צבעים נגישה על סמך צבע התחלה ספציפי.
מכיוון שמערכת ממשק המשתמש עשויה לכלול מספר כלשהו של צבעי מקור שונים, מומלץ לבצע את העיצוב הראשוני באמצעות ערכת הצבעים הבסיסית כדי לוודא שתפקידים הצבעים הנכונים ממופים לרכיבים הנכונים במוצר. תוכלו להשתמש ב-Material Theme Builder כדי לראות איך נראים מודלי UI במגוון צבעים של מקור, ולשנות את ההגדרות לפי הצורך.
לוח צבעים (מצבעים בסיסיים של תצוגת השעון)
ערכת צבעים שחלה על משבצת
ערכת צבעים שחלה על מסך של אפליקציה
מהצבע של המותג
בדומה לאופן שבו נעשה שימוש בתפקידי צבעים ב-Material 3 Expressive, ב-Wear OS נעשה שימוש בצבע כדי להתאים אישית חוויות באמצעות ביטוי דינמי ונגיש של צבעים. ב-Wear OS נעשה שימוש רק בעיצוב כהה, כי הממשק של השעון החכם מבוסס על רקע שחור. Wear OS היא פלטפורמה שפועלת במכשירי מגע, ולכן גם לצבעים שלה יש מגוון מוגבל יותר, כי היא לא דורשת כל כך הרבה מצבי מעבר מעל או התמקדות. אתם יכולים להשתמש בכלים הספציפיים ל-Wear OS ליצירת עיצוב בצבעים שמותאם למותג שלכם, וליצור לוחות צבעים מלאים ותפקידי צבעים שהוקצתה להם תמיכה באסימונים של Material Design, ועומדים בדרישות לעבודה חלקה עם רכיבי ממשק המשתמש של המערכת.
לוח צבעים (מצבעים ראשוניים של גרפיקה)
ערכת צבעים שחלה על משבצת
ערכת צבעים שחלה על מסך של אפליקציה
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת 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"]]
