--- a/devtools/client/netmonitor/src/assets/styles/RequestList.css
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -246,42 +246,42 @@
 }
 
 .requests-list-status-icon[data-code="cached"] {
   border: 2px solid var(--theme-content-color2);
   background-color: transparent;
 }
 
 .requests-list-status-icon[data-code^="1"] {
-  background-color: var(--theme-highlight-blue);
+  background-color: var(--status-code-color-1xx);
 }
 
 .requests-list-status-icon[data-code^="2"] {
-  background-color: var(--theme-highlight-green);
+  background-color: var(--status-code-color-2xx);
 }
 
 /* 3xx are triangles */
 .requests-list-status-icon[data-code^="3"] {
-  background-color: transparent;
+  background-color: var(--status-code-color-3xx);
   width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-bottom: 10px solid var(--theme-highlight-lightorange);
   border-radius: 0;
 }
 
 /* 4xx and 5xx are squares - error codes */
 .requests-list-status-icon[data-code^="4"] {
-  background-color: var(--theme-highlight-red);
+  background-color: var(--status-code-color-4xx);
   border-radius: 0; /* squares */
 }
 
 .requests-list-status-icon[data-code^="5"] {
-  background-color: var(--theme-highlight-pink);
+  background-color: var(--status-code-color-5xx);
   border-radius: 0;
   transform: rotate(45deg);
 }
 
 /* Method column */
 
 .requests-list-method {
   width: 8%;

--- a/devtools/client/netmonitor/src/assets/styles/httpi.css
+++ b/devtools/client/netmonitor/src/assets/styles/httpi.css
@@ -12,8 +12,28 @@
 @import "chrome://devtools/content/sourceeditor/codemirror/lib/codemirror.css";
 @import "chrome://devtools/content/sourceeditor/codemirror/addon/dialog/dialog.css";
 @import "chrome://devtools/content/sourceeditor/codemirror/mozilla.css";
 
 /* Network panel components & styles */
 @import "chrome://devtools/content/netmonitor/src/assets/styles/variables.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/MdnLink.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/NetworkDetailsPanel.css";
+
+.status-code[data-code^="1"] {
+  background-color: var(--status-code-color-1xx);
+}
+
+.status-code[data-code^="2"] {
+  background-color: var(--status-code-color-2xx);
+}
+
+.status-code[data-code^="3"] {
+  background-color: var(--status-code-color-3xx);
+}
+
+.status-code[data-code^="4"] {
+  background-color: var(--status-code-color-4xx);
+}
+
+.status-code[data-code^="5"] {
+  background-color: var(--status-code-color-5xx);
+}

--- a/devtools/client/netmonitor/src/assets/styles/variables.css
+++ b/devtools/client/netmonitor/src/assets/styles/variables.css
@@ -34,13 +34,20 @@
   --sort-descending-image: url(chrome://devtools/skin/images/sort-descending-arrow.svg);
 }
 
 :root.theme-firebug {
   --sort-ascending-image: url(chrome://devtools/skin/images/firebug/arrow-up.svg);
   --sort-descending-image: url(chrome://devtools/skin/images/firebug/arrow-down.svg);
 }
 
-/* Icons */
 :root {
+  /* Icons */
   --play-icon-url: url("chrome://devtools/content/netmonitor/src/assets/icons/play.svg");
   --pause-icon-url: url("chrome://devtools/skin/images/pause.svg");
+
+  /* HTTP status codes */
+  --status-code-color-1xx: var(--theme-highlight-blue);
+  --status-code-color-2xx: var(--theme-highlight-green);
+  --status-code-color-3xx: transparent;
+  --status-code-color-4xx: var(--theme-highlight-pink);
+  --status-code-color-5xx: var(--theme-highlight-red);
 }

--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -1001,16 +1001,25 @@ a.learn-more-link.webconsole-learn-more-
   font-style: inherit;
 }
 
 .webconsole-output-wrapper .message.network .status {
   color: var(--theme-highlight-blue);
   font-style: inherit;
 }
 
+.webconsole-output-wrapper .message.network .status .status-info .status-code {
+  padding: 0 2px;
+  border-radius: 3px;
+}
+
+.webconsole-output-wrapper .message.network .status .status-info .status-code:not([data-code^="3"]) {
+  color: var(--theme-body-background);
+}
+
 
 .network.message .network-info {
   display: none;
   margin-top: 8px;
   border: solid 1px var(--theme-splitter-color);
 }
 
 .network.message.open .network-info {

--- a/devtools/client/webconsole/new-console-output/components/message-types/NetworkEventMessage.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/NetworkEventMessage.js
@@ -66,20 +66,24 @@ function NetworkEventMessage({
 
   const {
     httpVersion,
     status,
     statusText,
   } = response;
 
   const topLevelClasses = [ "cm-s-mozilla" ];
-  let statusInfo;
+  let statusCode, statusInfo;
 
   if (httpVersion && status && statusText !== undefined && totalTime !== undefined) {
-    statusInfo = `[${httpVersion} ${status} ${statusText} ${totalTime}ms]`;
+    statusCode = dom.span({className: "status-code", "data-code": status}, status);
+    statusInfo = dom.span(
+      {className: "status-info"},
+      `[${httpVersion} `, statusCode, ` ${statusText} ${totalTime}ms]`
+    );
   }
 
   const toggle = () => {
     if (open) {
       dispatch(actions.messageClose(id));
     } else {
       dispatch(actions.messageOpen(id));
     }