Skip to main content

​
Overview

ANSI color utilities provide terminal text formatting using escape codes. These are useful for creating colored output in CLI applications.

​
Constants

​
Text Styles

export const RESET: string;
export const BOLD: string;
export const DIM: string;
export const ITALIC: string;
export const UNDERLINE: string;

​
Standard Colors

export const RED: string;
export const GREEN: string;
export const YELLOW: string;
export const BLUE: string;
export const MAGENTA: string;
export const CYAN: string;
export const WHITE: string;

​
Bright Colors

export const BRIGHT_RED: string;
export const BRIGHT_GREEN: string;
export const BRIGHT_YELLOW: string;
export const BRIGHT_BLUE: string;
export const BRIGHT_MAGENTA: string;
export const BRIGHT_CYAN: string;

​
Helper Functions

​
red()

Format text in red. 
function red(s: string): string

import { red } from '@core/utils/colors';

console.log(red('Error: Something went wrong'));

​
green()

Format text in green. 
function green(s: string): string

import { green } from '@core/utils/colors';

console.log(green('Success: Operation completed'));

​
yellow()

Format text in yellow. 
function yellow(s: string): string

import { yellow } from '@core/utils/colors';

console.log(yellow('Warning: Check your input'));

​
blue()

Format text in blue. 
function blue(s: string): string

import { blue } from '@core/utils/colors';

console.log(blue('Info: Processing...'));

​
magenta()

Format text in magenta. 
function magenta(s: string): string

import { magenta } from '@core/utils/colors';

console.log(magenta('Debug: Variable value'));

​
cyan()

Format text in cyan. 
function cyan(s: string): string

import { cyan } from '@core/utils/colors';

console.log(cyan('Highlight: Important detail'));

​
bold()

Format text in bold. 
function bold(s: string): string

import { bold } from '@core/utils/colors';

console.log(bold('Important message'));

​
dim()

Format text as dimmed. 
function dim(s: string): string

import { dim } from '@core/utils/colors';

console.log(dim('Secondary information'));

​
Usage Examples

​
Basic Coloring

import { red, green, yellow, blue } from '@core/utils/colors';

console.log(red('Error: File not found'));
console.log(green('Success: File saved'));
console.log(yellow('Warning: Deprecated API'));
console.log(blue('Info: Loading...'));

​
Status Messages

import { green, red, yellow } from '@core/utils/colors';

function logStatus(level, message) {
  switch (level) {
    case 'success':
      console.log(green(`✓ ${message}`));
      break;
    case 'error':
      console.log(red(`✗ ${message}`));
      break;
    case 'warning':
      console.log(yellow(`⚠ ${message}`));
      break;
  }
}

logStatus('success', 'Build completed');
logStatus('error', 'Build failed');
logStatus('warning', 'Linting issues found');

​
Using Raw Constants

import { RED, GREEN, BOLD, RESET } from '@core/utils/colors';

// Manual formatting
console.log(`${RED}Error:${RESET} Something went wrong`);
console.log(`${BOLD}${GREEN}Success!${RESET}`);

// Combine styles
const errorMsg = `${BOLD}${RED}CRITICAL ERROR${RESET}`;
console.log(errorMsg);

​
Formatting Tables

import { bold, cyan, dim } from '@core/utils/colors';

function printTable(data) {
  console.log(bold('Name          Status      Time'));
  console.log(dim('─'.repeat(40)));
  
  data.forEach(row => {
    const status = row.ok ? '✓' : '✗';
    const color = row.ok ? 'green' : 'red';
    console.log(
      `${cyan(row.name.padEnd(14))} ` +
      `${row.ok ? green(status) : red(status)}           ` +
      `${dim(row.time)}`
    );
  });
}

printTable([
  { name: 'Build', ok: true, time: '2.3s' },
  { name: 'Test', ok: false, time: '0.8s' },
]);

​
Progress Indicators

import { blue, green, dim } from '@core/utils/colors';

function showProgress(current, total, label) {
  const percent = Math.round((current / total) * 100);
  const bar = '█'.repeat(current) + '░'.repeat(total - current);
  
  console.log(
    `${blue(label)} ${bar} ${green(percent + '%')} ${dim(`(${current}/${total})`)}`
  );
}

showProgress(7, 10, 'Installing');
// Installing ███████░░░ 70% (7/10)

​
Log Levels

import { red, yellow, blue, green, dim } from '@core/utils/colors';

class Logger {
  error(msg) { console.error(red(`[ERROR] ${msg}`)); }
  warn(msg) { console.warn(yellow(`[WARN]  ${msg}`)); }
  info(msg) { console.log(blue(`[INFO]  ${msg}`)); }
  success(msg) { console.log(green(`[OK]    ${msg}`)); }
  debug(msg) { console.log(dim(`[DEBUG] ${msg}`)); }
}

const log = new Logger();
log.error('Connection failed');
log.warn('Retrying...');
log.info('Connected to server');
log.success('Data synced');
log.debug('Cache hit: user_123');

​
Combining Styles

import { BOLD, RED, UNDERLINE, RESET } from '@core/utils/colors';

// Multiple styles
const critical = `${BOLD}${RED}${UNDERLINE}CRITICAL${RESET}`;
console.log(critical);

// Custom helper
function boldRed(text) {
  return `${BOLD}${RED}${text}${RESET}`;
}

console.log(boldRed('Important!'));

​
Color Reference

FunctionColorUse Case
red()RedErrors, failures
green()GreenSuccess, completed
yellow()YellowWarnings, cautions
blue()BlueInfo, processing
magenta()MagentaDebug, special
cyan()CyanHighlights, links
bold()BoldHeaders, emphasis
dim()DimmedSecondary info

​
Notes

  • All helper functions automatically append RESET to restore normal formatting
  • ANSI codes work in most modern terminals
  • Colors may not display in all environments (e.g., log files, some CI systems)
  • Use RESET constant to clear formatting when using raw constants

Build docs developers (and LLMs) love

Get started for freeTalk to us