or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

color-analysis.mdcolor-construction.mdcolor-conversion.mdcolor-generation.mdcolor-operations.mdcolor-palettes.mdcolor-scales.mdindex.md
tile.json

tessl/npm-chroma-js

JavaScript library for color conversions and color scale generation with zero dependencies

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/chroma-js@3.1.x

To install, run

npx @tessl/cli install tessl/npm-chroma-js@3.1.0

index.mddocs/

Chroma.js

Chroma.js is a JavaScript library for color conversions and color scale generation with zero dependencies. It provides a comprehensive API for working with colors across multiple color spaces (RGB, HSL, Lab, Lch, HCG, CMYK, HSV, HSI, OKLab, OKLCH, etc.) with an intuitive chainable API for color manipulation operations.

Package Information

  • Package Name: chroma-js
  • Package Type: npm
  • Language: JavaScript (ES modules)
  • Installation: npm install chroma-js

Core Imports

import chroma from "chroma-js";
// Or specific imports
import { average, scale, contrast, Color } from "chroma-js";

For CommonJS:

const chroma = require("chroma-js");
// Or specific imports
const { average, scale, contrast, Color } = require("chroma-js");

For UMD (browser):

<script src="https://unpkg.com/chroma-js@3.1.2/index.umd.js"></script>
<!-- chroma is available as global variable -->

Basic Usage

import chroma from "chroma-js";

// Create colors from various formats
const color1 = chroma('#FF0000');
const color2 = chroma('red');
const color3 = chroma(255, 0, 0);
const color4 = chroma.hsl(0, 1, 0.5);

// Color manipulation
const darker = color1.darken(2);
const lighter = color1.brighten();
const mixed = chroma.mix('#FF0000', '#0000FF', 0.5);

// Color conversion
console.log(color1.hex());    // "#ff0000"
console.log(color1.rgb());    // [255, 0, 0, 1]
console.log(color1.hsl());    // [0, 1, 0.5, 1]

// Color scales
const scale = chroma.scale(['#fafa6e','#2A4858']).mode('lch').colors(6);
console.log(scale); // Array of 6 colors

Architecture

Chroma.js is built around several key components:

  • Color Class: Core color representation with automatic format detection
  • Color Constructors: Static methods for creating colors from specific formats
  • Color Operations: Instance methods for manipulating colors (darken, brighten, saturate, etc.)
  • Color Generators: Functions for creating new colors (mix, average, random, blend, etc.)
  • Color Scales: Advanced color scale generation with interpolation modes
  • Utility Functions: Color analysis, contrast calculation, and validation
  • Color Palettes: Built-in color collections (ColorBrewer, W3C named colors)

Capabilities

Color Construction

Core color construction from various input formats with automatic format detection and explicit format constructors.

// Main constructor with auto-detection
function chroma(...args: any[]): Color;

// Explicit format constructors
function chroma.rgb(r: number, g: number, b: number, a?: number): Color;
function chroma.hex(hex: string): Color;
function chroma.hsl(h: number, s: number, l: number): Color;
function chroma.hsv(h: number, s: number, v: number): Color;
function chroma.lab(l: number, a: number, b: number): Color;
function chroma.lch(l: number, c: number, h: number): Color;
function chroma.cmyk(c: number, m: number, y: number, k: number): Color;

Color Construction

Color Operations

Instance methods for manipulating colors including lightness, saturation, alpha, and color space transformations.

// Color manipulation methods (available on Color instances)
alpha(value?: number): Color | number;
darken(amount?: number): Color;
brighten(amount?: number): Color;
saturate(amount?: number): Color;
desaturate(amount?: number): Color;
luminance(value?: number): Color | number;
mix(color: Color, ratio?: number, mode?: string): Color;

Color Operations

Color Format Conversion

Methods for converting colors to various format representations including RGB, HSL, Lab, hex strings, CSS strings, and more.

// Color format conversion methods (available on Color instances)
rgb(): number[];
hex(): string;
css(): string;
hsl(): number[];
hsv(): number[];
lab(): number[];
lch(): number[];
cmyk(): number[];
gl(): number[];

Color Conversion

Color Generation

Functions for generating new colors through averaging, mixing, blending, and mathematical operations.

function average(colors: Color[], mode?: string, weights?: number[]): Color;
function mix(color1: Color, color2: Color, ratio?: number, mode?: string): Color;
function blend(bottom: Color, top: Color, mode: string): Color;
function random(): Color;
function bezier(colors: Color[]): (t: number) => Color;

Color Generation

Color Scales

Advanced color scale generation with domain mapping, interpolation modes, and class-based scaling for data visualization.

function scale(colors?: Color[] | string[]): Scale;

interface Scale {
  domain(values: number[]): Scale;
  range(colors: Color[] | string[]): Scale;
  mode(mode: string): Scale;
  classes(num: number | number[]): Scale;
  colors(count?: number): Color[] | string[];
  (value: number): Color;
}

Color Scales

Color Analysis

Utility functions for analyzing colors including contrast calculation, color difference measurement, and data analysis for scale creation.

function contrast(color1: Color, color2: Color): number;
function deltaE(color1: Color, color2: Color): number;
function distance(color1: Color, color2: Color, mode?: string): number;
function analyze(data: number[]): AnalysisResult;
function valid(...args: any[]): boolean;

Color Analysis

Color Palettes

Built-in color collections including ColorBrewer palettes and W3C named colors for data visualization and design applications.

// Color palette constants
const brewer: { [key: string]: string[][] };
const colors: { [key: string]: string };
const scales: { cool(): Color[]; hot(): Color[]; };

Color Palettes

Types

// Library version
const chroma.version: string;

class Color {
  constructor(...args: any[]);
  // Color manipulation methods
  alpha(value?: number): Color | number;
  darken(amount?: number): Color;
  brighten(amount?: number): Color;
  saturate(amount?: number): Color;
  desaturate(amount?: number): Color;
  luminance(value?: number): Color | number;
  mix(color: Color, ratio?: number, mode?: string): Color;
  // Color conversion methods  
  rgb(): number[];
  hex(): string;
  css(): string;
  hsl(): number[];
  hsv(): number[];
  lab(): number[];
  lch(): number[];
  // Utility methods
  get(channel: string): number;
  set(channel: string, value: number): Color;
  clipped(): boolean;
}

interface AnalysisResult {
  min: number;
  max: number;
  sum: number;
  count: number;
  domain: [number, number];
}