Add more docs regarding color. (#6439)

Based on observations of usability study participant P1.

packages/flutter/lib/src/material/colors.dart

@@ -6,6 +6,21 @@ import 'dart:ui' show Color;
 
 /// [Color] constants which represent Material design's
 /// [color palette](http://www.google.com/design/spec/style/color.html).
+///
+/// To select a specific color from one of the swatches, index into the swatch
+/// using an integer for the specific color desired, as follows:
+///
+/// ```dart
+/// Colors.green[400]  // Selects a mid-range green.
+/// ```
+///
+/// Most swatches have colors from 100 to 900 in increments of one hundred, plus
+/// the color 50. The smaller the number, the more pale the color. The greater
+/// the number, the darker the color. The accent swatches (e.g. [redAccent]) only
+/// have the values 100, 200, 400, and 700.
+///
+/// In addition, a series of blacks and whites with common opacities are
+/// available. For example, [black54] is a pure black with 54% opacity.
 class Colors {
   Colors._();
 

packages/flutter/lib/src/material/divider.dart

@@ -46,6 +46,12 @@ class Divider extends StatelessWidget {
   ///
   /// Defaults to the current theme's divider color, given by
   /// [ThemeData.dividerColor].
+  ///
+  /// ```dart
+  ///  new Divider(
+  ///    color: Colors.deepOrange[500],
+  ///  ),
+  /// ```
   final Color color;
 
   @override

packages/flutter/lib/src/material/flat_button.dart

@@ -70,6 +70,16 @@ class FlatButton extends StatelessWidget {
 
   /// The color of the button, as printed on the [Material]. Defaults to null,
   /// meaning that the color is automatically derived from the [Theme].
+  ///
+  /// Typically, a material design color will be used, as follows:
+  ///
+  /// ```dart
+  ///  new FlatButton(
+  ///    color: Colors.blue[500],
+  ///    onPressed: _handleTap,
+  ///    child: new Text('DEMO'),
+  ///  ),
+  /// ```
   final Color color;
 
   /// The color of the button when the button is disabled. Buttons are disabled

packages/flutter/lib/src/material/icon.dart

@@ -65,6 +65,15 @@ class Icon extends StatelessWidget {
   ///
   /// The given color will be adjusted by the opacity of the current
   /// [IconTheme], if any.
+  ///
+  /// Typically, a material design color will be used, as follows:
+  ///
+  /// ```dart
+  ///  new Icon(
+  ///    icon: Icons.widgets,
+  ///    color: Colors.blue[400],
+  ///  ),
+  /// ```
   final Color color;
 
   @override

packages/flutter/lib/src/material/icon_button.dart

@@ -92,6 +92,14 @@ class IconButton extends StatelessWidget {
   /// The icon is enabled if [onPressed] is not null.
   ///
   /// See also [disabledColor].
+  ///
+  /// ```dart
+  ///  new IconButton(
+  ///    color: Colors.blue[500],
+  ///    onPressed: _handleTap,
+  ///    icon: Icons.widgets,
+  ///  ),
+  /// ```
   final Color color;
 
   /// The color to use for the icon inside the button, if the icon is disabled.

packages/flutter/lib/src/material/raised_button.dart

@@ -56,6 +56,14 @@ class RaisedButton extends StatelessWidget {
 
   /// The color of the button, as printed on the [Material]. Defaults to null,
   /// meaning that the color is automatically derived from the [Theme].
+  ///
+  /// ```dart
+  ///  new RaisedButton(
+  ///    color: Colors.blue[500],
+  ///    onPressed: _handleTap,
+  ///    child: new Text('DEMO'),
+  ///  ),
+  /// ```
   final Color color;
 
   /// The color of the button when the button is disabled. Buttons are disabled