parseColor

The parseColor function parses color strings in various formats (hex, RGB, HSL) into structured color objects.

Basic Usage

import { parseColor } from "cx/util";

// Parse hex color
parseColor("#ff5733");
// { type: 'rgba', r: 255, g: 87, b: 51, a: 1 }

// Parse shorthand hex
parseColor("#f53");
// { type: 'rgba', r: 255, g: 85, b: 51, a: 1 }

// Parse RGB
parseColor("rgb(255, 87, 51)");
// { type: 'rgba', r: 255, g: 87, b: 51, a: 1 }

// Parse RGBA
parseColor("rgba(255, 87, 51, 0.5)");
// { type: 'rgba', r: 255, g: 87, b: 51, a: 0.5 }

// Parse HSL
parseColor("hsl(14, 100, 60)");
// { type: 'hsla', h: 14, s: 100, l: 60, a: 1 }

// Parse HSLA
parseColor("hsla(14, 100, 60, 0.5)");
// { type: 'hsla', h: 14, s: 100, l: 60, a: 0.5 }

Specialized Parsers

CxJS also exports specialized parsers for each format.

import { parseHexColor, parseRgbColor, parseHslColor } from "cx/util";

// Parse only hex colors
parseHexColor("#ff5733");
// { type: 'rgba', r: 255, g: 87, b: 51, a: 1 }

// Parse only RGB/RGBA colors
parseRgbColor("rgba(255, 87, 51, 0.5)");
// { type: 'rgba', r: 255, g: 87, b: 51, a: 0.5 }

// Parse only HSL/HSLA colors
parseHslColor("hsl(14, 100, 60)");
// { type: 'hsla', h: 14, s: 100, l: 60, a: 1 }

Return Types

RGBColor

Returned when parsing hex or RGB colors.

interface RGBColor {
  type: "rgba";
  r: number; // 0-255
  g: number; // 0-255
  b: number; // 0-255
  a: number; // 0-1
}

HSLColor

Returned when parsing HSL colors.

interface HSLColor {
  type: "hsla";
  h: number; // 0-360 (degrees)
  s: number; // 0-100 (percentage)
  l: number; // 0-100 (percentage)
  a: number; // 0-1
}

Null Handling

The function returns null for null or empty input.

parseColor(null); // null
parseColor(""); // null

Error Handling

Invalid color formats throw an error.

parseColor("invalid"); // throws Error: "Unknown color format: invalid."
parseColor("#gg0000"); // throws Error: "Invalid color #gg0000."

API

function parseColor(color: string | null): RGBColor | HSLColor | null;
function parseHexColor(color: string | null): RGBColor | null;
function parseRgbColor(color: string | null): RGBColor | null;
function parseHslColor(color: string | null): HSLColor | null;

Returns: A color object with type and component values, or null for empty input.