增加颜色对比的分析模式选择。

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

@@ -19,20 +19,28 @@ const defaultCompareResult: HctDiffference = {
   },
 };
 
-export function HCTCompare({ basic = '000000', compare = '000000' }: CompareMethodProps) {
+export function HCTCompare({
+  basic = '000000',
+  compare = '000000',
+  mode = 'absolute',
+}: CompareMethodProps) {
   const { colorFn } = useColorFunction();
   const differ = useMemo(() => {
     if (!colorFn) {
       return defaultCompareResult;
     }
     try {
-      const diff = colorFn.differ_in_hct(basic, compare);
+      const diffFn = {
+        absolute: colorFn.differ_in_hct,
+        relative: colorFn.relative_differ_in_hct,
+      };
+      const diff = diffFn[mode](basic, compare);
       return diff;
     } catch (e) {
       console.error('[Compare in HCT]', e);
     }
     return defaultCompareResult;
-  }, [basic, compare]);
+  }, [basic, compare, mode]);
 
   return (
     <div>

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

@@ -19,20 +19,28 @@ const defaultCompareResult: HSLDifference = {
   },
 };
 
-export function HSLCompare({ basic = '000000', compare = '000000' }: CompareMethodProps) {
+export function HSLCompare({
+  basic = '000000',
+  compare = '000000',
+  mode = 'absolute',
+}: CompareMethodProps) {
   const { colorFn } = useColorFunction();
   const differ = useMemo(() => {
     if (!colorFn) {
       return defaultCompareResult;
     }
     try {
-      const diff = colorFn.differ_in_hsl(basic, compare);
+      const diffFn = {
+        absolute: colorFn.differ_in_hsl,
+        relative: colorFn.relative_differ_in_hsl,
+      };
+      const diff = diffFn[mode](basic, compare);
       return diff;
     } catch (e) {
       console.error('[Compare in HSL]', e);
     }
     return defaultCompareResult;
-  }, [basic, compare]);
+  }, [basic, compare, mode]);
 
   return (
     <div>

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

@@ -19,20 +19,28 @@ const defaultCompareResult: OklchDifference = {
   },
 };
 
-export function OklchCompare({ basic = '000000', compare = '000000' }: CompareMethodProps) {
+export function OklchCompare({
+  basic = '000000',
+  compare = '000000',
+  mode = 'absolute',
+}: CompareMethodProps) {
   const { colorFn } = useColorFunction();
   const differ = useMemo(() => {
     if (!colorFn) {
       return defaultCompareResult;
     }
     try {
-      const diff = colorFn.differ_in_oklch(basic, compare);
+      const diffFn = {
+        absolute: colorFn.differ_in_oklch,
+        relative: colorFn.relative_differ_in_oklch,
+      };
+      const diff = diffFn[mode](basic, compare);
       return diff;
     } catch (e) {
       console.error('[Compare in Oklch]', e);
     }
     return defaultCompareResult;
-  }, [basic, compare]);
+  }, [basic, compare, mode]);
 
   return (
     <div>

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

@@ -19,14 +19,22 @@ const defaultCompareResult: RGBDifference = {
   },
 };
 
-export function RGBCompare({ basic = '000000', compare = '000000' }: CompareMethodProps) {
+export function RGBCompare({
+  basic = '000000',
+  compare = '000000',
+  mode = 'absolute',
+}: CompareMethodProps) {
   const { colorFn } = useColorFunction();
   const differ = useMemo(() => {
     if (!colorFn) {
       return defaultCompareResult;
     }
     try {
-      const diff = colorFn?.differ_in_rgb(basic, compare);
+      const diffFn = {
+        absolute: colorFn.differ_in_rgb,
+        relative: colorFn.relative_differ_in_rgb,
+      };
+      const diff = diffFn[mode](basic, compare);
       return {
         r: {
           delta: Math.round(diff.r.delta * 255),
@@ -45,7 +53,7 @@ export function RGBCompare({ basic = '000000', compare = '000000' }: CompareMeth
       console.error('[Compare in RGB]', e);
     }
     return defaultCompareResult;
-  }, [basic, compare]);
+  }, [basic, compare, mode]);
 
   return (
     <div>

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

@@ -46,7 +46,7 @@ export function ShadeScale({ basic = '000000', compare = '000000' }: CompareMeth
       </div>
       <div className={styles.elements}>
         <div className={styles.element}>
-          <div className={cx(styles.element_name, styles.mean)}>F</div>
+          <div className={cx(styles.element_name, styles.mean)}>Factor</div>
           <div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
         </div>
       </div>

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

@@ -46,7 +46,7 @@ export function TintScale({ basic = '000000', compare = '000000' }: CompareMetho
       </div>
       <div className={styles.elements}>
         <div className={styles.element}>
-          <div className={cx(styles.element_name, styles.mean)}>F</div>
+          <div className={cx(styles.element_name, styles.mean)}>Factor</div>
           <div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
         </div>
       </div>

src/page-components/color-compare/share-props.ts

@@ -1,4 +1,5 @@
 export type CompareMethodProps = {
   basic?: string;
   compare?: string;
+  mode?: 'absolute' | 'relative';
 };

src/pages/Compare.tsx

@@ -1,6 +1,8 @@
 import cx from 'clsx';
 import { useState } from 'react';
 import { ColorPicker } from '../components/ColorPicker';
+import { HSegmentedControl } from '../components/HSegmentedControl';
+import { Labeled } from '../components/Labeled';
 import { ScrollArea } from '../components/ScrollArea';
 import { HCTCompare } from '../page-components/color-compare/HCTCompare';
 import { HSLCompare } from '../page-components/color-compare/HSLCompare';
@@ -13,6 +15,7 @@ import styles from './Compare.module.css';
 export function ColorCompare() {
   const [basicColor, setBasicColor] = useState('000000');
   const [compareColor, setCompareColor] = useState('000000');
+  const [analysisMode, setMode] = useState<'relative' | 'absolute'>('relative');
 
   return (
     <div className={cx('workspace', styles.compare_workspace)}>
@@ -34,10 +37,20 @@ export function ColorCompare() {
           </div>
           <div className={styles.compare_column}>
             <h5>Compare Result</h5>
-            <RGBCompare basic={basicColor} compare={compareColor} />
+            <Labeled label="Analysis Mode">
-            <HSLCompare basic={basicColor} compare={compareColor} />
+              <HSegmentedControl
-            <HCTCompare basic={basicColor} compare={compareColor} />
+                options={[
-            <OklchCompare basic={basicColor} compare={compareColor} />
+                  { label: 'Absolute', value: 'absolute' },
+                  { label: 'Relative', value: 'relative' },
+                ]}
+                value={analysisMode}
+                onChange={setMode}
+              />
+            </Labeled>
+            <RGBCompare basic={basicColor} compare={compareColor} mode={analysisMode} />
+            <HSLCompare basic={basicColor} compare={compareColor} mode={analysisMode} />
+            <HCTCompare basic={basicColor} compare={compareColor} mode={analysisMode} />
+            <OklchCompare basic={basicColor} compare={compareColor} mode={analysisMode} />
             <TintScale basic={basicColor} compare={compareColor} />
             <ShadeScale basic={basicColor} compare={compareColor} />
           </div>