Standard RGB (Red, Green, Blue) color space operations providing web-compatible color manipulation with channel-level control and multiple output formats.
Standard RGB color representation with individual channel access.
class Rgb {
/** Red channel value (0-255, may be outside range before clamping) */
r: number;
/** Green channel value (0-255, may be outside range before clamping) */
g: number;
/** Blue channel value (0-255, may be outside range before clamping) */
b: number;
/** Opacity/alpha channel (0-1) */
opacity: number;
constructor(r: number, g: number, b: number, opacity: number);
}Adjust color brightness while preserving hue and saturation characteristics.
/**
* Returns a brighter copy of this color
* @param k - Brightening factor, defaults to 1/0.7 ≈ 1.43
* @returns New RGB color instance
*/
brighter(k?: number): Rgb;
/**
* Returns a darker copy of this color
* @param k - Darkening factor, defaults to 0.7
* @returns New RGB color instance
*/
darker(k?: number): Rgb;Usage Examples:
import { rgb } from "d3-color";
const blue = rgb(0, 0, 255);
// Default brightness adjustments
const lighterBlue = blue.brighter(); // ~1.43x brighter
const darkerBlue = blue.darker(); // 0.7x darker
// Custom brightness factors
const muchBrighter = blue.brighter(2); // 2x brighter
const slightlyDarker = blue.darker(0.9); // 0.9x darker
// Chain operations
const brightDarkBlue = blue.brighter(1.5).darker(0.8);Convert RGB colors to other color spaces and formats.
/**
* Returns RGB equivalent (identity operation for RGB colors)
* @returns This RGB color instance
*/
rgb(): Rgb;Validate and constrain color values to displayable ranges.
/**
* Clamps RGB channels to valid ranges [0, 255] and opacity to [0, 1]
* @returns New RGB color with clamped values
*/
clamp(): Rgb;
/**
* Checks if color is displayable on standard hardware
* @returns True if all channels are in valid ranges
*/
displayable(): boolean;Usage Examples:
import { rgb } from "d3-color";
// Create color with out-of-range values
const invalidRgb = rgb(300, -50, 128, 1.5);
// Check if displayable
console.log(invalidRgb.displayable()); // false
// Clamp to valid ranges
const validRgb = invalidRgb.clamp();
console.log(validRgb.r, validRgb.g, validRgb.b, validRgb.opacity);
// 255, 0, 128, 1
console.log(validRgb.displayable()); // trueConvert RGB colors to various string representations for CSS and display.
/**
* Returns 6-digit hexadecimal string representation
* @returns Hex string like "#ff0000"
*/
formatHex(): string;
/**
* Returns 8-digit hexadecimal string with alpha channel
* @returns Hex string like "#ff000080"
*/
formatHex8(): string;
/**
* Returns CSS rgb() or rgba() string representation
* @returns RGB string like "rgb(255, 0, 0)" or "rgba(255, 0, 0, 0.5)"
*/
formatRgb(): string;
/**
* Alias for formatRgb()
* @returns RGB string representation
*/
toString(): string;Usage Examples:
import { rgb } from "d3-color";
const red = rgb(255, 0, 0);
const redAlpha = rgb(255, 0, 0, 0.5);
// Hex formats
console.log(red.formatHex()); // "#ff0000"
console.log(red.formatHex8()); // "#ff0000ff"
console.log(redAlpha.formatHex8()); // "#ff000080"
// RGB formats
console.log(red.formatRgb()); // "rgb(255, 0, 0)"
console.log(redAlpha.formatRgb()); // "rgba(255, 0, 0, 0.5)"
// toString() alias
console.log(red.toString()); // "rgb(255, 0, 0)"
console.log(String(red)); // "rgb(255, 0, 0)"Create modified copies of existing colors.
/**
* Creates a copy of this color with optional property overrides
* @param values - Object with properties to override
* @returns New RGB color instance
*/
copy(values?: {r?: number, g?: number, b?: number, opacity?: number}): Rgb;Usage Examples:
import { rgb } from "d3-color";
const blue = rgb(0, 0, 255);
// Create variations
const lightBlue = blue.copy({r: 100, g: 150}); // rgb(100, 150, 255)
const semiTransparent = blue.copy({opacity: 0.5}); // rgba(0, 0, 255, 0.5)
const purple = blue.copy({r: 128}); // rgb(128, 0, 255)
// Original unchanged
console.log(blue.r, blue.g, blue.b); // 0, 0, 255RGB colors inherit all base Color formatting methods.
/**
* Returns HSL string representation
* @returns HSL string like "hsl(240, 100%, 50%)"
*/
formatHsl(): string;Usage Examples:
import { rgb } from "d3-color";
const red = rgb(255, 0, 0);
// All format options available
console.log(red.formatHex()); // "#ff0000"
console.log(red.formatRgb()); // "rgb(255, 0, 0)"
console.log(red.formatHsl()); // "hsl(0, 100%, 50%)"