CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-d3-color

Color spaces! RGB, HSL, Cubehelix, Lab and HCL (Lch).

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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

docs

color-parsing.md

cubehelix-color-space.md

hsl-color-space.md

index.md

lab-color-space.md

lch-color-space.md

rgb-color-space.md

tile.json