Get and set individual color channel values across different color models with type-safe access patterns and immutable operations.
Control transparency across all color models.
/**
* 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;Usage Examples:
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()); // 0Access red, green, and blue color components (0-255 range).
/**
* 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;Usage Examples:
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)Access hue, saturation, and lightness components in HSL color space.
/**
* 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;Usage Examples:
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 lightnessAccess hue, saturation, and value components in HSV color space.
/**
* 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;Usage Examples:
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)Access whiteness and blackness components in HWB color space.
/**
* 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;Usage Examples:
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 redAccess cyan, magenta, yellow, and key (black) components for print colors.
/**
* 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;Usage Examples:
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 blackAccess CIE XYZ color space components for scientific color work.
/**
* 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;Access CIE LAB color space components for perceptually uniform color work.
/**
* 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;Access hue, chroma, and grayness components in HCG color space.
/**
* 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;All channel setters automatically clamp values to valid ranges:
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 1Channels can be accessed regardless of the color's current model:
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);
}