Skip to content

Instantly share code, notes, and snippets.

@jemshit
Last active March 21, 2021 01:07
Show Gist options
  • Star 23 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save jemshit/0e755f9a5669fe78d0e2 to your computer and use it in GitHub Desktop.
Save jemshit/0e755f9a5669fe78d0e2 to your computer and use it in GitHub Desktop.
Android Text Colors according to Material Design Pattern
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Dark Text Color for Light Background -->
<color name="textDarkPrimary">#DE000000</color> <!--DE for %87 opacity-->
<color name="textDarkSecondary">#8A000000</color> <!--8A for %54 opacity-->
<color name="textDarkDisabled">#61000000</color> <!--61 for %38 opacity-->
<!-- White Text Color for Dark Background -->
<color name="textLightPrimary">#FFFFFF</color> <!--%100 opacity-->
<color name="textLightSecondary">#B2FFFFFF</color> <!--B2 for %70 opacity-->
<color name="textLightDisabled">#80FFFFFF</color> <!--80 for %50 opacity-->
<color name="textLightDisabledDEPRECATED">#4CFFFFFF</color> <!--4C for %30 opacity-->
</resources>
<!-- Material Design Pattern: https://www.google.com/design/spec/style/color.html#color-ui-color-application -->
<!-- by Jemshit Iskenderov: www.jemshit.com -->
@eugenebrusov
Copy link

eugenebrusov commented Sep 5, 2017

This is unnecessary. All the Material colors are already defined in the SDK in /values/colors_material.xml.

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2014 The Android Open Source Project

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

<!-- Colors specific to Material themes. --> 
<resources>
<color name="background_material_dark">#ff212121</color>
<color name="background_material_light">#fffafafa</color>

<color name="ripple_material_light">#20444444</color>
<color name="ripple_material_dark">#20ffffff</color>

<color name="button_material_dark">#ff5a595b</color>
<color name="button_material_light">#ffd6d7d7</color>

<color name="bright_foreground_material_dark">@color/white</color>
<color name="bright_foreground_material_light">@color/black</color>
<!-- White 50% -->
<color name="bright_foreground_disabled_material_dark">#80ffffff</color>
<!-- Black 50% -->
<color name="bright_foreground_disabled_material_light">#80000000</color>
<color name="bright_foreground_inverse_material_dark">@color/bright_foreground_material_light</color>
<color name="bright_foreground_inverse_material_light">@color/bright_foreground_material_dark</color>

<color name="dim_foreground_material_dark">#ffbebebe</color>
<color name="dim_foreground_material_light">#ff323232</color>
<color name="dim_foreground_disabled_material_dark">#80bebebe</color>
<color name="dim_foreground_disabled_material_light">#80323232</color>

<color name="hint_foreground_material_dark">@color/bright_foreground_disabled_material_dark</color>
<color name="hint_foreground_material_light">@color/bright_foreground_disabled_material_light</color>
<!-- TODO: This is 40% alpha on the default accent color. -->
<color name="highlighted_text_material_dark">#6640c4ff</color>
<!-- TODO: This is 40% alpha on the default accent color. -->
<color name="highlighted_text_material_light">#6640c4ff</color>

<!-- Text & foreground colors -->
<eat-comment />

<!-- Black 87% -->
<color name="primary_text_default_material_light">#de000000</color>
<!-- Black 54% -->
<color name="secondary_text_material_light">#8a000000</color>
<!-- Black 54% (TODO: same as secondary?) -->
<color name="tertiary_text_material_light">#8a000000</color>

<!-- White 87% -->
<color name="primary_text_default_material_dark">#deffffff</color>
<!-- White 38% -->
<color name="secondary_text_material_dark">#61ffffff</color>
<!-- White 38% (TODO: same as secondary?) -->
<color name="tertiary_text_material_dark">#61ffffff</color>

<!-- Primary & accent colors -->
<eat-comment />

<color name="material_red_100">#fff4c7c3</color>
<color name="material_red_300">#ffe67c73</color>
<color name="material_red_500">#ffdb4437</color>
<color name="material_red_700">#ffc53929</color>
<color name="material_red_A200">#ffff5252</color>
<color name="material_red_A400">#ffff1744</color>

<color name="material_blue_100">#ffc6dafc</color>
<color name="material_blue_300">#ff7baaf7</color>
<color name="material_blue_500">#ff4285f4</color>
<color name="material_blue_700">#ff3367d6</color>
<color name="material_blue_A200">#ff448aff</color>
<color name="material_blue_A400">#ff2979ff</color>

<color name="material_light_blue_A200">#ff40c4ff</color>

<color name="material_teal_100">#ffb2ebf2</color>
<color name="material_teal_300">#ff4dd0e1</color>
<color name="material_teal_500">#ff00bcd4</color>
<color name="material_teal_700">#ff0097a7</color>
<color name="material_teal_A200">#ff18ffff</color>
<color name="material_teal_A400">#ff00e5ff</color>

<!-- Accent color used by Settings -->
<color name="material_dark_teal_A400">#ff009688</color>

<color name="material_green_100">#ffb7e1cd</color>
<color name="material_green_300">#ff57bb8a</color>
<color name="material_green_500">#ff0f9d58</color>
<color name="material_green_700">#ff0b8043</color>
<color name="material_green_A200">#ff69f0ae</color>
<color name="material_green_A400">#ff00e676</color>

<color name="material_lime_100">#fff0f4c3</color>
<color name="material_lime_300">#ffdce775</color>
<color name="material_lime_500">#ffcddc39</color>
<color name="material_lime_700">#ffafb42b</color>
<color name="material_lime_A200">#ffeeff41</color>
<color name="material_lime_A400">#ffc6ff00</color>

<color name="material_yellow_100">#fffce8b2</color>
<color name="material_yellow_300">#fff7cb4d</color>
<color name="material_yellow_500">#fff4b400</color>
<color name="material_yellow_700">#fff09300</color>
<color name="material_yellow_A200">#ffffcd40</color>
<color name="material_yellow_A400">#ffffbc00</color>

<color name="material_orange_100">#ffffe0b2</color>
<color name="material_orange_300">#ffffb74d</color>
<color name="material_orange_500">#ffff9800</color>
<color name="material_orange_700">#fff57c00</color>
<color name="material_orange_A200">#ffffab40</color>
<color name="material_orange_A400">#ffff9100</color>

<color name="material_deep_orange_100">#fff4c7c3</color>
<color name="material_deep_orange_300">#ffe67c73</color>
<color name="material_deep_orange_500">#ffff5722</color>
<color name="material_deep_orange_700">#ffc53929</color>
<color name="material_deep_orange_A200">#ffff5252</color>
<color name="material_deep_orange_A400">#ffff1744</color>

<!-- Neutral colors -->
<eat-comment />

<color name="material_grey_50">#fffafafa</color>
<color name="material_grey_100">#fff5f5f5</color>
<color name="material_grey_300">#ffeeeeee</color>
<color name="material_grey_500">#ffa3a3a3</color>
<color name="material_grey_600">#ff757575</color>
<color name="material_grey_700">#ff717171</color>
<color name="material_grey_900">#ff212121</color>

<color name="material_blue_grey_50">#ffeceff1</color>
<color name="material_blue_grey_100">#ffcfd8dc</color>
<color name="material_blue_grey_300">#ff90a4ae</color>
<color name="material_blue_grey_400">#ff78909c</color>
<color name="material_blue_grey_500">#ff607d8b</color>
<color name="material_blue_grey_600">#ff546e7a</color>
<color name="material_blue_grey_700">#ff455a64</color>
<color name="material_blue_grey_800">#ff37474f</color>
<!-- Primary color used by Settings -->
<color name="material_blue_grey_900">#ff263238</color>
<!-- Primary dark color used by Settings -->
<color name="material_blue_grey_950">#ff21272b</color>

<color name="material_brown_100">#ffd7ccc8</color>
<color name="material_brown_300">#ffa1887f</color>
<color name="material_brown_500">#ff795548</color>
<color name="material_brown_700">#ff5d4037</color>

<!-- Time picker defaults when no theme is set -->
<eat-comment />

<color name="timepicker_default_background_material">@color/primary_text_default_material_light</color>
<color name="timepicker_default_text_color_material">@color/black</color>
<color name="timepicker_default_disabled_color_material">@color/bright_foreground_disabled_material_dark</color>
<color name="timepicker_default_ampm_selected_background_color_material">@color/material_light_blue_A200</color>
<color name="timepicker_default_ampm_unselected_background_color_material">@color/transparent</color>
<color name="timepicker_default_selector_color_material">@color/material_light_blue_A200</color>
<color name="timepicker_default_numbers_background_color_material">@color/transparent</color>
</resources>

@jemshit
Copy link
Author

jemshit commented Oct 1, 2017

@eugenebrusov that file does not contain all material colors (try this) + text colors are not same with this gist. Just checked material doc again and only thing has changed is textLightDisabled from 30% to 50%, so
<color name="textLightDisabled">#80FFFFFF</color>

@newmanw
Copy link

newmanw commented Apr 5, 2019

@eugenebrusov that is awesome didn't know that existed. That being said I am have trouble locating those resources in my app. Do I need to include a special version of app compat/androidx?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment