Color spaces! RGB, HSL, Cubehelix, Lab and HCL (Lch).
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
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%)"