Complete API documentation for @visulima/colorize including all colors, styles, and methods.

API Reference

Complete API documentation for @visulima/colorize.

Imports

Main Package

// Default import
import colorize from "@visulima/colorize";

// Named imports
import { red, green, blue, bold, hex, rgb } from "@visulima/colorize";

Browser

import colorize from "@visulima/colorize/browser";
import { red, green, blue } from "@visulima/colorize/browser";

Template

import template from "@visulima/colorize/template";

Gradient

import { gradient, multilineGradient } from "@visulima/colorize/gradient";

Utils

import { strip } from "@visulima/colorize/utils";

Colors

Base Colors (Foreground)

Standard ANSI 16 colors for text:

Function	Description	Example
`black`	Black text	`black\`text``
`red`	Red text	`red\`text``
`green`	Green text	`green\`text``
`yellow`	Yellow text	`yellow\`text``
`blue`	Blue text	`blue\`text``
`magenta`	Magenta text	`magenta\`text``
`cyan`	Cyan text	`cyan\`text``
`white`	White text	`white\`text``
`gray` / `grey`	Gray text (aliases)	`gray\`text``

Bright Colors (Foreground)

Brighter variants of base colors:

Function	Description	Example
`blackBright`	Bright black text	`blackBright\`text``
`redBright`	Bright red text	`redBright\`text``
`greenBright`	Bright green text	`greenBright\`text``
`yellowBright`	Bright yellow text	`yellowBright\`text``
`blueBright`	Bright blue text	`blueBright\`text``
`magentaBright`	Bright magenta text	`magentaBright\`text``
`cyanBright`	Bright cyan text	`cyanBright\`text``
`whiteBright`	Bright white text	`whiteBright\`text``

Background Colors

Background colors using bg prefix:

Function	Description	Example
`bgBlack`	Black background	`bgBlack\`text``
`bgRed`	Red background	`bgRed\`text``
`bgGreen`	Green background	`bgGreen\`text``
`bgYellow`	Yellow background	`bgYellow\`text``
`bgBlue`	Blue background	`bgBlue\`text``
`bgMagenta`	Magenta background	`bgMagenta\`text``
`bgCyan`	Cyan background	`bgCyan\`text``
`bgWhite`	White background	`bgWhite\`text``
`bgGray` / `bgGrey`	Gray background	`bgGray\`text``

Bright Background Colors

Function	Description	Example
`bgBlackBright`	Bright black background	`bgBlackBright\`text``
`bgRedBright`	Bright red background	`bgRedBright\`text``
`bgGreenBright`	Bright green background	`bgGreenBright\`text``
`bgYellowBright`	Bright yellow background	`bgYellowBright\`text``
`bgBlueBright`	Bright blue background	`bgBlueBright\`text``
`bgMagentaBright`	Bright magenta background	`bgMagentaBright\`text``
`bgCyanBright`	Bright cyan background	`bgCyanBright\`text``
`bgWhiteBright`	Bright white background	`bgWhiteBright\`text``

Styles

Text Modifiers

Function	Description	Example
`bold`	Bold/bright text	`bold\`text``
`dim`	Dimmed/faint text	`dim\`text``
`italic`	Italic text	`italic\`text``
`underline`	Underlined text	`underline\`text``
`strikethrough`	Strikethrough text (alias: `strike`)	`strikethrough\`text``
`inverse`	Inverted colors	`inverse\`text``
`hidden`	Hidden text (invisible)	`hidden\`text``
`visible`	Always visible (no-op for always-on)	`visible\`text``
`reset`	Reset all styles	`reset\`text``

Extended Colors

ANSI 256 Colors

Access the 256-color palette (0-255):

`ansi256(code: number)`

Apply a 256-color foreground. Alias: fg()

Parameters:

code (number): Color code from 0 to 255

Returns: Chainable style function

Example:

import { ansi256, fg } from "@visulima/colorize";

console.log(ansi256(196)`Bright red`); // Color code 196
console.log(fg(21)`Deep blue`); // Alias usage
console.log(ansi256(226).bold`Bold yellow`); // Chainable

`bgAnsi256(code: number)`

Apply a 256-color background. Alias: bg()

Parameters:

code (number): Color code from 0 to 255

Returns: Chainable style function

Example:

import { bgAnsi256, bg, white } from "@visulima/colorize";

console.log(white.bgAnsi256(196)`White on red`);
console.log(white.bg(21)`White on blue`); // Alias usage

TrueColor (16M Colors)

`hex(color: string)`

Apply a hex color to text foreground.

Parameters:

color (string): Hex color code (e.g., "#FF0000", "#F00")

Returns: Chainable style function

Example:

import { hex } from "@visulima/colorize";

console.log(hex("#FF6B6B")`Coral red`);
console.log(hex("#F00")`Red`); // Short notation
console.log(hex("#4ECDC4").bold`Bold turquoise`);

`bgHex(color: string)`

Apply a hex color to text background.

Parameters:

color (string): Hex color code

Returns: Chainable style function

Example:

import { bgHex, white } from "@visulima/colorize";

console.log(white.bgHex("#FF6B6B")`White on coral`);
console.log(bgHex("#4ECDC4")`Turquoise background`);

`rgb(red: number, green: number, blue: number)`

Apply an RGB color to text foreground.

Parameters:

red (number): Red value (0-255)
green (number): Green value (0-255)
blue (number): Blue value (0-255)

Returns: Chainable style function

Example:

import { rgb } from "@visulima/colorize";

console.log(rgb(255, 107, 107)`Coral red`);
console.log(rgb(78, 205, 196).bold`Bold turquoise`);

`bgRgb(red: number, green: number, blue: number)`

Apply an RGB color to text background.

Parameters:

red (number): Red value (0-255)
green (number): Green value (0-255)
blue (number): Blue value (0-255)

Returns: Chainable style function

Example:

import { bgRgb, white } from "@visulima/colorize";

console.log(white.bgRgb(255, 107, 107)`White on coral`);

Utility Functions

`strip(text: string): string`

Remove all ANSI escape codes from a string.

Parameters:

text (string): String containing ANSI codes

Returns: Plain string without ANSI codes

Example:

import colorize from "@visulima/colorize";
// or
import { strip } from "@visulima/colorize/utils";

const colored = colorize.red.bold`Error`;
const plain = colorize.strip(colored);

console.log(colored); // Colored output
console.log(plain); // "Error" (plain text)

Template Functions

`template(strings, ...values): string`

Tagged template literal for complex string interpolation with colors.

Usage:

import template from "@visulima/colorize/template";

const cpu = 65;
console.log(template`CPU: {red ${cpu}%}`);

// Chained styles
console.log(template`Status: {green.bold Success}`);

// RGB/Hex colors
console.log(template`{rgb(255,0,0) Red text}`);
console.log(template`{#FF0000 Red text}`);

// Background with shorthand
console.log(template`{#FF0000:00FF00 Red on green}`);

Gradient Functions

`gradient(...colors: string[])`

Create a color gradient for text.

Parameters:

...colors (string[]): Two or more color names, hex codes, or RGB strings

Returns: Function that applies gradient to text

Example:

import { gradient } from "@visulima/colorize/gradient";

console.log(gradient("red", "blue")("Hello World"));
console.log(gradient("red", "yellow", "green")("Rainbow"));
console.log(gradient("#FF6B6B", "#4ECDC4")("Custom colors"));
console.log(gradient("rgb(255,0,0)", "rgb(0,0,255)")("RGB gradient"));

`multilineGradient(colors: string[])`

Create a gradient that maintains vertical alignment across multiple lines.

Parameters:

colors (string[]): Array of color names, hex codes, or RGB strings

Returns: Function that applies gradient to multi-line text

Example:

import { multilineGradient } from "@visulima/colorize/gradient";

const asciiArt = `
Line 1
Line 2
Line 3
`;

console.log(multilineGradient(["cyan", "magenta"])(asciiArt));

Properties

Each style function has the following properties:

`open: string`

The ANSI opening code for the style.

Example:

import { red } from "@visulima/colorize";

console.log(red.open); // "\x1b[31m"

`close: string`

The ANSI closing code for the style.

Example:

import { red } from "@visulima/colorize";

console.log(red.close); // "\x1b[39m"

Usage with Properties

import { green, red, bold } from "@visulima/colorize";

console.log(`Hello ${green.open}World${green.close}!`);

const customStyle = bold.red.bgYellow;
console.log(`${customStyle.open}Styled text${customStyle.close}`);

TypeScript Types

`ColorizeType`

The type for the default import:

import type { ColorizeType } from "@visulima/colorize";

const colorize: ColorizeType = (await import("@visulima/colorize")).default;

Style Function Type

type StyleFunction = {
    (strings: TemplateStringsArray, ...values: any[]): string;
    (text: string): string;
    open: string;
    close: string;
} & Record<string, StyleFunction>;

Chaining

All colors, styles, and functions are chainable in any order:

import { red, bold, underline, hex, bgGreen } from "@visulima/colorize";

// Any order works
console.log(red.bold.underline`Text`);
console.log(bold.red.underline`Text`);
console.log(underline.bold.red`Text`);

// Mix everything
console.log(hex("#FF6B6B").bold.bgGreen.italic`Complex styling`);

Browser Differences

Browser exports return arrays instead of strings:

import { red } from "@visulima/colorize/browser";

const result = red("Error");
// Returns: ['%cError', 'color: red']

// Use spread operator
console.log(...result);

All methods and properties are the same, only the return format differs.

API Reference

On this page

Contribute to our work and keep us going

Ready to help us out?

Submit a pull request

Good first issues