diff --git a/module/actor.ts b/module/actor.ts
index 4ee884b7..8860160e 100644
--- a/module/actor.ts
+++ b/module/actor.ts
@@ -1,4 +1,4 @@
-import { canAdvance, TestString, updateTestsNeeded } from "./helpers.js";
+import { canAdvance, ShadeString, TestString, updateTestsNeeded } from "./helpers.js";
 import { DisplayClass, ReputationRootData } from "./items/item.js";
 import { Skill, SkillDataRoot } from "./items/skill.js";
 
@@ -282,7 +282,7 @@ interface Common {
 }
 
 export interface Ability extends TracksTests, DisplayClass {
-    shade: string;
+    shade: ShadeString;
     open: boolean;
 }
 
diff --git a/module/helpers.ts b/module/helpers.ts
index 4267cb54..51258707 100644
--- a/module/helpers.ts
+++ b/module/helpers.ts
@@ -106,4 +106,5 @@ const AbilityLookup = {
     "9": { r: 0, d: 5, c: 3},
 };
 
-export type TestString = "Routine" | "Difficult" | "Challenging" | "Routine/Difficult";
\ No newline at end of file
+export type TestString = "Routine" | "Difficult" | "Challenging" | "Routine/Difficult";
+export type ShadeString = "B" | "G" | "W";
\ No newline at end of file
diff --git a/module/items/skill.ts b/module/items/skill.ts
index 035a7821..7bb1750e 100644
--- a/module/items/skill.ts
+++ b/module/items/skill.ts
@@ -1,5 +1,5 @@
 import { Ability, TracksTests } from "../actor.js";
-import { updateTestsNeeded } from "../helpers.js";
+import { ShadeString, updateTestsNeeded } from "../helpers.js";
 import { DisplayClass } from "./item.js";
 
 export class Skill extends Item {
@@ -32,7 +32,7 @@ export interface SkillDataRoot extends BaseEntityData {
 
 export interface SkillData extends TracksTests, DisplayClass {
     name: string;
-    shade: string;
+    shade: ShadeString;
 
     root1: string;
     root2: string;
diff --git a/module/rolls.ts b/module/rolls.ts
index 9cd01d45..90264654 100644
--- a/module/rolls.ts
+++ b/module/rolls.ts
@@ -119,6 +119,7 @@ async function ptgsRollCallback(
             name: shrugging ? "Shrug It Off Health Test" : "Grit Your Teeth Health Test",
             successes: roll.result,
             difficulty: baseData.diff,
+            nameClass: getRollNameClass(stat.open, stat.shade),
             obstacleTotal: baseData.obstacleTotal -= baseData.obPenalty,
             success: isSuccessful,
             rolls: roll.dice[0].rolls,
@@ -198,6 +199,7 @@ async function attrRollCallback(
         successes: roll.result,
         difficulty: baseData.diff,
         obstacleTotal: baseData.obstacleTotal,
+        nameClass: getRollNameClass(stat.open, stat.shade),
         success: isSuccessful,
         rolls: roll.dice[0].rolls,
         difficultyGroup: dg,
@@ -279,6 +281,7 @@ async function circlesRollCallback(
         successes: roll.result,
         difficulty: baseData.diff,
         obstacleTotal: baseData.obstacleTotal,
+        nameClass: getRollNameClass(stat.open, stat.shade),
         success: parseInt(roll.result, 10) >= baseData.obstacleTotal,
         rolls: roll.dice[0].rolls,
         difficultyGroup: dg,
@@ -354,6 +357,7 @@ async function learningRollCallback(
         successes: roll.result,
         difficulty: baseData.diff,
         obstacleTotal: baseData.obstacleTotal,
+        nameClass: getRollNameClass(rollSettings.open, rollSettings.shade),
         success: isSuccessful,
         rolls: roll.dice[0].rolls,
         difficultyGroup: dg,
@@ -429,6 +433,7 @@ async function statRollCallback(
         successes: roll.result,
         difficulty: baseData.diff + baseData.obPenalty,
         obstacleTotal: baseData.obstacleTotal,
+        nameClass: getRollNameClass(stat.open, stat.shade),
         success: isSuccessful,
         rolls: roll.dice[0].rolls,
         difficultyGroup: dg,
@@ -495,6 +500,7 @@ async function skillRollCallback(
         successes: roll.result,
         difficulty: baseData.diff,
         obstacleTotal: baseData.obstacleTotal,
+        nameClass: getRollNameClass(skill.data.data.open, skill.data.data.shade),
         success: parseInt(roll.result, 10) >= baseData.obstacleTotal,
         rolls: roll.dice[0].rolls,
         difficultyGroup: dg,
@@ -684,7 +690,7 @@ async function advanceLearningProgress(skill: Skill) {
     }
 }
 
-function rollDice(numDice: number, open: boolean = false, shade: string = 'B'): Roll | null {
+function rollDice(numDice: number, open: boolean = false, shade: helpers.ShadeString = 'B'): Roll | null {
     if (numDice <= 0) {
         getNoDiceErrorDialog(numDice);
         return null;
@@ -694,12 +700,12 @@ function rollDice(numDice: number, open: boolean = false, shade: string = 'B'):
     }
 }
 
-function getRootStatInfo(skill: Skill, actor: BWActor): { open: boolean, shade: string } {
+function getRootStatInfo(skill: Skill, actor: BWActor): { open: boolean, shade: helpers.ShadeString } {
     const root1 = getProperty(actor, `data.data.${skill.data.data.root1}`) as Ability;
     const root2 = skill.data.data.root2 ?
         getProperty(actor, `data.data.${skill.data.data.root2}`) as Ability : root1;
 
-    let shade: string;
+    let shade: helpers.ShadeString;
     if (root1.shade === root2.shade) {
         shade = root1.shade;
     } else if (root1.shade === "B" || root2.shade === "B") {
@@ -713,6 +719,20 @@ function getRootStatInfo(skill: Skill, actor: BWActor): { open: boolean, shade:
     };
 }
 
+function getRollNameClass(open: boolean, shade: helpers.ShadeString): string {
+    let css = "shade-black";
+    if (shade === "G") {
+        css = "shade-grey";
+    } else if (shade === "W") {
+        css = "shade-white";
+    }
+
+    if (open) {
+        css += " open-roll";
+    }
+    return css;
+}
+
 async function getNoDiceErrorDialog(numDice: number) {
     return new Dialog({
         title: "Too Few Dice",
@@ -783,6 +803,7 @@ export interface RollChatMessageData {
     success: boolean;
     rolls: {success: boolean, roll: number}[];
     difficultyGroup: string;
+    nameClass: string;
     obstacleTotal: number;
 
     dieSources?: { [i: string]: string };
diff --git a/styles/chat/roll.scss b/styles/chat/roll.scss
index 48cfdf72..426d0100 100644
--- a/styles/chat/roll.scss
+++ b/styles/chat/roll.scss
@@ -4,6 +4,24 @@
     .message-title {
         font-size: 1.5em;
         font-weight: bold;
+
+        &.open-roll {
+            color: gold;
+        }
+
+        &.shade-grey {
+            background-color: rgba(black, 0.35);
+        }
+
+        &.shade-black {
+            background-color: rgba(black, 0.75);
+            color: white;
+        }
+
+        &.shade-white {
+            background-color:  rgba(white, .75);
+            color: black;
+        }
     }
 
     div {
@@ -54,6 +72,10 @@
         margin-left: 5px;
     }
 
+    .roll-Routine {
+        background-color: rgba(white, .75);
+    }
+
     .roll-Difficult {
         background-color: rgba(black, 0.35);
     }
@@ -62,4 +84,11 @@
         background-color: rgba(black, 0.75);
         color: white;
     }
+
+    .roll-success {
+        background-color: rgba(green, .5);
+    }
+    .roll-failure {
+        background-color: rgba(red, .5);
+    }
 }
\ No newline at end of file
diff --git a/templates/chat/roll-message.html b/templates/chat/roll-message.html
index 18c1e1bc..99f21e1d 100644
--- a/templates/chat/roll-message.html
+++ b/templates/chat/roll-message.html
@@ -1,5 +1,5 @@
 <div class="chat-message flex-row">
-    <div class="roll-full-width message-title">
+    <div class="roll-full-width message-title {{nameClass}}">
         {{name}}
     </div>
     <div class="roll-full-width roll-{{difficultyGroup}}">
@@ -45,11 +45,11 @@
         {{/each}}
     </div>
     {{#if success}}
-    <div class="roll-result roll-full-width">
+    <div class="roll-result roll-full-width roll-success">
         Success!
     </div>
     {{else}}
-    <div class="roll-result roll-full-width">
+    <div class="roll-result roll-full-width roll-failure">
         Failure!
     </div>
     {{/if}}