1.4 Colors & Styles

In the previous lesson you learned that colors are ANSI escape sequences. In this lesson you will use chalk to apply them without memorizing codes — and understand exactly what chalk does under the hood.

What chalk Does

chalk is a thin wrapper. When you write:

chalk.green('Hello')

It returns the string:

\x1b[32mHello\x1b[39m

That is it. \x1b[32m is “set foreground to green”, \x1b[39m is “reset foreground to default”. chalk just generates escape sequences and wraps your text in them.

This means chalk output is perfectly safe to pass to process.stdout.write — it’s just a string.

Basic Styles

import chalk from 'chalk';

// Text styles
chalk.bold('Bold text')
chalk.italic('Italic text')
chalk.underline('Underlined')
chalk.strikethrough('Struck through')
chalk.dim('Dimmed / muted')
chalk.inverse('Inverted fg/bg')

// Named colors (foreground)
chalk.black('Black')
chalk.red('Red')
chalk.green('Green')
chalk.yellow('Yellow')
chalk.blue('Blue')
chalk.magenta('Magenta')
chalk.cyan('Cyan')
chalk.white('White')
chalk.gray('Gray')          // alias: chalk.grey

// Bright variants
chalk.redBright('Bright red')
chalk.greenBright('Bright green')
// ...etc for all colors

// Background colors
chalk.bgRed('Red background')
chalk.bgGreen('Green background')
chalk.bgBlue.white('White text on blue background')

Chaining

Styles chain:

chalk.bold.green('Bold green')
chalk.bgBlue.white.bold('Bold white on blue')
chalk.red.underline.italic('Everything at once')

The order of chaining does not matter — chalk.bold.green equals chalk.green.bold.

Hex Colors (True Color)

chalk.hex('#ff6b35')('Custom orange')
chalk.bgHex('#1e1e2e')('Catppuccin background')

// RGB
chalk.rgb(255, 107, 53)('Orange via RGB')
chalk.bgRgb(30, 30, 46)('Dark background via RGB')

256-Color Palette

chalk.ansi256(214)('Color index 214')
chalk.bgAnsi256(17)('Background color index 17')

Template Literals (Tagged Templates)

chalk supports a tagged template syntax:

console.log(chalk`{bold.green Hello} {blue World}!`);

This is useful for building multi-style strings inline.

Nesting

Nesting works correctly — inner styles reset to outer styles, not to defaults:

chalk.red(`Error: ${chalk.bold('file not found')} in path`)
// "Error: " is red, "file not found" is bold+red, " in path" is red again

Under the hood chalk tracks the “stack” of active styles and resets to the right state at each boundary.

Building a Theme

For a real TUI you will want a consistent color palette. Define it once:

theme.ts

import chalk from 'chalk';

export const theme = {
  // Text roles
  title:    chalk.bold.hex('#cdd6f4'),     // white-ish
  label:    chalk.hex('#89b4fa'),           // blue
  value:    chalk.hex('#a6e3a1'),           // green
  muted:    chalk.hex('#6c7086'),           // gray
  error:    chalk.bold.hex('#f38ba8'),      // red
  warn:     chalk.hex('#fab387'),           // peach/orange
  success:  chalk.hex('#a6e3a1'),           // green

  // UI chrome
  border:   chalk.hex('#313244'),           // subtle dark
  selected: chalk.bgHex('#313244').hex('#cdd6f4'), // highlight row

  // Backgrounds
  bgBase:   chalk.bgHex('#1e1e2e'),
  bgSurface: chalk.bgHex('#313244'),
};

Usage:

process.stdout.write(theme.title('Task Manager\n'));
process.stdout.write(theme.muted('Press q to quit\n'));

This is the palette used for the Task Manager project in Module 3.

A Note on Color Detection

chalk automatically detects whether the terminal supports colors and falls back gracefully. If you redirect stdout to a file, chalk disables colors (so log files are not full of escape sequences). You can override this:

import { Chalk } from 'chalk';
const chalk = new Chalk({ level: 3 }); // force true color

level values:

• 0 — no color
• 1 — 16 colors
• 2 — 256 colors
• 3 — true color (16 million)

Example File

Run this to see all styles in your terminal:

examples/module-1/04-colors.ts

import chalk from 'chalk';

const styles = [
  ['bold',          chalk.bold('Bold')],
  ['italic',        chalk.italic('Italic')],
  ['underline',     chalk.underline('Underline')],
  ['dim',           chalk.dim('Dim')],
  ['red',           chalk.red('Red')],
  ['green',         chalk.green('Green')],
  ['blue',          chalk.blue('Blue')],
  ['yellow',        chalk.yellow('Yellow')],
  ['cyan',          chalk.cyan('Cyan')],
  ['magenta',       chalk.magenta('Magenta')],
  ['bold+green',    chalk.bold.green('Bold Green')],
  ['bgBlue+white',  chalk.bgBlue.white(' White on Blue ')],
  ['hex orange',    chalk.hex('#ff6b35')('Hex Orange')],
  ['rgb',           chalk.rgb(100, 200, 255)('RGB Sky Blue')],
];

for (const [name, rendered] of styles) {
  process.stdout.write(`  ${name.padEnd(18)} ${rendered}\n`);
}

cd examples && npx tsx module-1/04-colors.ts

In the next lesson you combine everything from Module 1 into your first full TUI program.