or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

color-parsing.mdcubehelix-color-space.mdhsl-color-space.mdindex.mdlab-color-space.mdlch-color-space.mdrgb-color-space.md
tile.json

rgb-color-space.mddocs/

RGB Color Space

Standard RGB (Red, Green, Blue) color space operations providing web-compatible color manipulation with channel-level control and multiple output formats.

Capabilities

RGB Color Class

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);
}

Brightness Manipulation

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);

Color Space Conversion

Convert RGB colors to other color spaces and formats.

/**
 * Returns RGB equivalent (identity operation for RGB colors)
 * @returns This RGB color instance
 */
rgb(): Rgb;

Range Validation and Clamping

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()); // true

String Formatting

Convert 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)"

Color Copying

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, 255

Cross-Format Output

RGB 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%)"