Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Wear Material 3 Expressive renk sistemi, temel bileşenler için üç vurgu katmanı (birincil, ikincil, üçüncül) ve iki nötr yüzey katmanı kullanır. Her rol, tutarlı kontrasta sahip bir dizi değer sunar. Bu sayede, her temada birleşik bir deneyim için etkileyici ancak erişilebilir renk kombinasyonları elde edebilirsiniz.
Roller içeren bir renk teması örneği.
Renk rolleri nedir?
Renk rolleri, sayılarla boyama kanvasındaki "sayılar" gibidir. Bunlar, kullanıcı arayüzünün öğeleri ile hangi rengin nereye gideceği arasındaki bağlantı dokusudur.
Renk rolleri, Material bileşenleriyle eşlenir: Statik ana hat şemasını veya dinamik rengi kullanıyor olsanız da bu renk rollerini kullanırsınız. Ürününüzde özel bileşenler varsa bu bileşenlerin bu renk rolü grubuyla düzgün bir şekilde eşlenmesi gerekir.
Renk rolleri erişilebilirliği destekler: Renk sistemi, daha erişilebilir renk eşleştirmeleri üzerine kuruludur. Bu renk çiftleri en az 3:1 renk kontrastı sağlar.
Renk rolleri jetonlaştırılır: Roller, tasarıma ve koda jetonlar aracılığıyla uygulanır. Tasarım jetonu, bir tasarım sisteminin görsel tarzının parçası olan küçük, yeniden kullanılabilir bir tasarım kararını temsil eder.
Temel terimler
Renk rollerinin adlarında göreceğiniz temel terimler şunlardır:
Yüzey: Arka planlar ve ekranın vurgunun düşük olduğu büyük alanları için kullanılan bir roldür.
Birincil, ikincil, üçüncül: Ön plan öğelerini vurgulamak veya vurgulamamak için kullanılan vurgu rengi rolleri.
Kapsayıcı: Düğmeler gibi ön plan öğeleri için dolgu rengi olarak kullanılan roller. Metin veya simgelerde kullanılmamalıdır.
Açık: Bu terimle başlayan roller, eşlenen üst renginin üstündeki metin veya simgelerin rengini belirtir. Örneğin, birincil dolgu renginin üzerine metin ve simgeler eklemek için birincil renk kullanılır.
Varyant: Bu terimle biten roller, varyant olmayan çiftine kıyasla daha düşük vurgulu bir alternatif sunar. Örneğin, dış çizgi varyantı, dış çizgi renginin daha az vurgulanmış bir sürümüdür.
Birincil roller
Birincil roller, kullanıcı arayüzündeki temel bileşenler için kullanılır (ör. kenarlara yaslanan düğmeler, belirgin düğmeler, etkin durumlar ve tonlu düğme stillerindeki simgeler).
Birincil
Birincil
Birincil
Kullanıcı arayüzündeki en önemli işlemler (ör. birincil düğmeler veya harekete geçirici mesajlar) için birincil rolü kullanın. Bu renk, kullanıcıyı önemli etkileşimlere yönlendirmek için öne çıkmalıdır ve anında tanınabilir olmalıdır.
Primary-Dim
Birincil-Boyut
Birincil
Karartma rolleri genellikle birincil işlemden görsel olarak farklı olması gereken ancak kullanıcının hemen dikkatini çekmesi veya etkileşim kurması gerekmeyen öğeler için kullanılır.
Primary-Container
Primary-Container
On-Primary-Container
Bölümleri veya seçili durumları vurgulamak için kartlar ya da modal pencereler gibi arka plan öğeleri için Birincil Kapsayıcı'yı uygulayın. Kullanıcı arayüzündeki önemli içeriklere veya devam eden etkinliklere dikkat çekmeye yardımcı olur.
İkincil roller
İkincil roller, kullanıcı arayüzündeki temel bileşenler için kullanılır. Bu bileşenler birincil rol kadar önemli olmasa da öne çıkarılmalıdır. Birincil ve ikincil renkler, ayırt edici bir görünüm ve odaklanma oluşturmak için düzenlerde birlikte kullanılabilir.
İkincil
İkincil
On-Secondary
Yoğun kullanıcı arayüzüne sahip alanlarda (ör. ikincil düğmeler veya tamamlayıcı işlemler) işlemleri desteklemek için ikincil rolü kullanın. Karmaşık düzenlerdeki birincil öğeleri gölgelemeden görünürlüğü korur.
Secondary-Dim
Secondary-Dim
İkincil
İkincil-Karanlık rolü, yoğun alanlarda pasif öğeler için yumuşak bir kontrast sunar. İkincil rengi tamamlarken ince bir derinlik katar, kullanıcı arayüzünü temiz tutar ve kullanıcıların gezinmesine yardımcı olur.
Secondary-Container
Secondary-Container
On-Secondary-Container
Yoğun düzenlerde ikincil öğeleri düzenlemek için Secondary-Container'ı uygulayın. İkincil içeriğin ayırt edilebilir ancak baskın olmadığından emin olarak yapı ve ayrım oluşturur.
Üçüncül roller
Üçüncül roller, birincil ve ikincil renkleri dengelemek veya giriş alanı gibi bir öğeye daha fazla dikkat çekmek için zıt vurgularda kullanılır.
Üçüncül roller, bir hedefe ulaşılması gibi durumlarda içeriğin ne zaman değiştiğini veya öne çıkacağını belirtmeye de yardımcı olabilir.
Üçüncül
Üçüncül
Üçüncül
Üçüncül rol, önemli öğelere dikkat çekmek için kullanılır. Üçüncül roller özellikle öne çıkması gereken bileşenler (ör. rozetler, çıkartmalar veya özel işlem öğeleri) için etkilidir.
Üçüncül-Dim
Üçüncül-Loş
Üçüncül
Üçüncül işlemlerle ilgili ancak anında odaklanmayı gerektirmeyen düğmeler veya işlemler için Üçüncül Karartma rolünü kullanın.
Üçüncül Kapsayıcı
Üçüncül-Kapsayıcı
Üçüncül Kapsayıcıda
Rozet veya çıkartma koleksiyonları gibi üçüncül içerikleri gruplandıran arka planlar için Üçüncül-Kapsayıcı'yı uygulayın. Kullanıcı arayüzünde denge ve yapıyı korurken üçüncül öğeleri vurgular.
Anlamsal roller
Hata (kırmızı): Hata, silme ve acil durumla ilgili her şeyi belirtmek için kullanılır. Sorunlara veya uyarılara hemen dikkat çekmek için tasarlanmıştır. Böylece kullanıcılar, düzeltme işlemi gerektiren alanları hızlıca belirleyebilir.
Hata rengi, erişilebilirlik standartlarını karşılamak için arka planla yeterli kontrasta sahip olmalıdır. Böylece, hata renginin net bir şekilde görülebilmesi ve uyarılar ya da başarı mesajları gibi diğer durum renklerinden ayırt edilebilmesi sağlanır.
Hata
Hata
Hata oluştuğunda
Kaldırma, silme, kapatma veya reddedme işlemlerini (ör. Açmak için kaydır) gösteren, anlamsal ancak temaya uygun bir kırmızı. Hata rengiyle karşılaştırıldığında biraz daha az endişe verici ve acil olan bir kapsayıcı alternatifi olarak eklendi.
Error-Dim
Hata-Karartma
Hata oluştuğunda
Yüksek öncelikli hataları veya güvenlik uyarıları, başarısız iletişim kutusu yer paylaşımları ya da durdur düğmeleri gibi acil durum işlemlerini belirten, anlamsal ancak temaya uygun bir kırmızı.
Error-Container
Error-Container
On-Error-Container
Hata durumunu kullanan bileşenler için daha az belirgin kapsayıcı rengi. Etkin bir acil durum paylaşımı düğmesi veya kartı gibi dolu durumdan daha az etkileşimli olan etkin bir hata durumunu da gösterebilir.
Yüzey kapları ve yükseklik
Yüzey kapsayıcılar, kullanıcı arayüzünde derinlik ve yükseklik tanımlamada önemli bir rol oynar. Renk aracılığıyla yapı ve hiyerarşi sağlar, bileşenleri önemlerine ve etkileşimlerine göre ayırt etmeye yardımcı olur.
Yüzey-Kapsayıcı-Düşük
Surface-Container-Low
Yüzeyde
On-Surface-Variant
Surface-Container'ın altında olması gereken genişletilmiş bir kapsayıcı için idealdir (ör. bildirimdeki genişletilmiş kart). İçeriğin, kapsayıcıdan yararlanmaya devam ettiği etkileşimli olmayan kartlar için de kullanılabilir.
Yüzey-Kapsayıcı
Surface-Container
Yüzeyde
On-Surface-Variant
Çoğu öğe için varsayılan kapsayıcı rengi. Nötr ve orta düzeyde bir yükselme sağladığından genel kullanıcı arayüzü bileşenleri için uygundur.
Yüzey-Kapsayıcı-Yüksek
Surface-Container-High
Yüzeyde
On-Surface-Variant
Yüzey kapsayıcısının üzerinde veya onunla birlikte kullanılması gereken yüksek vurgulu bileşenler için idealdir. Bu renk, kullanıcı arayüzündeki kritik alanlara odaklanmaya ve hiyerarşi oluşturmaya yardımcı olur.
Bu sayfadaki içerik ve kod örnekleri, İçerik Lisansı sayfasında açıklanan lisanslara tabidir. Java ve OpenJDK, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-07-27 UTC.
[null,null,["Son güncelleme tarihi: 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"]]
