[docs] Improve color / theme docs (#9771)

Clarify hue, shade, etc.

docs/src/pages/customization/themes.md

@@ -32,7 +32,7 @@ The theme expose the following color intentions:
 - secondary - used to represent secondary interface elements for a user.
 - error - used to represent interface elements that the user should be careful of.
 
-The palette uses the hues prefixed with `A` (`A200`, etc.) for the accent color and the hues unprefixed for the other intentions.
+The palette uses the shades prefixed with `A` (`A200`, etc.) for the accent color and the hues unprefixed for the other intentions.
 If you want to learn more about color, you can check out [the color section](/style/color).
 
 #### Example

docs/src/pages/style/color.md

@@ -6,39 +6,39 @@
 
 ### Important Terms
 
-#### Hues/Shades
 
-A hue/shade is a single color within a palette.
+#### "Palette"
 
-#### Palette
+A palette is a collection of colors, i.e. hues and their shades. Material-UI provides all colors from the Material Design guidelines.
 
-A palette is a collection of hues. By default, Material-UI ships with all palettes from the material design spec built in.
+#### "Hue" & "Shade"
+
+A single color within the palette is made up of a hue such as "red", and shade, such as "500". 
+"red 50" is the lightest shade of red (*pink!*), while "red 900" is the darkest. 
+In addition, most hues come with "accent" shades, prefixed wih `A`.
 
 ### Examples
 
-This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors.
+The Material Design color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors.
 They’ve been designed to work harmoniously with each other.
 
-For instance, you can refer to a particular hue/shade of the red color from palette like so:
+For instance, you can refer to complementary primary and accent colors (for example 'red 500' & 'purple A200'), like so:
+
 ```js
 import { red, purple } from 'material-ui/colors';
 
 const primary = red[500]; // #F44336
 const accent = purple['A200']; // #E040FB
+const accent2 = purple.A200; // #E040FB (alternative method)
 ```
 
+### Full Palette
 {{"demo": "pages/style/Color.js"}}
 
-## Color system
-
-In Material Design, a **primary color** refers to a color that appears most frequently in your app. A **secondary color** refers to a color used to accent key parts of your UI.
-
-Using colors from the Material Design palette is optional.
-You can learn more about it [here](https://material.io/guidelines/style/color.html#color-color-system).
-
-## Color schemes
+## Tools
 
-These are links to some of the awesome tools that can be used to generate palettes:
+These are some of the awesome tools that can be used to generate palettes:
 
+- [https://material.io/color](https://material.io/color)
 - [www.materialpalette.com](https://www.materialpalette.com)
-- [mcg.mbitson.com/](http://mcg.mbitson.com/)
+- [mcg.mbitson.com](http://mcg.mbitson.com)