Update color palette to match Perseus

Summary:
In D27731, Perseus's color palette was updated. Though Perseus no longer relies on khan-exercises,
graphie-to-png does, and in particular, it uses the color palette defined on `KhanUtil` when
creating images. It would be a large undertaking to remove graphie-to-png's dependency on
khan-exercises (see this [Asana ticket](https://app.asana.com/0/27216215224639/36842953088193)). As such, it seems wise to update
the color palette here (and cherry-pick the change into graphie-to-png) in the short-term.

Test Plan: Coming in the graphie-to-png integration diff (since `local-mode` doesn't seem to work anymore).

Reviewers: benkomalo, david

Subscribers: jared

Differential Revision: https://phabricator.khanacademy.org/D27732

utils/math.js

@@ -686,65 +686,65 @@ $.extend(KhanUtil, {
     GRAY70: "#4D4D4D",
     GRAY80: "#333333",
     GRAY90: "#1A1A1A",
-    BLUE_A: "#C7E9F1",
-    BLUE_B: "#9CDCEB",
-    BLUE_C: "#58C4DD",
-    BLUE_D: "#29ABCA",
-    BLUE_E: "#1C758A",
-    TEAL_A: "#ACEAD7",
-    TEAL_B: "#76DDC0",
-    TEAL_C: "#5CD0B3",
-    TEAL_D: "#55C1A7",
-    TEAL_E: "#49A88F",
-    GREEN_A: "#C9E2AE",
-    GREEN_B: "#A6CF8C",
-    GREEN_C: "#83C167",
-    GREEN_D: "#77B05D",
-    GREEN_E: "#699C52",
-    GOLD_A: "#F7C797",
-    GOLD_B: "#F9B775",
-    GOLD_C: "#F0AC5F",
-    GOLD_D: "#E1A158",
-    GOLD_E: "#C78D46",
-    RED_A: "#F7A1A3",
-    RED_B: "#FF8080",
-    RED_C: "#FC6255",
-    RED_D: "#E65A4C",
-    RED_E: "#CF5044",
-    MAROON_A: "#ECABC1",
-    MAROON_B: "#EC92AB",
-    MAROON_C: "#C55F73",
-    MAROON_D: "#A24D61",
-    MAROON_E: "#94424F",
-    PURPLE_A: "#CAA3E8",
-    PURPLE_B: "#B189C6",
-    PURPLE_C: "#9A72AC",
-    PURPLE_D: "#715582",
-    PURPLE_E: "#644172",
+    BLUE_A: "#CCFAFF",
+    BLUE_B: "#80F6FF",
+    BLUE_C: "#63D9EA",
+    BLUE_D: "#11ACCD",
+    BLUE_E: "#0C7F99",
+    TEAL_A: "#94FFF5",
+    TEAL_B: "#26EDD5",
+    TEAL_C: "#01D1C1",
+    TEAL_D: "#01A995",
+    TEAL_E: "#208170",
+    GREEN_A: "#B6FFB0",
+    GREEN_B: "#8AF281",
+    GREEN_C: "#74CF70",
+    GREEN_D: "#1FAB54",
+    GREEN_E: "#0D923F",
+    GOLD_A: "#FFD0A9",
+    GOLD_B: "#FFBB71",
+    GOLD_C: "#FF9C39",
+    GOLD_D: "#E07D10",
+    GOLD_E: "#A75A05",
+    RED_A: "#FCA9A9",
+    RED_B: "#FF8482",
+    RED_C: "#F9685D",
+    RED_D: "#E84D39",
+    RED_E: "#BC2612",
+    MAROON_A: "#FFBDE0",
+    MAROON_B: "#FF92C6",
+    MAROON_C: "#ED5FA6",
+    MAROON_D: "#CA337C",
+    MAROON_E: "#9E034E",
+    PURPLE_A: "#DDD7FF",
+    PURPLE_B: "#C6B9FC",
+    PURPLE_C: "#AA87FF",
+    PURPLE_D: "#7854AB",
+    PURPLE_E: "#543B78",
     MINT_A: "#F5F9E8",
     MINT_B: "#EDF2DF",
     MINT_C: "#E0E5CC",
-    GRAY_A: "#FDFDFD",
-    GRAY_B: "#F7F7F7",
-    GRAY_C: "#EEEEEE",
-    GRAY_D: "#DDDDDD",
-    GRAY_E: "#CCCCCC",
-    GRAY_F: "#AAAAAA",
-    GRAY_G: "#999999",
-    GRAY_H: "#555555",
-    GRAY_I: "#333333",
+    GRAY_A: "#F6F7F7",
+    GRAY_B: "#F0F1F2",
+    GRAY_C: "#E3E5E6",
+    GRAY_D: "#D6D8DA",
+    GRAY_E: "#BABEC2",
+    GRAY_F: "#888D93",
+    GRAY_G: "#626569",
+    GRAY_H: "#3B3E40",
+    GRAY_I: "#21242C",
     KA_BLUE: "#314453",
-    KA_GREEN: "#639B24",
+    KA_GREEN: "#71B307",
     // Don't actually use _BACKGROUND! Make things transparent instead. The
     // background color used in exercises is subject to change at the whim
-    // of fickle designers.
-    _BACKGROUND: "#FDFDFD"  // TODO(eater): Get rid of this altogether.
+    // of any redesigns.
+    _BACKGROUND: "#FDFDFD",  // TODO(eater): Get rid of this altogether.
 });
 
 // For consistent coloring throughout Perseus
 $.extend(KhanUtil, {
-    INTERACTING: KhanUtil.ORANGE,
-    INTERACTIVE: KhanUtil.ORANGE,
+    INTERACTING: KhanUtil.KA_GREEN,
+    INTERACTIVE: KhanUtil.KA_GREEN,
     DYNAMIC: KhanUtil.BLUE
 });