Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Material 3 Expressive renk çerçevesi, HCT (Ton, Renk ve Ton) renk sisteminde eşlenen iki ana renge dayalı dinamik renk temaları kullanır.
Temel terimler
Renk rolü
Renk rolleri, sayılarla boyama kanvasındaki "sayılar" gibi belirli kullanıcı arayüzü öğelerine atanır. Bunlar birincil, birincil üzerinde ve birincil kapsayıcı gibi adlara sahiptir. Hem açık hem de koyu temalar için aynı renk rolü kullanılır. Tüm renk rollerini görme
HCT
HCT; ton, renk ve parlaklık anlamına gelir.
Renkleri ton, renk yoğunluğu ve ton (HCT) ile tanımlama
HCT renk oluşturucu, bir ana renkten bir dizi renk paleti oluşturur. Renkleri tonlarına (renk), kromatikliğine (doygunluk) ve tonlarına (parlaklık) göre tanımlayan üç boyutlu bir renk modeli oluşturur.
Üç ana vurgu rengi vardır: birincil, ikincil ve üçüncül. Birincil renklerin tonlarını içeren çeşitli gri tonları gibi nötr tonlar, tek renkli yapıları nedeniyle zengin içeriklerin kapsayıcı renkleri olarak kullanılmak için idealdir.
Ton
Ton, kırmızı, turuncu, sarı, yeşil, mavi ve mor gibi bir rengin algısıdır. Ton, 0 ile 360 arasında değişen bir sayı ile ölçülür ve dairesel bir spektrumdur (0 ve 360 değerleri aynı tondadır).
Chroma
Renk yoğunluğu, bir rengin ne kadar renkli veya nötr (gri, siyah veya beyaz) göründüğünü ifade eder. Renk doygunluğu, 0 (tamamen gri, siyah veya beyaz) ile sonsuz (en canlı) arasında değişen bir sayı ile ölçülür. Ancak HCT'deki renk doygunluğu değerleri yaklaşık 120'de zirveye ulaşır.
Biyolojik ve ekran oluşturma sınırlamaları nedeniyle farklı tonlar ve farklı tonlar farklı maksimum renk değerlerine sahiptir.
Ton
Ton, bir rengin ne kadar açık veya koyu göründüğüdür. Ton bazen parlaklık olarak da adlandırılır. Ton, 0 (saf siyah, parlaklık yok) ile 100 (saf beyaz, tam parlaklık) arasında bir sayı ile ölçülür.
Kontrastı belirlediği için ton, görsel erişilebilirlik açısından çok önemlidir. Ton farkı daha fazla olan renkler daha yüksek kontrast oluştururken ton farkı daha az olan renkler daha düşük kontrast oluşturur.
Dinamik renk (renk teması)
Wear OS, iki belirlenmiş ana renk temel alınarak Web İçeriği Erişilebilirlik Yönergeleri (WCAG)-AAA ile uyumlu bir tema sistemi uygular. Özellikle bu ana renkler, birincil ve üçüncül paletlerin temelini oluşturur. Sistem, bu iki başlangıç rengini kullanarak birincil, ikincil, üçüncül ve yüzey paletlerini kapsayan kapsamlı bir renk paleti oluşturur. Ardından, oluşturulan bu tema Wear OS bileşenlerine, sistem kullanıcı arayüzü öğelerine, kutulara ve uygulamalara uygulanır.
Her kadran, birincil ve üçüncül paletler için kullanılan iki temel renk tanımlar.Bu tohumlar, beş ton aralığına dönüşen bir algoritmaya tabi tutulur. Belirli tonlar (parlaklık temel alınarak), bir şemadan oluşan önceden tanımlanmış rollere yerleştirilir. Renkler, tasarım jetonları aracılığıyla bir şemayla eşlenir.Her tasarım jetonu, dinamik renk kullanmayı etkinleştirmiş SysUI, kutular ve uygulamalara uygulanır.
Tercihinizle uyumlu olarak, dinamik renginizi oluşturmak için belirli bir başlangıç rengi veya marka rengi kullanabilirsiniz.
Tohum renginden
Dinamik renk, belirli bir başlangıç rengine göre erişilebilir bir renk şeması otomatik olarak oluşturur.
Kullanıcı arayüzünde herhangi bir sayıda farklı kaynak renk bulunabileceğinden, doğru renk rollerinin ürününüzdeki doğru bileşenlerle eşlendiğinden emin olmak için başlangıçta temel renk şemasını kullanarak tasarım yapmanızı öneririz. Kullanıcı arayüzü taslaklarınızın çeşitli kaynak renklerinde nasıl göründüğünü görmek ve ayarları gerektiği gibi düzenlemek için Material Theme Builder'ı kullanın.
Renk paleti (kadran ana renklerinden)
Kartlara uygulanan renk teması
Bir uygulama ekranına uygulanan renk teması
Marka renginden
Material 3 Expressive'in renk rollerini ele alma şekline benzer şekilde Wear OS da dinamik ve erişilebilir renk ifadesiyle renkleri kişiselleştirilmiş deneyimlere uygular. Wear OS, giyilebilir cihaz arayüzü siyah arka plana dayalı olduğu için yalnızca koyu temayı kullanır. Dokunmatik cihazlarda çalışan bir platform olan Wear OS, fareyle üzerine gelme ve odaklanma durumları gerektirmediğinden daha sınırlı bir renk paletine sahiptir. Markanızla ilgili özel bir tema oluşturmak için Wear OS'a özel renk teması oluşturma araçlarını kullanın. Ayrıca, Material Design jetonlarını destekleyen ve sistem kullanıcı arayüzü bileşenleriyle sorunsuz bir şekilde çalışacak şekilde tasarlanmış tam referans paletleri ve atanmış renk rolleri oluşturun.
Renk paleti (poster başlangıç renklerinden)
Kartlara uygulanan renk teması
Bir uygulama ekranına uygulanan renk teması
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.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 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"]]
