Make terminals a little more colorful 🌈

[ANSI S]tyles

// Named imports - for cleaner, more readable code
import { red, cyan, bold, hex, rgb } from 'ansis';

// Clean chained syntax with template literals - no extra parentheses
console.log(bold.bgRed` FAIL `);

// Nested templates - no string concatenation needed
console.log(red`✖ Error: ${cyan`file.js`} not found`);

// Truecolor: hex and rgb
console.log(hex('#FF75D1').bold`Pink`);
console.log(rgb(224, 17, 95).italic`Ruby`);

🎨 Colors - 16 · 256 · Truecolor (hex/rgb) · Named colors (orange, pink ...)
✍️ Syntax - Chained · Template literals · Nested templates
⚙️ Works  - ESM · CJS · TS · Node 10+ · Bun · Deno · CI · Chromium browsers
🧠 Smart  - Auto color detection · Fallback (truecolor → 256 → 16 → b&w) · NO_COLOR · FORCE_COLOR
📦 Tiny   - 5.8 kB · Drop-in replacement for Chalk (44 kB)

import ansis, { red, bold, fg, hex, rgb } from 'ansis';

const ansis = require('ansis');
const { red, bold, fg, hex, rgb } = require('ansis');

import { red, bold, hex } from 'ansis';

red.bold`text`;
hex('#FF75D1').bgCyan.bold`text`;
bold.hex('#FF75D1').bgCyan`text`;

import { red, yellow, green } from 'ansis';

red`Error`; // no parentheses
red`Red ${yellow`Yellow ${green`Green`} Yellow`} Red`; // deep nested templates

red`Hello\nWorld`; // two lines in red
red`prev\\next`;   // one line: prev\next

import { bold, fg, bg } from 'ansis';

fg(96)`Bright Cyan`;
bg(105).fg(96)`Cyan text on magenta background`;
bold.fg(96).underline`Bold underline Bright Cyan`;

import { bold, hex, rgb, bgHex } from 'ansis';

hex('#E0115F').bold`Bold Ruby`;
rgb(224, 17, 95).italic`Italic Ruby`;
bold.hex('#E0115F').bgHex('#96C')`Ruby text on amethyst background`;

Truecolor → 256 colors → 16 colors → no colors (b&w)

import ansis from 'ansis';

const myTheme = {
  orange: '#ffa500',
  pink:   '#ffc0cb',
};

const color = ansis.extend(myTheme);

color.orange.bold`orange bold`;       // extended first in chain
color.bgOrange`orange background`;    // auto-generated bg
color.pink`pink foreground`;
color.bgPink`pink background`;        // auto-generated bg
color.red`built-in red still works`;  // built-in remains intact

Warning

Put extended colors first in the chain: color.orange.bold ✅ color.bold.orange ❌

import ansis from 'ansis';
import colorNames from 'css-color-names'; // { pink: '#ffc0cb', orange: '#ffa500', ... }

const color = ansis.extend(colorNames);

color.pink('Pink foreground');
color.bgPink('Pink background'); // auto-generated bg

Tip

Need help picking a color name? Try the Name that Color tool - paste a hex and get its closest color name.

import ansis from 'ansis';

console.log(ansis.level);         // 0 | 1 | 2 | 3
console.log(ansis.isSupported()); // true -> level >= 1 (at least 16 colors supported)

import { Ansis } from 'ansis';

const noColor  = new Ansis(0);  // always plain text, no ANSI codes
const basic    = new Ansis(1);  // 16 colors; hex/rgb fall back to nearest
const auto     = new Ansis();   // auto-detect (same as default import)

console.log(noColor.red`foo`);              // plain text, no ANSI codes
console.log(basic.hex('#FFAB40')`Orange`);  // falls back to yellowBright

Important

In Node.js FORCE_COLOR=true and FORCE_COLOR=1 both enable 16 colors.
In Ansis, the value 1 means level 1 and strictly set 16 colors, while true triggers auto-detection.

./app.js              # auto-detect
./app.js --no-color   # disable colors
./app.js --color      # force colors (useful when piping output)

Note

CLI flags take precedence over environment variables.

node app.js                          # auto-detect
node app.js > log.txt                # no colors (non-TTY)

NO_COLOR=1 node app.js               # force off
FORCE_COLOR=0 node app.js            # force off

FORCE_COLOR=1 node app.js > log.txt  # force 16 colors
FORCE_COLOR=2 node app.js > log.txt  # force 256 colors
FORCE_COLOR=3 node app.js > log.txt  # force truecolor

node app.js --no-color               # disable via flag
node app.js --color > log.txt        # enable via flag

ansis.bgRed('\n ERROR \n') + ansis.cyan('The file not found!') // ✅
chalk.bgRed('\n ERROR \n') + chalk.cyan('The file not found!') // ✅
pico.bgRed('\n ERROR \n') + pico.cyan('The file not found!')   // ❌

ansis.red`R ${ansis.green`G ${ansis.blue`B`} G`} R` // ✅
chalk.red`R ${chalk.green`G ${chalk.blue`B`} G`} R` // ❌
pico.red`R ${pico.green`G ${pico.blue`B`} G`} R`    // ❌

ansis.red()          // ✅ ''
chalk.red()          // ✅ ''
pico.red()           // ❌ \e[31mundefined\e[39m

ansis.red(undefined) // ✅ ''
chalk.red(undefined) // ❌ \e[31mundefined\e[39m
pico.red(undefined)  // ❌ \e[31mundefined\e[39m

ansis.red(null)      // ✅ ''
chalk.red(null)      // ❌ \e[31mnull\e[39m
pico.red(null)       // ❌ \e[31mnull\e[39m

ansis.red('')        // ✅ ''
chalk.red('')        // ✅ ''
pico.red('')         // ❌ \e[31m\e[39m

ansis.reset()        // ✅ \e[0m
chalk.reset()        // ❌ ''
pico.reset()         // ❌ \e[0mundefined\e[0m

c.red(0)       // '0' in red
c.red(false)   // 'false' in red
c.red(true)    // 'true' in red
c.red(5/'1px') // 'NaN' in red
c.red(1/0)     // 'Infinity' in red

ansis.red('text');        // 59.646.465 ops/sec
styleText('red', 'text'); //    579.832 ops/sec

import { green } from 'ansis';
import { styleText } from 'node:util';

green`Success!`; // ansis
styleText('green', 'Success!');

green.bold`Success!`; // ansis
styleText(['green', 'bold'], 'Success!');

import { red, cyan } from 'ansis';
import { styleText } from 'node:util';

red`Error: ${cyan.bold`file.js`} not found!`; // ansis
styleText('red', `Error: ${styleText(['cyan', 'bold'], 'file.js')} not found!`);

Warning

Firefox doesn't natively support ANSI codes in the developer console.