Bring CSS Colors to Your Terminal with Named Truecolors

Make your terminal a little more colorful 🌈

Modern terminals have evolved far beyond the basic 16 ANSI colors. Most now support truecolor (24-bit color), allowing you to display over 16 million colors in the terminal, just like in the browser.
If you're building CLI tools, this means your output can finally look beautiful - not limited to "red", "green", and "blue" but using any color you like.

In this article, we'll look at how to use named truecolors in Node.js with Ansis - a small ANSI color library.

Why named truecolors?

Both Chalk and Ansis let you colorize terminal output using hex() or rgb():

color.hex('#ffa500')('Orange text');
color.rgb(255, 165, 0)('Orange text');

That works, but hex codes don't feel like colors.
When you see #ffa500, you don't instantly imagine "orange".

CSS has already solved this problem with named colors.
Instead of writing hex values, you can write orange, pink, or mediumseagreen, and the meaning is instantly clear.

Now you can use these names directly in your terminal, too.

Using named truecolors with Ansis

By default, Ansis keeps its core small and includes only the base ANSI colors.
But you can extend it with any set of named truecolors using the extend() method.

This means you can easily add all CSS named colors, or just a small custom palette for your app.

Example 1: Add all CSS color names

If you want the full list of standardized CSS colors:

import ansis from 'ansis';
import colorNames from 'css-color-names';

// `colorNames` is an object like { pink: '#ffc0cb', orange: '#ffa500', ... }
// `extend()` registers each key as a chainable style on the returned instance
const color = ansis.extend(colorNames);

// All color names are now available as chainable methods:
console.log(color.pink('Pink foreground'));
console.log(color.bgPink('Pink background')); // auto-generated from "pink"

The method extend() automatically adds both foreground and background variants, so if you define pink, you get bgPink too.

Example 2: Create your own theme

If you want to keep your bundle small and only need a few named colors, define your own subset:

import ansis from 'ansis';

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

// Extend with only your colors
const color = ansis.extend(myTheme);

console.log(color.orange('orange foreground'));   // extended foreground
console.log(color.bgOrange('orange background')); // extended background
console.log(color.pink.italic('pink italic'));    // extended + base style

CSS named colors

So looks CSS named colors in a terminal:

Open named colors in StackBlitz

Automatic fallback for compatibility

Not all environments support full 24-bit color.

Ansis automatically detects your terminal's color level and interpolates truecolors to the nearest available color - 256-color or 16-color, so your output will still look good everywhere.

That means you can safely use named truecolors without worrying about compatibility.

Summary

✅ Most modern terminals support truecolor (16M colors)
✅ Ansis lets you use CSS-style named colors
✅ Use extend() to add named truecolors from a custom palette
✅ Automatic fallback ensures consistent appearance across environments