diff --git a/src/page-components/color-compare/CompareLayout.module.css b/src/page-components/color-compare/CompareLayout.module.css
index fcee504..015a61a 100644
--- a/src/page-components/color-compare/CompareLayout.module.css
+++ b/src/page-components/color-compare/CompareLayout.module.css
@@ -15,6 +15,10 @@
       .element_name {
         font-size: var(--font-size-xxl);
         font-weight: bold;
+        &.mean {
+          border-top: 2px solid var(--color-fg);
+          padding-top: var(--spacing-xxs);
+        }
       }
       .element_values {
         display: flex;
diff --git a/src/page-components/color-compare/ShadeScale.tsx b/src/page-components/color-compare/ShadeScale.tsx
index 29ee39c..cd238f8 100644
--- a/src/page-components/color-compare/ShadeScale.tsx
+++ b/src/page-components/color-compare/ShadeScale.tsx
@@ -1,3 +1,4 @@
+import cx from 'clsx';
 import { useMemo } from 'react';
 import { MixReversing } from '../../color_functions/color_module';
 import { useColorFunction } from '../../ColorFunctionContext';
@@ -45,7 +46,7 @@ export function ShadeScale({ basic = '000000', compare = '000000' }: CompareMeth
       </div>
       <div className={styles.elements}>
         <div className={styles.element}>
-          <div className={styles.element_name}>Average</div>
+          <div className={cx(styles.element_name, styles.mean)}>F</div>
           <div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
         </div>
       </div>
diff --git a/src/page-components/color-compare/TintScale.tsx b/src/page-components/color-compare/TintScale.tsx
index 6b9aa9a..b64b569 100644
--- a/src/page-components/color-compare/TintScale.tsx
+++ b/src/page-components/color-compare/TintScale.tsx
@@ -1,3 +1,4 @@
+import cx from 'clsx';
 import { useMemo } from 'react';
 import { MixReversing } from '../../color_functions/color_module';
 import { useColorFunction } from '../../ColorFunctionContext';
@@ -45,7 +46,7 @@ export function TintScale({ basic = '000000', compare = '000000' }: CompareMetho
       </div>
       <div className={styles.elements}>
         <div className={styles.element}>
-          <div className={styles.element_name}>Average</div>
+          <div className={cx(styles.element_name, styles.mean)}>F</div>
           <div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
         </div>
       </div>