Colors
======

Color System
------------

The color system is the source of the colors that themes draw from. Each
has a range of values from ``0`` (black ``#000000``) to ``150`` (white
``#ffffff``). Not all colors are or should be used in every theme, but
the scales provide a chance to see the colors in a larger context and
makes it easy to switch out colors as desired.

The number assigned to each estimates how light or dark that color is.
For parts of an interface that are interactive, have text, or have any
other important information, please use colors combinations that have at
least a difference of 20 where colors overlap. Depending on the colors,
you may need more contrast to create a theme that meets accessibility
standards about contrast or color blindness.

Gray
~~~~

=========== =========== =========
System Name Value       Sample
=========== =========== =========
B0          ``#000000`` |image1|
B10         ``#19232D`` |image2|
B20         ``#262E38`` |image3|
B30         ``#37414F`` |image4|
B40         ``#455364`` |image5|
B50         ``#54687A`` |image6|
B60         ``#60798B`` |image7|
B70         ``#788D9C`` |image8|
B80         ``#9DA9B5`` |image9|
B90         ``#CBCACA`` |image10|
B100        ``#D9D8D8`` |image11|
B110        ``#E1E1E1`` |image12|
B120        ``#EEEEEE`` |image13|
B130        ``#F5F5F5`` |image14|
B140        ``#FAFAFA`` |image15|
B150        ``#FFFFFF`` |image16|
=========== =========== =========

Blue
~~~~

=========== =========== =========
System Name Value       Sample
=========== =========== =========
B0          ``#000000`` |image17|
B10         ``#062647`` |image18|
B20         ``#26486B`` |image19|
B30         ``#375A7F`` |image20|
B40         ``#346792`` |image21|
B50         ``#1A72BB`` |image22|
B60         ``#057DCE`` |image23|
B70         ``#259AE9`` |image24|
B80         ``#37AEFE`` |image25|
B90         ``#73C7FF`` |image26|
B100        ``#9FD9FF`` |image27|
B110        ``#C2E3FA`` |image28|
B120        ``#CEEBFF`` |image29|
B130        ``#DAF0FF`` |image30|
B140        ``#F5FBFF`` |image31|
B150        ``#FFFFFF`` |image32|
=========== =========== =========

.. |image1| image:: images/color_samples/GrayB0.png
.. |image2| image:: images/color_samples/GrayB10.png
.. |image3| image:: images/color_samples/GrayB20.png
.. |image4| image:: images/color_samples/GrayB30.png
.. |image5| image:: images/color_samples/GrayB40.png
.. |image6| image:: images/color_samples/GrayB50.png
.. |image7| image:: images/color_samples/GrayB60.png
.. |image8| image:: images/color_samples/GrayB70.png
.. |image9| image:: images/color_samples/GrayB80.png
.. |image10| image:: images/color_samples/GrayB90.png
.. |image11| image:: images/color_samples/GrayB100.png
.. |image12| image:: images/color_samples/GrayB110.png
.. |image13| image:: images/color_samples/GrayB120.png
.. |image14| image:: images/color_samples/GrayB130.png
.. |image15| image:: images/color_samples/GrayB140.png
.. |image16| image:: images/color_samples/GrayB150.png
.. |image17| image:: images/color_samples/BlueB0.png
.. |image18| image:: images/color_samples/BlueB10.png
.. |image19| image:: images/color_samples/BlueB20.png
.. |image20| image:: images/color_samples/BlueB30.png
.. |image21| image:: images/color_samples/BlueB40.png
.. |image22| image:: images/color_samples/BlueB50.png
.. |image23| image:: images/color_samples/BlueB60.png
.. |image24| image:: images/color_samples/BlueB70.png
.. |image25| image:: images/color_samples/BlueB80.png
.. |image26| image:: images/color_samples/BlueB90.png
.. |image27| image:: images/color_samples/BlueB100.png
.. |image28| image:: images/color_samples/BlueB110.png
.. |image29| image:: images/color_samples/BlueB120.png
.. |image30| image:: images/color_samples/BlueB130.png
.. |image31| image:: images/color_samples/BlueB140.png
.. |image32| image:: images/color_samples/BlueB150.png
