增加Tint和Shade的Mix系数反算。

src/page-components/color-compare/CompareLayout.module.css

@@ -4,6 +4,9 @@
     flex-direction: row;
     align-items: stretch;
     gap: var(--spacing-m);
+    &:not(:first-of-type) {
+      margin-top: var(--spacing-s);
+    }
     .element {
       display: flex;
       flex-direction: row;
@@ -20,6 +23,11 @@
         font-size: var(--font-size-xs);
         line-height: var(--font-size-xs);
       }
+      .element_value {
+        align-self: flex-end;
+        font-size: var(--font-size-s);
+        line-height: var(--font-size-s);
+      }
     }
   }
 }

src/page-components/color-compare/ShadeScale.tsx

@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+import { MixReversing } from '../../color_functions/color_module';
+import { useColorFunction } from '../../ColorFunctionContext';
+import styles from './CompareLayout.module.css';
+import { CompareMethodProps } from './share-props';
+
+const defaultMixResult: MixReversing = {
+  r_factor: 0,
+  g_factor: 0,
+  b_factor: 0,
+  average: 0,
+};
+
+export function ShadeScale({ basic = '000000', compare = '000000' }: CompareMethodProps) {
+  const { colorFn } = useColorFunction();
+  const mixFactors = useMemo(() => {
+    if (!colorFn) {
+      return defaultMixResult;
+    }
+    try {
+      const factor = colorFn.shade_scale(basic, compare);
+      return factor;
+    } catch (e) {
+      console.error('[Reversing Tint]', e);
+    }
+    return defaultMixResult;
+  }, [basic, compare]);
+
+  return (
+    <div>
+      <h6>Compare in RGB Shade.</h6>
+      <div className={styles.elements}>
+        <div className={styles.element}>
+          <div className={styles.element_name}>R</div>
+          <div className={styles.element_value}>{(mixFactors.r_factor * 100).toFixed(2)}%</div>
+        </div>
+        <div className={styles.element}>
+          <div className={styles.element_name}>G</div>
+          <div className={styles.element_value}>{(mixFactors.g_factor * 100).toFixed(2)}%</div>
+        </div>
+        <div className={styles.element}>
+          <div className={styles.element_name}>B</div>
+          <div className={styles.element_value}>{(mixFactors.b_factor * 100).toFixed(2)}%</div>
+        </div>
+      </div>
+      <div className={styles.elements}>
+        <div className={styles.element}>
+          <div className={styles.element_name}>Average</div>
+          <div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/page-components/color-compare/TintScale.tsx

@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+import { MixReversing } from '../../color_functions/color_module';
+import { useColorFunction } from '../../ColorFunctionContext';
+import styles from './CompareLayout.module.css';
+import { CompareMethodProps } from './share-props';
+
+const defaultMixResult: MixReversing = {
+  r_factor: 0,
+  g_factor: 0,
+  b_factor: 0,
+  average: 0,
+};
+
+export function TintScale({ basic = '000000', compare = '000000' }: CompareMethodProps) {
+  const { colorFn } = useColorFunction();
+  const mixFactors = useMemo(() => {
+    if (!colorFn) {
+      return defaultMixResult;
+    }
+    try {
+      const factor = colorFn.tint_scale(basic, compare);
+      return factor;
+    } catch (e) {
+      console.error('[Reversing Tint]', e);
+    }
+    return defaultMixResult;
+  }, [basic, compare]);
+
+  return (
+    <div>
+      <h6>Compare in RGB Tint.</h6>
+      <div className={styles.elements}>
+        <div className={styles.element}>
+          <div className={styles.element_name}>R</div>
+          <div className={styles.element_value}>{(mixFactors.r_factor * 100).toFixed(2)}%</div>
+        </div>
+        <div className={styles.element}>
+          <div className={styles.element_name}>G</div>
+          <div className={styles.element_value}>{(mixFactors.g_factor * 100).toFixed(2)}%</div>
+        </div>
+        <div className={styles.element}>
+          <div className={styles.element_name}>B</div>
+          <div className={styles.element_value}>{(mixFactors.b_factor * 100).toFixed(2)}%</div>
+        </div>
+      </div>
+      <div className={styles.elements}>
+        <div className={styles.element}>
+          <div className={styles.element_name}>Average</div>
+          <div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/Compare.tsx

@@ -6,6 +6,8 @@ import { HCTCompare } from '../page-components/color-compare/HCTCompare';
 import { HSLCompare } from '../page-components/color-compare/HSLCompare';
 import { OklchCompare } from '../page-components/color-compare/OKLCHCompare';
 import { RGBCompare } from '../page-components/color-compare/RGBCompare';
+import { ShadeScale } from '../page-components/color-compare/ShadeScale';
+import { TintScale } from '../page-components/color-compare/TintScale';
 import styles from './Compare.module.css';
 
 export function ColorCompare() {
@@ -36,6 +38,8 @@ export function ColorCompare() {
             <HSLCompare basic={basicColor} compare={compareColor} />
             <HCTCompare basic={basicColor} compare={compareColor} />
             <OklchCompare basic={basicColor} compare={compareColor} />
+            <TintScale basic={basicColor} compare={compareColor} />
+            <ShadeScale basic={basicColor} compare={compareColor} />
           </div>
         </div>
       </ScrollArea>