quick research on colors

colorsFromHex.js

// https://www.color-name.com/hex/FFDC19
export const listOfColors = [
    ['White', '#FFFFFF'],
    ['Black', '#000000'],
    ['Platinum', '#E2E2E2'],
    ['Blue', '#0303F1'],
    ['Purple (X11)', '#B31BF0'],
    ['Diamond', '#B9EDFF'],
    ['Water', '#D0F3FF'],
    ['Ferrari Red', '#ED1A02'],
    ['Shocking Pink', '#F805BF'],
    ['Naples Yellow', '#F8E165'],
    ['Electric Orange', '#FF3400'],
    ['Beer', '#FF8C1D'],
    ['Light Hot Pink', '#FFABDF'],
    ['Metallic Yellow', '#FFDC19'],
]

displayColors.js

import React from 'react';
import { listOfColors } from '../colorsFromHex';

function invertColor(hex: string, bw: boolean) {
    if (hex.indexOf('#') === 0) {
        hex = hex.slice(1);
    }
    // convert 3-digit hex to 6-digits.
    if (hex.length === 3) {
        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    if (hex.length !== 6) {
        throw new Error('Invalid HEX color.');
    }
    var r = parseInt(hex.slice(0, 2), 16),
        g = parseInt(hex.slice(2, 4), 16),
        b = parseInt(hex.slice(4, 6), 16);
    if (bw) {
        // https://stackoverflow.com/a/3943023/112731
        return (r * 0.299 + g * 0.587 + b * 0.114) > 186
            ? '#000000'
            : '#FFFFFF';
    }
    // invert color components
    const red = (255 - r).toString(16);
    const green = (255 - g).toString(16);
    const blue = (255 - b).toString(16);
    // pad each with zeros and return
    return "#" + padZero(red) + padZero(green) + padZero(blue);
}
function padZero(str: any, len?: any) {
    len = len || 2;
    var zeros = new Array(len).join('0');
    return (zeros + str).slice(-len);
}

export const DisplaySvgs = () => {
    return (<>
        <div style={{ height: '100vh', width: '100vw', backgroundColor: 'gray', paddingTop: '4rem', paddingLeft: '4rem' }}>
            <div className='border border-3 rounded' style={{ backgroundColor: 'whitesmoke', width: '75%' }} >
                <h1>Color Section</h1>
                <section>
                    <div className='d-flex gap-3 p-2 flex-wrap'>
                        {listOfColors.map(([colorName, hexColor]) => {
                            return <div className='d-flex flex-column' style={{ width: '102px' }}>
                                <div>{colorName}</div>
                                <div>{hexColor}</div>
                                <div className="rounded px-2" style={{ backgroundColor: hexColor, color: invertColor(hexColor, true) }}>color</div>
                            </div>
                        })}
                    </div>
                    <br />
                    
                </section>
            </div>
        </div>

    </>)
}