@_lan/web-libs/packages/color/src/shared/name.ts

<div align="center"> <img src="./public/favicon.svg" width="160" /> <h1>SoybeanAdmin AntDesign</h1> <span>中文 | <a href="./README.en_US.md">English</a></span> </div>

import { colorNames } from '../constant';
import { getHex, getHsl, getRgb } from './colord';

/**
 * Get color name
 *
 * @param color
 */
export function getColorName(color: string) {
  const hex = getHex(color);
  const rgb = getRgb(color);
  const hsl = getHsl(color);

  let ndf = 0;
  let ndf1 = 0;
  let ndf2 = 0;
  let cl = -1;
  let df = -1;

  let name = '';

  colorNames.some((item, index) => {
    const [hexValue, colorName] = item;

    const match = hex === hexValue;

    if (match) {
      name = colorName;
    } else {
      const { r, g, b } = getRgb(hexValue);
      const { h, s, l } = getHsl(hexValue);

      ndf1 = (rgb.r - r) ** 2 + (rgb.g - g) ** 2 + (rgb.b - b) ** 2;
      ndf2 = (hsl.h - h) ** 2 + (hsl.s - s) ** 2 + (hsl.l - l) ** 2;

      ndf = ndf1 + ndf2 * 2;
      if (df < 0 || df > ndf) {
        df = ndf;
        cl = index;
      }
    }

    return match;
  });

  name = colorNames[cl][1];

  return name;
}