[[["容易理解","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\nAndroid TV adheres to Google's Material [color guidelines](https://m3.material.io/styles/color/the-color-system/color-roles#f5ef005c-0aba-4e23-9d46-ffbd386ade94), ensuring a\ncohesive and visually appealing interface. It creates a highly\nimmersive and engaging visual style tailored to the TV screen.\nThis guide details applying the Material Design theme to an Android TV\ninterface.\n\nHighlights\n----------\n\n- Android TV adheres to Google's Material color guidelines, but optimizes for TV.\n- Build from dark themes, to create cinematic experiences.\n- Use the [Material Theme Builder](https://m3.material.io/theme-builder#/custom) to create a theme.\n\nColor scheme\n------------\n\nA color scheme helps you apply color to your UI in a meaningful way,\ncreating harmony, brand consistency and scalability.\n\nThe foundation of a color scheme is the set of five key colors that\nindividually relate to separate tonal palettes with thirteen or more tones.\nSpecific tones from each tonal palette are assigned to color roles across\na UI. Key colors are the foundation for creating any dynamic color scheme.\nYou can create key colors based on one root color using the\nMaterial Theme Builder, or picking your own key colors.\n\nWith key colors established, Material's algorithm specifies the\nfull spectrum of colors needed for expressing interaction states,\nerrors, and accessible contrast.\n\nThe Material theme builder generates both dark and light color\nschemes with the same color tokens, making it simple to switch between themes.\n| **Tip:** Consider using a **dark theme** to enhance your cinematic TV experience.\n\nColor roles\n-----------\n\n### Primary\n\nPrimary roles are used for key components across the UI, such as\nprominent buttons, active states, and the tint of elevated surfaces.\n\n### Secondary\n\nSecondary roles are used for less prominent components in the UI,\nsuch as filter chips, and opportunities for additional for color expression.\n\n### Tertiary\n\nTertiary roles are used for contrasting accents that can be used to\nbalance primary and secondary colors or bring heightened attention\nto an element, such as an input field.\n| **Note:** The tertiary color role is left for makers to use at their discretion and is intended to support broader color expression in products.\n\n### Surfaces\n\nNeutral roles are used for surfaces and backgrounds, and high emphasis\ntext and icons. Read more about surfaces in the [Material Design guidelines](https://m3.material.io/styles/color/the-color-system/color-roles).\n\n### Outlines\n\nRead more about outline roles in the [Material Design guidelines](https://m3.material.io/styles/color/the-color-system/color-roles).\n\nDynamic color\n-------------\n\nOn Android Mobile, beginning with Android 12, users can generate individualized\nschemes through wallpaper selections and other customizations. Android TV does\nnot support wallpaper, meaning user generated schemes are not supported and\nAndroid TV OS only broadcasts base palettes.\n\nIn place of user-generated schemes, you can use **content-based color schemes**\nto create dynamic and playful designs, based on content like movie posters,\nalbum art, and other hero images. For details, see [content-based color\nschemes](https://m3.material.io/styles/color/dynamic-color/user-generated-color).\n\nUsing the [Material color utilities](https://github.com/material-foundation/material-color-utilities) developer libraries you can extract\nkey colors directly from the image, or run your own color extraction\nalgorithm to find a key color and then use the Material Color Utilities\nto generate a theme.\n\nHere is an example of how colors are extracted from an image:\n\n1. Source image\n2. Extracted seed color\n3. Generated key colors\n\nYou can generate a color scheme using these key colors, or use the\ntones to apply them on your UI.\n\nAccessibility\n-------------\n\nFor accessibility considerations, see [Accessibility best practices for Android TV](/training/tv/accessibility)"]]
