or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-colors.mdbackground-colors.mdbasic-colors.mdcolor-support.mdconfiguration.mdindex.mdtext-styling.md
tile.json

advanced-colors.mddocs/

Advanced Colors

RGB, HEX, and 256-color support for terminals that support advanced color modes. These methods provide access to millions of colors beyond the basic 16-color palette.

Capabilities

RGB Colors

Specify colors using RGB (Red, Green, Blue) values from 0-255 for precise color control.

/**
 * Use RGB values to set text color
 * @param red - Red component (0-255)
 * @param green - Green component (0-255)  
 * @param blue - Blue component (0-255)
 * @returns ChalkInstance for method chaining
 */
rgb(red: number, green: number, blue: number): ChalkInstance;

/**
 * Use RGB values to set background color
 * @param red - Red component (0-255)
 * @param green - Green component (0-255)
 * @param blue - Blue component (0-255)
 * @returns ChalkInstance for method chaining
 */
bgRgb(red: number, green: number, blue: number): ChalkInstance;

Usage Examples:

import chalk from 'chalk';

// RGB foreground colors
console.log(chalk.rgb(255, 0, 0)('Pure red text'));
console.log(chalk.rgb(0, 255, 0)('Pure green text'));
console.log(chalk.rgb(0, 0, 255)('Pure blue text'));
console.log(chalk.rgb(255, 165, 0)('Orange text'));
console.log(chalk.rgb(128, 0, 128)('Purple text'));

// RGB background colors
console.log(chalk.white.bgRgb(255, 0, 0)('White text on red background'));
console.log(chalk.black.bgRgb(0, 255, 0)('Black text on green background'));
console.log(chalk.white.bgRgb(0, 0, 255)('White text on blue background'));

// Combined RGB foreground and background
console.log(chalk.rgb(255, 255, 0).bgRgb(128, 0, 128)('Yellow text on purple background'));

HEX Colors

Specify colors using hexadecimal color codes (web color format) for familiar color specification.

/**
 * Use HEX value to set text color
 * @param color - Hexadecimal color value (with or without #)
 * @returns ChalkInstance for method chaining
 */
hex(color: string): ChalkInstance;

/**
 * Use HEX value to set background color
 * @param color - Hexadecimal color value (with or without #)
 * @returns ChalkInstance for method chaining
 */
bgHex(color: string): ChalkInstance;

Usage Examples:

import chalk from 'chalk';

// HEX foreground colors
console.log(chalk.hex('#FF0000')('Red text using hex'));
console.log(chalk.hex('#00FF00')('Green text using hex'));
console.log(chalk.hex('#0000FF')('Blue text using hex'));
console.log(chalk.hex('#FFA500')('Orange text using hex'));
console.log(chalk.hex('#800080')('Purple text using hex'));

// HEX without # prefix also works
console.log(chalk.hex('DEADED')('Hex without # prefix'));
console.log(chalk.hex('CAFE00')('Another hex color'));

// Short hex format (3 digits expanded to 6)
console.log(chalk.hex('#F00')('Short hex red (becomes #FF0000)'));
console.log(chalk.hex('#0F0')('Short hex green (becomes #00FF00)'));

// HEX background colors
console.log(chalk.white.bgHex('#FF0000')('White text on red hex background'));
console.log(chalk.black.bgHex('#00FF00')('Black text on green hex background'));
console.log(chalk.white.bgHex('#800080')('White text on purple hex background'));

// Combined HEX colors
console.log(chalk.hex('#FFFF00').bgHex('#800080')('Yellow hex text on purple hex background'));

ANSI 256 Colors

Use the 256-color ANSI palette for precise color selection with consistent terminal support.

/**
 * Use an 8-bit unsigned number to set text color
 * @param index - Color index (0-255) in the ANSI 256-color palette
 * @returns ChalkInstance for method chaining
 */
ansi256(index: number): ChalkInstance;

/**
 * Use an 8-bit unsigned number to set background color
 * @param index - Color index (0-255) in the ANSI 256-color palette
 * @returns ChalkInstance for method chaining
 */
bgAnsi256(index: number): ChalkInstance;

Usage Examples:

import chalk from 'chalk';

// ANSI 256 foreground colors
console.log(chalk.ansi256(196)('Bright red (index 196)'));
console.log(chalk.ansi256(46)('Bright green (index 46)'));
console.log(chalk.ansi256(21)('Bright blue (index 21)'));
console.log(chalk.ansi256(208)('Orange (index 208)'));
console.log(chalk.ansi256(129)('Purple (index 129)'));

// Grayscale colors (indices 232-255)
console.log(chalk.ansi256(232)('Darkest gray'));
console.log(chalk.ansi256(244)('Medium gray'));
console.log(chalk.ansi256(255)('Lightest gray'));

// ANSI 256 background colors
console.log(chalk.white.bgAnsi256(196)('White text on bright red background'));
console.log(chalk.black.bgAnsi256(46)('Black text on bright green background'));
console.log(chalk.white.bgAnsi256(21)('White text on bright blue background'));

// Combined ANSI 256 colors
console.log(chalk.ansi256(226).bgAnsi256(129)('Yellow text on purple background'));

Color Downsampling

Chalk automatically downsample colors based on terminal capabilities:

import chalk from 'chalk';

// These colors will be automatically downsampled based on terminal support:
console.log(chalk.rgb(255, 128, 64)('Orange RGB'));    // Full RGB on Truecolor terminals
console.log(chalk.hex('#FF8040')('Orange HEX'));       // Downsampled on basic terminals
console.log(chalk.ansi256(208)('Orange ANSI256'));     // Supported on 256-color terminals

// Color level examples:
// Level 0: All colors disabled
// Level 1: Downsampled to basic 16 colors  
// Level 2: Downsampled to 256-color palette
// Level 3: Full RGB/Truecolor support

Practical Advanced Color Usage

Common patterns for using advanced colors in applications:

import chalk from 'chalk';

// Brand colors using HEX
const brandColors = {
  primary: chalk.hex('#007ACC'),    // VS Code blue
  secondary: chalk.hex('#FF6B35'),  // Orange accent
  success: chalk.hex('#28A745'),    // Bootstrap success green
  warning: chalk.hex('#FFC107'),    // Bootstrap warning yellow
  danger: chalk.hex('#DC3545')      // Bootstrap danger red
};

console.log(brandColors.primary('Primary brand color'));
console.log(brandColors.secondary('Secondary accent color'));
console.log(brandColors.success('Success message'));
console.log(brandColors.warning('Warning message'));
console.log(brandColors.danger('Danger message'));

// Gradient-like effects using RGB
function createGradientText(text, startRgb, endRgb) {
  const chars = text.split('');
  const steps = chars.length - 1;
  
  return chars.map((char, i) => {
    if (steps === 0) return chalk.rgb(...startRgb)(char);
    
    const ratio = i / steps;
    const r = Math.round(startRgb[0] + (endRgb[0] - startRgb[0]) * ratio);
    const g = Math.round(startRgb[1] + (endRgb[1] - startRgb[1]) * ratio);
    const b = Math.round(startRgb[2] + (endRgb[2] - startRgb[2]) * ratio);
    
    return chalk.rgb(r, g, b)(char);
  }).join('');
}

console.log(createGradientText('GRADIENT', [255, 0, 0], [0, 0, 255])); // Red to blue

// Temperature-based colors using RGB
function getTemperatureColor(temp) {
  if (temp < 0) return chalk.rgb(0, 191, 255);      // Deep sky blue
  if (temp < 10) return chalk.rgb(135, 206, 250);   // Light sky blue  
  if (temp < 20) return chalk.rgb(0, 255, 0);       // Green
  if (temp < 30) return chalk.rgb(255, 255, 0);     // Yellow
  if (temp < 40) return chalk.rgb(255, 165, 0);     // Orange
  return chalk.rgb(255, 0, 0);                      // Red
}

const temperatures = [-5, 5, 15, 25, 35, 45];
temperatures.forEach(temp => {
  console.log(getTemperatureColor(temp)(`${temp}°C`));
});

// Semantic colors using ANSI 256 palette
const semanticColors = {
  trace: chalk.ansi256(8),      // Dark gray
  debug: chalk.ansi256(244),    // Light gray
  info: chalk.ansi256(39),      // Bright blue
  warn: chalk.ansi256(214),     // Orange
  error: chalk.ansi256(196),    // Bright red
  fatal: chalk.ansi256(15).bgAnsi256(196)  // White on red
};

console.log(semanticColors.trace('[TRACE] Detailed debugging info'));
console.log(semanticColors.debug('[DEBUG] Debug information'));
console.log(semanticColors.info('[INFO] General information'));
console.log(semanticColors.warn('[WARN] Warning message'));
console.log(semanticColors.error('[ERROR] Error occurred'));
console.log(semanticColors.fatal('[FATAL] Critical error'));

Color Conversion Utilities

While not directly exposed, Chalk includes internal color conversion utilities for RGB/HEX/ANSI256 interoperability that handle the automatic downsampling between color formats based on terminal capabilities.