diff --git a/share/tools/web_config/js/colorutils.js b/share/tools/web_config/js/colorutils.js
index 2f009a5a3..7a319cb6f 100644
--- a/share/tools/web_config/js/colorutils.js
+++ b/share/tools/web_config/js/colorutils.js
@@ -192,34 +192,35 @@ function master_color_for_color(color_str) {
 }
 
 /* Given a color name, like 'normal' or 'red' or 'FF00F0', return an RGB color string (or empty
-   string) */
+   string). If multiple colors are given, as in '555 brblack', interpret the first color. */
 function interpret_color(str) {
-    str = str.toLowerCase();
-    if (str == 'black') return '000000';
-    if (str == 'red') return '800000';
-    if (str == 'green') return '008000';
-    if (str == 'brown') return '725000';
-    if (str == 'yellow') return '808000';
-    if (str == 'blue') return '000080';
-    if (str == 'magenta') return '800080';
-    if (str == 'purple') return '800080';
-    if (str == 'cyan') return '008080';
-    if (str == 'white') return 'c0c0c0';
-    if (str == 'grey') return 'e5e5e5';
-    if (str == 'brgrey') return '555555';
-    if (str == 'brblack') return '808080';
-    if (str == 'brred') return 'ff0000';
-    if (str == 'brgreen') return '00ff00';
-    if (str == 'brbrown') return 'ffff00';
-    if (str == 'bryellow') return 'ffff00';
-    if (str == 'brblue') return '0000ff';
-    if (str == 'brmagenta') return 'ff00ff';
-    if (str == 'brpurple') return 'ff00ff';
-    if (str == 'brcyan') return '00ffff';
-    if (str == 'brwhite') return 'ffffff';
+    if (!str) return '';
+    str = str.toLowerCase().split(" ")[0];
+    if (str == 'black') return '#000000';
+    if (str == 'red') return '#800000';
+    if (str == 'green') return '#008000';
+    if (str == 'brown') return '#725000';
+    if (str == 'yellow') return '#808000';
+    if (str == 'blue') return '#000080';
+    if (str == 'magenta') return '#800080';
+    if (str == 'purple') return '#800080';
+    if (str == 'cyan') return '#008080';
+    if (str == 'white') return '#c0c0c0';
+    if (str == 'grey') return '#e5e5e5';
+    if (str == 'brgrey') return '#555555';
+    if (str == 'brblack') return '#808080';
+    if (str == 'brred') return '#ff0000';
+    if (str == 'brgreen') return '#00ff00';
+    if (str == 'brbrown') return '#ffff00';
+    if (str == 'bryellow') return '#ffff00';
+    if (str == 'brblue') return '#0000ff';
+    if (str == 'brmagenta') return '#ff00ff';
+    if (str == 'brpurple') return '#ff00ff';
+    if (str == 'brcyan') return '#00ffff';
+    if (str == 'brwhite') return '#ffffff';
     if (str == 'normal') return '';
     if (str == 'reset') return '';
-    return str
+    return '#' + str
 }
 
 var color_scheme_fish_default = {
diff --git a/share/tools/web_config/js/controllers.js b/share/tools/web_config/js/controllers.js
index ad7610075..0fca3cbf0 100644
--- a/share/tools/web_config/js/controllers.js
+++ b/share/tools/web_config/js/controllers.js
@@ -34,6 +34,8 @@ controllers.controller("colorsController", function($scope, $http) {
 
     $scope.border_color_for_color = border_color_for_color;
 
+    $scope.interpret_color = interpret_color;
+
     $scope.getColorArraysArray = function() {
         var result = null;
         if ( $scope.selectedColorScheme.colors && $scope.selectedColorScheme.colors.length > 0)
@@ -165,7 +167,6 @@ controllers.controller("promptController", function($scope, $http) {
     $scope.fetchSamplePrompts= function() {
         $http.get("sample_prompts/").then(function(arg) {
             $scope.samplePrompts = arg.data;
-            $scope.samplePromptsArrayArray = get_colors_as_nested_array($scope.samplePrompts, 1);
 
             if ($scope.selectedPrompt == null) {
                 $scope.selectPrompt($scope.samplePrompts[0]);
diff --git a/share/tools/web_config/partials/colors.html b/share/tools/web_config/partials/colors.html
index 3c704c0a7..f8e44510e 100644
--- a/share/tools/web_config/partials/colors.html
+++ b/share/tools/web_config/partials/colors.html
@@ -14,43 +14,43 @@ fish cannot change the background color of your terminal. Refer to your terminal
         <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
         	  ng-mouseenter="csHoveredType = 'command'"
         	  ng-mouseleave="csHoveredType = false"
-              data-ng-style="{ 'color': selectedColorScheme.command}"
+              data-ng-style="{ 'color': interpret_color(selectedColorScheme.command)}"
               ng-click="selectColorSetting('command')">/bright/vixens</span>
 
         <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'param'}"
         	  ng-mouseenter="csHoveredType = 'param'"
         	  ng-mouseleave="csHoveredType = false"
-              data-ng-style="{ 'color': selectedColorScheme.param}"
+              data-ng-style="{ 'color': interpret_color(selectedColorScheme.param)}"
               ng-click="selectColorSetting('param')">jump</span>
 
         <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'end'}"
         	  ng-mouseenter="csHoveredType = 'end'"
         	  ng-mouseleave="csHoveredType = false"
-              data-ng-style="{ 'color': selectedColorScheme.end}"
+              data-ng-style="{ 'color': interpret_color(selectedColorScheme.end)}"
               ng-click="selectColorSetting('end')">|</span>
 
         <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
         	  ng-mouseenter="csHoveredType = 'command'"
         	  ng-mouseleave="csHoveredType = false"
-              data-ng-style="{ 'color': selectedColorScheme.command}"
+              data-ng-style="{ 'color': interpret_color(selectedColorScheme.command)}"
               ng-click="selectColorSetting('command')">dozy</span>
 
         <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'quote'}"
         	  ng-mouseenter="csHoveredType = 'quote'"
         	  ng-mouseleave="csHoveredType = false"
-              data-ng-style="{ 'color': selectedColorScheme.quote}"
+              data-ng-style="{ 'color': interpret_color(selectedColorScheme.quote)}"
               ng-click="selectColorSetting('quote')"> "fowl"</span>
 
         <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'redirection'}"
         	  ng-mouseenter="csHoveredType = 'redirection'"
         	  ng-mouseleave="csHoveredType = false"
-              data-ng-style="{ 'color': selectedColorScheme.redirection}"
+              data-ng-style="{ 'color': interpret_color(selectedColorScheme.redirection)}"
               ng-click="selectColorSetting('redirection')">&gt; quack</span>
 
         <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'end'}"
         	  ng-mouseenter="csHoveredType = 'end'"
         	  ng-mouseleave="csHoveredType = false"
-              data-ng-style="{ 'color': selectedColorScheme.end}"
+              data-ng-style="{ 'color': interpret_color(selectedColorScheme.end)}"
               ng-click="selectColorSetting('end')">&</span>
 
         <br>
@@ -58,13 +58,13 @@ fish cannot change the background color of your terminal. Refer to your terminal
         <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
         	  ng-mouseenter="csHoveredType = 'command'"
         	  ng-mouseleave="csHoveredType = false"
-              data-ng-style="{ 'color': selectedColorScheme.command}"
+              data-ng-style="{ 'color': interpret_color(selectedColorScheme.command)}"
               ng-click="selectColorSetting('command')">echo</span>
 
         <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'error'}"
         	  ng-mouseenter="csHoveredType = 'error'"
         	  ng-mouseleave="csHoveredType = false"
-              data-ng-style="{ 'color': selectedColorScheme.error}"
+              data-ng-style="{ 'color': interpret_color(selectedColorScheme.error)}"
               ng-click="selectColorSetting('error')">'Errors are the portals to discovery</span>
 
         <br>
@@ -72,7 +72,7 @@ fish cannot change the background color of your terminal. Refer to your terminal
         <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'comment'}"
         	  ng-mouseenter="csHoveredType = 'comment'"
         	  ng-mouseleave="csHoveredType = false"
-        	  data-ng-style="{ 'color': selectedColorScheme.comment}"
+        	  data-ng-style="{ 'color': interpret_color(selectedColorScheme.comment)}"
         	  ng-click="selectColorSetting('comment')"># This is a comment</span>
 
         <br>
@@ -80,13 +80,13 @@ fish cannot change the background color of your terminal. Refer to your terminal
         <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
         	  ng-mouseenter="csHoveredType = 'command'"
         	  ng-mouseleave="csHoveredType = false"
-              data-ng-style="{ 'color': selectedColorScheme.command}"
+              data-ng-style="{ 'color': interpret_color(selectedColorScheme.command)}"
               ng-click="selectColorSetting('command')">Th</span><span
               class="fake_cursor"><span style="visibility: hidden">i</span></span><span
               ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'autosuggestion'}"
         	  ng-mouseenter="csHoveredType = 'autosuggestion'"
         	  ng-mouseleave="csHoveredType = false"
-              data-ng-style="{ 'color': selectedColorScheme.autosuggestion }"
+              data-ng-style="{ 'color': interpret_color(selectedColorScheme.autosuggestion)}"
               ng-click="selectColorSetting('autosuggestion')">s is an autosuggestion</span>
 
 
@@ -110,8 +110,8 @@ fish cannot change the background color of your terminal. Refer to your terminal
 		<table class="colorpicker_term256" style="margin: 0px 20px;">
 			<tbody>
 				<tr class="colorpicker_term256_row" data-ng-repeat="color_array in colorArraysArray">
-					<td class="colorpicker_term256_cell" data-ng-style="{'background-color': color, 'color': color}" ng-click="changeSelectedTextColor(color)" ng-repeat="color in color_array">
-						<div class="colorpicker_term256_selection_indicator" ng-show="selectedColorScheme[selectedColorSetting] == color" ng-style="{'border-color': border_color_for_color(color)}"</div>
+					<td class="colorpicker_term256_cell" data-ng-style="{'background-color': interpret_color(color)}" ng-click="changeSelectedTextColor(color)" ng-repeat="color in color_array">
+						<div class="colorpicker_term256_selection_indicator" ng-show="selectedColorScheme[selectedColorSetting] == color" ng-style="{'border-color': interpret_color(border_color_for_color(color))}"</div>
 					</td>
 				</tr>
 			</tbody>
@@ -130,20 +130,20 @@ fish cannot change the background color of your terminal. Refer to your terminal
           <a data-ng-show="colorScheme.url" style="text-decoration: none; color: inherit;" ng-href="{{colorScheme.url}}">&#10138;</a>
 				</div>
 				<div class="colorpicker_text_sample_tight" data-ng-style="{'background-color': colorScheme.preferred_background}">
-					<span data-ng-style="{'color': colorScheme.command}">/bright/vixens</span>
-					<span data-ng-style="{'color': colorScheme.param}">jump</span>
-					<span data-ng-style="{'color': colorScheme.end}">|</span>
-					<span data-ng-style="{'color': colorScheme.command}">dozy</span>
-					<span data-ng-style="{'color': colorScheme.quote}"> "fowl" </span>
-					<span data-ng-style="{'color': colorScheme.redirection}">&gt; quack</span>
-					<span data-ng-style="{'color': colorScheme.end}">&</span>
+					<span data-ng-style="{'color': interpret_color(colorScheme.command)}">/bright/vixens</span>
+					<span data-ng-style="{'color': interpret_color(colorScheme.param)}">jump</span>
+					<span data-ng-style="{'color': interpret_color(colorScheme.end)}">|</span>
+					<span data-ng-style="{'color': interpret_color(colorScheme.command)}">dozy</span>
+					<span data-ng-style="{'color': interpret_color(colorScheme.quote)}"> "fowl" </span>
+					<span data-ng-style="{'color': interpret_color(colorScheme.redirection)}">&gt; quack</span>
+					<span data-ng-style="{'color': interpret_color(colorScheme.end)}">&</span>
 					<br>
-					<span data-ng-style="{'color': colorScheme.command}">echo</span>
-					<span data-ng-style="{'color': colorScheme.error}">'Errors are the portals to discovery</span>
+					<span data-ng-style="{'color': interpret_color(colorScheme.command)}">echo</span>
+					<span data-ng-style="{'color': interpret_color(colorScheme.error)}">'Errors are the portals to discovery</span>
 					<br>
-					<span data-ng-style="{ 'color': colorScheme.comment}"># This is a comment</span>
+					<span data-ng-style="{'color': interpret_color(colorScheme.comment)}"># This is a comment</span>
 					<br>
-					<span data-ng-style="{ 'color': colorScheme.command}">Th</span><span class="fake_cursor"><span style="visibility: hidden">i</span></span><span data-ng-style="{ 'color': colorScheme.autosuggestion}">s is an autosuggestion</span>
+					<span data-ng-style="{'color': interpret_color(colorScheme.command)}">Th</span><span class="fake_cursor"><span style="visibility: hidden">i</span></span><span data-ng-style="{ 'color': interpret_color(colorScheme.autosuggestion)}">s is an autosuggestion</span>
 				</div>
 			</div>
 		</div>