Channel Access

/**
 * Get current alpha value
 * @returns Alpha value between 0 (transparent) and 1 (opaque)
 */
alpha(): number;

/**
 * Set alpha value (immutable)
 * @param value - Alpha value between 0 and 1
 * @returns New ColorInstance with specified alpha
 */
alpha(value: number): ColorInstance;

import Color from "color";

const color = Color('#FF0000');

// Get alpha value
console.log(color.alpha()); // 1 (fully opaque)

// Set alpha value
const semiTransparent = color.alpha(0.5);
console.log(semiTransparent.alpha()); // 0.5

// Alpha is clamped to 0-1 range
const clamped = color.alpha(1.5);
console.log(clamped.alpha()); // 1

const negClamped = color.alpha(-0.5);
console.log(negClamped.alpha()); // 0

/**
 * Get red channel value
 * @returns Red component (0-255)
 */
red(): number;

/**
 * Set red channel value (immutable)
 * @param value - Red component (0-255)
 * @returns New ColorInstance with specified red value
 */
red(value: number): ColorInstance;

/**
 * Get green channel value
 * @returns Green component (0-255)  
 */
green(): number;

/**
 * Set green channel value (immutable)
 * @param value - Green component (0-255)
 * @returns New ColorInstance with specified green value
 */
green(value: number): ColorInstance;

/**
 * Get blue channel value
 * @returns Blue component (0-255)
 */
blue(): number;

/**
 * Set blue channel value (immutable)
 * @param value - Blue component (0-255)
 * @returns New ColorInstance with specified blue value
 */
blue(value: number): ColorInstance;

const color = Color('#FF8040'); // Orange

// Get RGB channel values
console.log(color.red());   // 255
console.log(color.green()); // 128
console.log(color.blue());  // 64

// Set individual channels
const redder = color.red(200);       // Reduce red component
const greener = color.green(200);    // Increase green component
const bluer = color.blue(200);       // Increase blue component

// Chain channel modifications
const modified = color
  .red(100)
  .green(150)
  .blue(200);

console.log(modified.hex()); // '#6496C8'

// Build colors channel by channel
const custom = Color('black')
  .red(255)
  .green(165)
  .blue(0);
console.log(custom.hex()); // '#FFA500' (orange)

/**
 * Get hue value
 * @returns Hue in degrees (0-360)
 */
hue(): number;

/**
 * Set hue value (immutable)
 * @param value - Hue in degrees (0-360, wraps around)
 * @returns New ColorInstance with specified hue
 */
hue(value: number): ColorInstance;

/**
 * Get HSL saturation value
 * @returns HSL saturation percentage (0-100)
 */
saturationl(): number;

/**
 * Set HSL saturation value (immutable)
 * @param value - HSL saturation percentage (0-100)
 * @returns New ColorInstance with specified HSL saturation
 */
saturationl(value: number): ColorInstance;

/**
 * Get lightness value
 * @returns Lightness percentage (0-100)
 */
lightness(): number;

/**
 * Set lightness value (immutable)
 * @param value - Lightness percentage (0-100)
 * @returns New ColorInstance with specified lightness
 */
lightness(value: number): ColorInstance;

const color = Color('#FF8040');

// Get HSL values
console.log(color.hue());         // ~20 (orange hue)
console.log(color.saturationl()); // 100 (fully saturated)
console.log(color.lightness());   // ~62 (medium lightness)

// Modify HSL channels
const complementary = color.hue(200);      // Blue-green hue
const desaturated = color.saturationl(50); // Half saturation
const darker = color.lightness(30);        // Much darker

// Create color variations
const hueRotations = [0, 60, 120, 180, 240, 300].map(h => 
  color.hue(h)
);

// Precise color adjustments
const preciseColor = Color('red')
  .hue(25)           // Slightly orange
  .saturationl(80)   // Slightly desaturated
  .lightness(60);    // Medium lightness

/**
 * Get HSV saturation value
 * @returns HSV saturation percentage (0-100)
 */
saturationv(): number;

/**
 * Set HSV saturation value (immutable) 
 * @param value - HSV saturation percentage (0-100)
 * @returns New ColorInstance with specified HSV saturation
 */
saturationv(value: number): ColorInstance;

/**
 * Get value (brightness) component
 * @returns Value/brightness percentage (0-100)
 */
value(): number;

/**
 * Set value (brightness) component (immutable)
 * @param value - Value/brightness percentage (0-100)
 * @returns New ColorInstance with specified value
 */
value(value: number): ColorInstance;

const color = Color('#FF8040');

// Get HSV values (hue shared with HSL)
console.log(color.hue());         // ~20
console.log(color.saturationv()); // ~75 (HSV saturation)
console.log(color.value());       // 100 (full brightness)

// Modify HSV-specific channels
const lessVibrant = color.saturationv(50);
const dimmer = color.value(70);

// HSV vs HSL saturation comparison
console.log(color.saturationl()); // HSL saturation
console.log(color.saturationv()); // HSV saturation (different value)

/**
 * Get whiteness value
 * @returns Whiteness percentage (0-100)
 */
white(): number;

/**
 * Set whiteness value (immutable)
 * @param value - Whiteness percentage (0-100)
 * @returns New ColorInstance with specified whiteness
 */
white(value: number): ColorInstance;

/**
 * Get blackness value
 * @returns Blackness percentage (0-100)
 */
wblack(): number;

/**
 * Set blackness value (immutable)
 * @param value - Blackness percentage (0-100)
 * @returns New ColorInstance with specified blackness
 */
wblack(value: number): ColorInstance;

const pureRed = Color('#FF0000');

// Get HWB values
console.log(pureRed.hue());    // 0 (red hue)
console.log(pureRed.white());  // 0 (no whiteness)
console.log(pureRed.wblack()); // 0 (no blackness)

// Add whiteness (tint)
const tintedRed = pureRed.white(30);
console.log(tintedRed.hex()); // Pinker red

// Add blackness (shade)  
const shadedRed = pureRed.wblack(30);
console.log(shadedRed.hex()); // Darker red

/**
 * Get cyan value
 * @returns Cyan percentage (0-100)
 */
cyan(): number;

/**
 * Set cyan value (immutable)
 * @param value - Cyan percentage (0-100)
 * @returns New ColorInstance with specified cyan
 */
cyan(value: number): ColorInstance;

/**
 * Get magenta value
 * @returns Magenta percentage (0-100)
 */
magenta(): number;

/**
 * Set magenta value (immutable)
 * @param value - Magenta percentage (0-100)
 * @returns New ColorInstance with specified magenta
 */
magenta(value: number): ColorInstance;

/**
 * Get yellow value
 * @returns Yellow percentage (0-100)
 */
yellow(): number;

/**
 * Set yellow value (immutable)
 * @param value - Yellow percentage (0-100)
 * @returns New ColorInstance with specified yellow
 */
yellow(value: number): ColorInstance;

/**
 * Get black (key) value
 * @returns Black/key percentage (0-100)
 */
black(): number;

/**
 * Set black (key) value (immutable)
 * @param value - Black/key percentage (0-100)
 * @returns New ColorInstance with specified black
 */
black(value: number): ColorInstance;

const color = Color('#FF8040');

// Get CMYK values
console.log(color.cyan());    // 0
console.log(color.magenta()); // ~50
console.log(color.yellow());  // ~75
console.log(color.black());   // 0

// Modify CMYK channels
const moreCyan = color.cyan(20);
const lessYellow = color.yellow(50);
const addBlack = color.black(10);

// Print color adjustments
const printOptimized = color
  .cyan(5)     // Slight cyan adjustment
  .black(5);   // Add rich black

/**
 * Get X component
 * @returns X value (typically 0-95.047)
 */
x(): number;

/**
 * Set X component (immutable)
 * @param value - X value
 * @returns New ColorInstance with specified X
 */
x(value: number): ColorInstance;

/**
 * Get Y component
 * @returns Y value (typically 0-100)
 */
y(): number;

/**
 * Set Y component (immutable)
 * @param value - Y value
 * @returns New ColorInstance with specified Y
 */
y(value: number): ColorInstance;

/**
 * Get Z component
 * @returns Z value (typically 0-108.833)
 */
z(): number;

/**
 * Set Z component (immutable)
 * @param value - Z value
 * @returns New ColorInstance with specified Z
 */  
z(value: number): ColorInstance;

/**
 * Get L* (lightness) component
 * @returns L* value (0-100)
 */
l(): number;

/**
 * Set L* (lightness) component (immutable)
 * @param value - L* value (0-100)
 * @returns New ColorInstance with specified L*
 */
l(value: number): ColorInstance;

/**
 * Get a* (green-red) component
 * @returns a* value (typically -128 to 127)
 */
a(): number;

/**
 * Set a* (green-red) component (immutable)
 * @param value - a* value
 * @returns New ColorInstance with specified a*
 */
a(value: number): ColorInstance;

/**
 * Get b* (blue-yellow) component
 * @returns b* value (typically -128 to 127)
 */
b(): number;

/**
 * Set b* (blue-yellow) component (immutable)
 * @param value - b* value
 * @returns New ColorInstance with specified b*
 */
b(value: number): ColorInstance;

/**
 * Get chroma value
 * @returns Chroma percentage (0-100)
 */
chroma(): number;

/**
 * Set chroma value (immutable)
 * @param value - Chroma percentage (0-100)
 * @returns New ColorInstance with specified chroma
 */
chroma(value: number): ColorInstance;

/**
 * Get gray value  
 * @returns Gray percentage (0-100)
 */
gray(): number;

/**
 * Set gray value (immutable)
 * @param value - Gray percentage (0-100)
 * @returns New ColorInstance with specified gray
 */
gray(value: number): ColorInstance;

const color = Color('#FF0000');

// RGB channels clamped to 0-255
const clampedRed = color.red(300);    // Clamped to 255
const clampedGreen = color.green(-50); // Clamped to 0

// HSL hue wraps around 0-360
const wrappedHue = color.hue(450);     // Becomes 90°
const negativeHue = color.hue(-30);    // Becomes 330°

// Percentage values clamped to 0-100
const clampedSat = color.saturationl(150); // Clamped to 100
const clampedLight = color.lightness(-20); // Clamped to 0

// Alpha always clamped to 0-1
const clampedAlpha = color.alpha(2.5);     // Clamped to 1

const hslColor = Color.hsl(240, 100, 50); // Blue in HSL

// Access RGB channels from HSL color
console.log(hslColor.red());   // 0
console.log(hslColor.green()); // 0  
console.log(hslColor.blue());  // 255

// Access CMYK channels from HSL color
console.log(hslColor.cyan());    // 100
console.log(hslColor.magenta()); // 100
console.log(hslColor.yellow());  // 0
console.log(hslColor.black());   // 0

// Modify RGB channels of HSL color
const modifiedHsl = hslColor.red(128);
// Result is still in HSL model but with modified RGB

// Color component analysis
function analyzeColor(color) {
  return {
    rgb: {
      r: color.red(),
      g: color.green(),
      b: color.blue(),
      alpha: color.alpha()
    },
    hsl: {
      h: color.hue(),
      s: color.saturationl(),
      l: color.lightness()
    },
    cmyk: {
      c: color.cyan(),
      m: color.magenta(),
      y: color.yellow(),
      k: color.black()
    }
  };
}

// Build color from individual channels
function buildColorFromChannels(r, g, b, alpha = 1) {
  return Color('black')
    .red(r)
    .green(g)  
    .blue(b)
    .alpha(alpha);
}

// Channel-based color mixing
function mixChannels(color1, color2, ratio = 0.5) {
  const r = color1.red() * (1 - ratio) + color2.red() * ratio;
  const g = color1.green() * (1 - ratio) + color2.green() * ratio;
  const b = color1.blue() * (1 - ratio) + color2.blue() * ratio;
  const a = color1.alpha() * (1 - ratio) + color2.alpha() * ratio;
  
  return Color('black').red(r).green(g).blue(b).alpha(a);
}