Added mode for finding color between two colors.

src/components/CardGrid.tsx

@@ -7,6 +7,7 @@ import { generateAdditionalColors } from '../utils';
 import FullAccessiblePalette from './FullAccessisblePalette';
 import RadioButtonList from './RadioButtonList';
 import SectionTitle from './SectionTitle';
+import FindColor from './FindColor';
 
 const CardGrid: React.FC = () => {
     // You need to have two colors to check contrast
@@ -146,13 +147,20 @@ const CardGrid: React.FC = () => {
                             visibleColors={visibleColors}
                             paletteType={'Adjacent'}
                         />
-                    ) : (
+                    ) : paletteType === 'FullAccessible' ? (
                         <FullAccessiblePalette
                             colors={colors}
                             selectedContrast={selectedContrast}
                             visibleColors={visibleColors}
                             paletteType={'FullAccessible'}
                         />
+                    ) : (
+                        <FindColor
+                            colors={colors}
+                            selectedContrast={selectedContrast}
+                            visibleColors={visibleColors}
+                            paletteType={'FindColor'}
+                        />
                     )}
                 </div>
             </div>

src/components/FindColor.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import { calculateContrastRatio, getRgb, rgbToHex } from '../utils';
+
+interface FindColorProps {
+    selectedContrast: number;
+    colors: string[];
+    visibleColors: string[];
+    paletteType: string;
+}
+
+const FindColor: React.FC<FindColorProps> = ({
+    colors,
+    selectedContrast,
+    visibleColors,
+    paletteType,
+}) => {
+    const [contrastColor, setContrastColor] = useState<string | null>(null);
+
+    useEffect(() => {
+        let newColor: string | null = null;
+        for (let i = 0; i < 1000; i++) {
+            newColor = rgbToHex(getRgb(), getRgb(), getRgb());
+            if (
+                calculateContrastRatio(newColor, colors[0]) >=
+                    selectedContrast &&
+                calculateContrastRatio(newColor, colors[1]) >= selectedContrast
+            ) {
+                break;
+            } else {
+                newColor = null;
+            }
+        }
+        setContrastColor(newColor);
+    }, [colors[0], colors[1], selectedContrast]);
+
+    return (
+        <div>
+            {contrastColor !== null ? (
+                <>
+                    <div
+                        style={{
+                            width: '50px',
+                            height: '50px',
+                            backgroundColor: contrastColor,
+                        }}
+                    />
+                    <p>Contrast color: {contrastColor}</p>
+                </>
+            ) : (
+                'No colors available with enough contrast.'
+            )}
+        </div>
+    );
+};
+
+export default FindColor;

src/components/RadioButtonList.tsx

@@ -41,6 +41,16 @@ const RadioButtonList: React.FC<RadioButtonListProps> = ({
                 setPaletteType('BackgroundColor');
             },
         },
+        {
+            id: 'findColor',
+            name: 'paletteType',
+            value: 'FindColor',
+            label: 'Find Color between two colors',
+            checked: paletteType === 'FindColor',
+            onChange: () => {
+                setPaletteType('FindColor');
+            },
+        },
     ];
 
     return (