Renk
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Ürününüzün hiyerarşisini, durumunu ve markasını gösteren daha erişilebilir, kişisel renk şemaları oluşturun. Giyilebilir cihazlar için tasarım yaparken renk, özellikle küçük ekranlarda okunabilirliği, kullanılabilirliği, görsel çekiciliği ve ifadeyi geliştirmede önemli bir rol oynar.
Aşağıdaki ilkeler, renklerin temalarda nasıl kullanılacağını açıklar.
Siyahtan oluşturma
Kol saatleri, telefon cihazlarının kullandığı renkli arka plan yerine siyah arka planla tasarlanmıştır. Koyu temalar ışığın az olduğu ortamlar için, açık temalar ise gün ışığı için tasarlanmıştır. Ancak kol saati kullanıcı arayüzlerinin hem gündüz hem de gece sorunsuz şekilde çalışması gerekir. Bu nedenle, kol saatleri için renk jetonları özel olarak tasarlanmalıdır.
Yeni renk rolleri
Material 3 renk sistemi, üç vurgu rengi ve iki nötr yüzey renginin yapısını korur ancak vurgu rollerinde kapsayıcı renkleri kullanır.
Bu yeni roller, görsel hiyerarşiyi bozmadan daha fazla ifade potansiyeli sağlar ve temel olarak yüzey renk varyasyonlarını artırılmış renk doygunluğuyla sunar.
Kapsayıcı rolleri, özellikle açma/kapatma düğmeleri gibi durumları vurgulamak veya birincil vurgu zaten kullanılıyorken tamamlayıcı bir stil sağlamak için kullanışlıdır.
Anlamsal anlam
Kol saati kullanıcı arayüzlerinde renklerin anlamını açık ve sezgisel bir şekilde iletmesi gerekir. Örneğin, kırmızı renk hataları, yeşil renk ise başarıları gösterir. Bu sayede kullanıcılar, ek açıklamaya gerek kalmadan işlemleri veya durumları hızlıca anlayabilir. Renklerin bu şekilde semantik kullanımı, kullanıcıların kullanıcı arayüzünüzde gezinmesine ve güvenle işlem yapmasına yardımcı olur.
Renk erişilebilirliği (kontrast uyumluluğu)
Kol saati kullanıcı arayüzlerinde renklerin anlamını açık ve sezgisel bir şekilde iletmesi gerekir. Örneğin, kırmızı renk hataları, yeşil renk ise başarıları gösterir. Bu sayede kullanıcılar, ek açıklamaya gerek kalmadan işlemleri veya durumları hızlıca anlayabilir. Renklerin bu şekilde semantik kullanımı, kullanıcıların kullanıcı arayüzünüzde gezinmesine ve güvenle işlem yapmasına yardımcı olur.
Yenilikler
Görsel tasarım sisteminde ve stil temellerimiz, bileşenlerimiz ve kart tasarım kitaplıklarımızda yaptığımız güncellemeler sayesinde ifadeyi nasıl geliştirdiğimiz konusunda önemli güncellemeler yaptık.
Material 3 Expressive renk sistemi aşağıdaki özellikleri içerir:
- Yerleşik erişilebilir renk ilişkileri grubu
- Malzeme bileşenleriyle eşlenen 28'den fazla renk rolü
- Siyahtan tasarım oluşturmak için yerleşik koyu tema renkleri
- Devre dışı bırakılmış renk değerleri iyileştirildi
- Ek hata renkleri
- Her renk rolüne atanan varsayılan renklerle statik ana renk
- Sistem/Kadran ve resim tabanlı renk temaları dahil olmak üzere dinamik renk özellikleri
Kaynaklar
Daha fazla bilgi edinmek için aşağıdaki kaynakları inceleyin.
Materyal Tasarım renk yönergeleri
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-26 UTC.
[null,null,["Son güncelleme tarihi: 2025-07-26 UTC."],[],[],null,["# Color\n\nCreate more accessible, personal color schemes communicating your product's\nhierarchy, state, and brand. When designing for wearables, color plays a crucial\nrole in enhancing legibility, usability, visual appeal, and expression,\nespecially on smaller screens.\n\nThe following principles explain how to use color across themes.\n\nBuild from black\n----------------\n\n\nWatches are designed with a black background, instead of the tinted background\nthat phone devices use. While dark themes are meant for low-light environments\nand light themes for daylight, watch UIs need to function seamlessly both day\nand night. Therefore, color tokens for watches must be specifically tailored. \n\n\u003cbr /\u003e\n\nNew color roles\n---------------\n\n\nThe Material 3 color system retains the structure of three accent colors and two\nneutral surface colors, but introduces container colors within the accent roles.\nThese new roles enable greater expressive potential without disrupting visual\nhierarchy, essentially providing surface color variations with increased chroma.\nContainer roles are particularly useful for highlighting states, such as toggle\nbuttons, or for providing complementary styling when the primary accent is\nalready utilized. \n\n\u003cbr /\u003e\n\nSemantic meaning\n----------------\n\n\nIn watch UIs, colors need to communicate meaning clearly and intuitively. For\nexample, red indicates errors and green signals success, helping users quickly\nunderstand actions or states without needing extra explanation. This semantic\nuse of color helps users navigate your UI and take action with confidence. \n\n\u003cbr /\u003e\n\nColor accessibility (contrast compliance)\n-----------------------------------------\n\n\nIn watch UIs, colors need to communicate meaning clearly and intuitively. For\nexample, red indicates errors and green signals success, helping users quickly\nunderstand actions or states without needing extra explanation. This semantic\nuse of color helps users navigate your UI and take action with confidence. \n\n\u003cbr /\u003e\n\nWhat's new\n----------\n\nThere are substantial updates to the visual design system and how we elevate\nexpression throughout updates to our style foundations, components, and tiles\ndesign libraries.\n\nThe Material 3 Expressive color system includes the following features:\n\n- Built-in set of accessible color relationships\n- 28+ color roles mapped to Material components\n- Built-in dark theme colors for building from black\n- Improved disabled color values\n- Additional error colors\n- Static baseline color with default colors assigned to each color role\n- Dynamic color features, including System/Watch face, and image-based color themes\n\nResources\n---------\n\nTo learn more, view the following resources.\n\n### Material Design color guidelines\n\n\n[Learn about the latest best practices](https://material.io/color) for color schemes using Material 3\nExpressive. \n\n\u003cbr /\u003e"]]
