Color Parsing and Construction

/**
 * Parses CSS Color Module Level 3 and 4 color strings
 * @param specifier - CSS color string to parse
 * @returns RGB or HSL color object, or null if invalid
 */
function color(specifier: string): Rgb | Hsl | null;

import { color } from "d3-color";

// Hex colors
const red1 = color("#ff0000");     // 6-digit hex
const red2 = color("#f00");        // 3-digit hex
const redAlpha = color("#ff000080"); // 8-digit hex with alpha

// RGB colors
const blue1 = color("rgb(0, 0, 255)");      // integer values
const blue2 = color("rgb(0%, 0%, 100%)");   // percentage values
const blueAlpha = color("rgba(0, 0, 255, 0.5)"); // with alpha

// HSL colors
const green = color("hsl(120, 100%, 50%)");
const greenAlpha = color("hsla(120, 100%, 50%, 0.7)");

// Named colors
const steelblue = color("steelblue");
const transparent = color("transparent");

// Invalid input returns null
const invalid = color("not-a-color"); // null

/**
 * Creates RGB color from numeric values
 * @param r - Red channel (0-255)
 * @param g - Green channel (0-255) 
 * @param b - Blue channel (0-255)
 * @param opacity - Alpha channel (0-1), defaults to 1
 * @returns RGB color object
 */
function rgb(r: number, g: number, b: number, opacity?: number): Rgb;

/**
 * Creates RGB color from CSS color string
 * @param specifier - CSS color string
 * @returns RGB color object
 */
function rgb(specifier: string): Rgb;

/**
 * Converts any color object to RGB
 * @param color - Color object to convert
 * @returns RGB color object (always new instance)
 */
function rgb(color: Color): Rgb;

import { rgb, hsl } from "d3-color";

// Direct numeric construction
const red = rgb(255, 0, 0);           // Opaque red
const redAlpha = rgb(255, 0, 0, 0.5); // Semi-transparent red

// String parsing (same as color() but always returns RGB)
const blue = rgb("#0000ff");
const green = rgb("hsl(120, 100%, 50%)");

// Color conversion
const hslGreen = hsl(120, 1, 0.5);
const rgbGreen = rgb(hslGreen); // Convert HSL to RGB

/**
 * Creates HSL color from numeric values
 * @param h - Hue angle in degrees (0-360)
 * @param s - Saturation (0-1)
 * @param l - Lightness (0-1)
 * @param opacity - Alpha channel (0-1), defaults to 1
 * @returns HSL color object
 */
function hsl(h: number, s: number, l: number, opacity?: number): Hsl;

/**
 * Creates HSL color from CSS color string
 * @param specifier - CSS color string
 * @returns HSL color object
 */
function hsl(specifier: string): Hsl;

/**
 * Converts any color object to HSL
 * @param color - Color object to convert
 * @returns HSL color object
 */
function hsl(color: Color): Hsl;

import { hsl, rgb } from "d3-color";

// Direct numeric construction
const red = hsl(0, 1, 0.5);          // Pure red
const darkBlue = hsl(240, 1, 0.25);  // Dark blue
const grayAlpha = hsl(0, 0, 0.5, 0.8); // Semi-transparent gray

// String parsing
const yellow = hsl("yellow");
const purple = hsl("#800080");

// Color conversion  
const rgbRed = rgb(255, 0, 0);
const hslRed = hsl(rgbRed); // Convert RGB to HSL

import { color, rgb, hsl } from "d3-color";

const redColor = color("#ff0000");
const rgbBlue = rgb(0, 0, 255);

// Check color space type using constructor comparison
if (redColor.constructor === rgbBlue.constructor) {
  console.log("Both are RGB colors");
}

// Check using instanceof (works with color instances)
const blueHsl = hsl(240, 1, 0.5);
const redRgb = rgb(255, 0, 0);
console.log(blueHsl.constructor.name); // "Hsl"
console.log(redRgb.constructor.name);  // "Rgb"