apphouse/dist/utils/color/isHslColor.ts

Component library for React that uses observable state management and theme-able components.

// Checks if a string is a valid HSL color.
export function isHslColor(color: string): boolean {
  // Check if the color starts with 'hsl(' and ends with ')'
  if (!color.startsWith('hsl(') || !color.endsWith(')')) {
    return false;
  }

  // Remove 'hsl(' and ')' from the color string
  const hsl = color.slice(4, -1);

  // Split the color string by commas
  const values = hsl.split(',');

  // Check if the color has exactly 3 values
  if (values.length !== 3) {
    return false;
  }

  // Check if each value is a valid number within the appropriate range
  const hue = Number(values[0].trim());
  const saturation = Number(values[1].trim());
  const lightness = Number(values[2].trim());

  // Check range for HSL values: hue, saturation, lightness
  if (
    isNaN(hue) ||
    hue < 0 ||
    hue > 360 ||
    isNaN(saturation) ||
    saturation < 0 ||
    saturation > 100 ||
    isNaN(lightness) ||
    lightness < 0 ||
    lightness > 100
  ) {
    return false;
  }

  return true;
}