📖 Introduction
While chalk offers a user-friendly, chainable API, I don’t fully agree with
its defensive response with "a stubborn stance". Here’s why:
- Its large package size: chalk@4 is 101KB and chalk@5 is still 43.2KB.
- No tree-shaking support.
- Lacks pipe/compose functional programming support.
- In lightweight scenarios, static ANSI strings are much more cost-effective.
This led me to develop the @kabeep/palette package in just two hours, which, like chalk, supports ANSI 16 colors,
256 colors, and 16m true-colors.
Compared to other lightweight alternatives, it goes beyond basic ANSI keywords and also supports
Hex Triplet, RGB Color Model, and CSS Keywords.
But this doesn’t mean it compromises on size or performance.
On the contrary, it performs excellently in Benchmark Reports:
- Its
ESModule file is just 9.48KB, with CommonJS only 12.7KB.
- In a wide range of benchmark samples, it outperforms
chalk by more than 1.7x in speed.
- Like
colorette, it's much faster than the mainstream packages on NPM, but offers more API features.
- Fully supports
tree-shaking, so CLI apps needing only basic styles like yellow or red can import it with no
overhead.
- Enjoy functional programming with ease.
See documentation.
📦 Installation
npm install @kabeep/palette --save
yarn add @kabeep/palette
pnpm add @kabeep/palette
⚙️ Usage
CommonJS
const pipe = require('lodash.flow');
const { bgRgb, hex, keyword, yellowBright } = require('@kabeep/palette');
const padding = (text: string) => ` ${text} `;
const palette = pipe(keyword('gold'), padding, bgRgb(255, 0, 0));
console.log(palette('Error'), yellowBright('Warning'), hex('#ff0000')('Message'));
ESModule
import pipe from 'lodash.flow';
import { bgRgb, hex, keyword, yellowBright } from '@kabeep/palette';
const padding = (text: string) => ` ${text} `;
const palette = pipe(keyword('gold'), padding, bgRgb(255, 0, 0));
console.log(palette('Error'), yellowBright('Warning'), hex('#ff0000')('Message'));
🌈 Styles
Modifiers
- reset - Reset the current style.
- bold - Make the text bold.
- dim - Make the text have lower opacity.
- italic - Make the text italic. (Not widely supported)
- underline - Put a horizontal line above the text. (Not widely supported)
- overline - Put a horizontal line below the text. (Not widely supported)
- inverse- Invert background and foreground colors.
- hidden - Print the text but make it invisible.
- strikethrough - Put a horizontal line through the center of the text. (Not widely supported)
Foreground Colors
- black
- red
- green
- yellow
- blue
- magenta
- cyan
- white
- gray
- redBright
- greenBright
- yellowBright
- blueBright
- magentaBright
- cyanBright
- whiteBright
Background Colors
- bgBlack
- bgRed
- bgGreen
- bgYellow
- bgBlue
- bgMagenta
- bgCyan
- bgWhite
- bgGray
- bgRedBright
- bgGreenBright
- bgYellowBright
- bgBlueBright
- bgMagentaBright
- bgCyanBright
- bgWhiteBright
Hex Triplet
- hex - (three-digit) #fff, ...
- hex - (six-digit) #ffffff, ...
- hex - (without hashtag) fff, ffffff, ...
RGB Color Model
- rgb - (255, 255, 255), ...
CSS Color Keywords
See the full list at W3C Wiki.
- keyword - azure, gold, indigo, ...
💐 Credits
🤝 Contribution
Contributions via Pull Requests or Issues are welcome.
📄 License
This project is licensed under the MIT License. See the LICENSE file for details.