jc-color

中文 | English

bref : jc-color is a color tool, which can be used for color type conversion, color matching and console output. It can be used not only in browsers, but also in NodeJS.

features

• True color /256 colors support;
• Cross-runtime, which can be run in browsers and NodeJS runtime, and the effect is relatively uniform;
• No dependent module, no other modules are needed, and it can be used completely independently. It means that you can copy a single module for installation in a network-free environment, regardless of layer-by-layer dependence; -Comprehensive predefined colors, including all more than 140 CSS color names. These color names can not only be passed to text objects as values representing colors, but also be directly used as function names to create color units. Please refer to Appendix and WS3 document Named colors、Named colors of definitions to learn more about it.
• Full-featured, which makes up for the fact that the Challenge module can't use overline in the browser environment, can't use flicker in NodeJS, and doesn't have the output functions of gradient color, reverse color and reverse color. Compared with chalk, which can only output text, jc-color itself is also a color processing module, which has various color calculation and processing functions, including color matching, color generation and so on. When developing, you can not only use it to assist in color calculation, but also preview some effects at the terminal.

https://github.com/jacklee1995/jc-color/blob/master/image/readme/1678277252714.gif?raw=true

This module is based on color processing and conversion, and can be used in application scenarios that need to process colors through JavaScript. Although many functions have been provided, the document part is still being improved.

1. Install

use npm to install

npm install jc-color

use yarn to install

yarn add jc-color

use pnpm to install

pnpm install jc-color

2. Get Started

2.1 Color conversion tool

These converter modules allow you to convert between different color value formats. For example, you can convert RGB color values into ANSI color values, hexadecimal color values into RGB color values, RGB color values into HSL color values, and so on.

hex3ToChannels, hex6ToChannels, hexToChannels

These functions are used to convert 3-bit or 6-bit hexadecimal color strings and hsl color strings into RGB channels.

import { hex3ToChannels, hex6ToChannels, hexToChannels, hslToRgbChannels } from 'jc-color';

const hex3 = '#f0c';
const hex6 = '#ff00cc';
const hsl = 'hsl(300, 100%, 50%)';

console.log(hex3ToChannels(hex3)); // { red: 255, green: 0, blue: 204 }
console.log(hex6ToChannels(hex6)); // { red: 255, green: 0, blue: 204 }
console.log(hexToChannels(hex3));  // { red: 255, green: 0, blue: 204 }
console.log(hslToRgbChannels(hsl)); // { red: 255, green: 0, blue: 255 }

rgbToChannels

This function converts RGB color strings into RGB channels.

import { rgbToChannels } from 'jc-color';

const rgb = 'rgb(255, 0, 204)';
console.log(rgbToChannels(rgb));  // { red: 255, green: 0, blue: 204 }

hslToChannels

This function converts HSL color strings into HSL channels.

import { hslToChannels } from 'jc-color';

const hsl = 'hsl(300, 100%, 50%)';
const hslChannels = hslToChannels(hsl); 
console.log(hslChannels);       // { red: 255, green: 0, blue: 255 }

channelsToHex

This function converts RGB channels into 6-bit hexadecimal color strings.

import { channelsToHex } from 'jc-color';

const rgbChannels = { red: 255, green: 0, blue: 204 };
const hex = channelsToHex(rgbChannels);
console.log(hex);      // #ff00cc

rgbToHex

This function converts RGB color strings into 6-bit hexadecimal color strings.

import { rgbToHex } from 'jc-color';

const rgb = 'rgb(255, 0, 255)';
const hex = rgbToHex(rgb);
console.log(hex);      // #ff00ff

hexToRgb

This function converts a 6-bit hexadecimal color string into an RGB color string.

import { hexToRgb } from 'jc-color';

const hex1 = '#ff00cc';
const rgb1 = hexToRgb(hex1); 
console.log(rgb1);        // rgb(255,0,204)

const hex2 = '#ff00ff';
const rgb2 = hexToRgb(hex2); 
console.log(rgb2);        // rgb(255,0,255)

hslToHex

This function converts the HSL color string into a 6-bit hexadecimal color string.

import { hslToHex } from 'jc-color';
const hsl = 'hsl(300, 100%, 50%)';
const hex = hslToHex(hsl);
console.log(hex);  // #ff00ff

hexToHsl

This function converts a 6-bit hexadecimal color string into an HSL color string.

import { hexToHsl } from 'jc-color';
const hex = '#ff00cc';
const hsl = hexToHsl(hex);
console.log(hsl); // hsl(312, 100%, 50%)

channelsToHsl

This function converts RGB channels into HSL channels.

import { channelsToHsl } from 'jc-color';
const rgbChannels = { red: 255, green: 0, blue: 204 };
const hslChannels = channelsToHsl(rgbChannels);
console.log(hslChannels); // hsl(312, 100%, 50%)

channelsToRgb

This function converts HSL channels into RGB channels.

import { channelsToRgb } from 'jc-color';
const hslChannels = { red: 255, green: 0, blue: 204 };
const rgbChannels = channelsToRgb(hslChannels); 
console.log(rgbChannels);  // rgb(255,0,204)

hslToRgb

This function converts HSL color strings into RGB color strings.

import { hslToRgb } from 'jc-color';
const hsl = 'hsl(300, 100%, 50%)';
const rgb = hslToRgb(hsl);
console.log(rgb); // rgb(255,0,255)

2.2 Color Terminal Tool

You can master the method in the terminal according to the following effects and codes and with the color table in the appendix.

import { createUnit, createText, geadientText, blue, lime, crimson, firebrick, print } from 'jc-color'

print('--------------------------------------------------')
geadientText("Hello! Welcome to JC Color!").underline().italic().print()
print('--------------------------------------------------')

geadientText("This is a tool covering color calculation, processing and terminal output,",["red", "blue","#EB6461","green","rgb(128, 80, 252)"]).underline_double().print()
geadientText("which is compatible with NodeJS and Web environment at the same time, and its functions in terminal printing are particularly rich, and there is no module dependence.",["#84FC2C","yellow"],["red", "blue","#EB6461","green"]).glimmer().print()

createText(
 "\nYou can use",
  createUnit(" Hex、","#EB6461"),
  createUnit(" Rgb to set the colors、","rgb(62, 122, 234)"),
  " with 256 colors/true color support!",
  createUnit("\nThis module contains more than one hundred built-in color names to set your color,","Yellow"),
  createUnit(" You can use highlighting/bolding ").bold(),
  createUnit("and also dark letters.").dark(),
  "\nand also ",
  blue("italics,").orangeBg().italic(),
  createUnit("underline,","tomato").underline(),
  createUnit(" double underline、","teal").underline_double(),
  lime("glimmer fonts （alim only in Node）、").bg("#cdcdcd").glimmer(),
).print()

crimson("\nYou can also use").blueBg().print()
.reverse("reverse colors. That is, the foreground and background colors are exchanged.").print()

blue("\nAnd inverse colors.").redBg().print()
.inverseFore("which includes ieverse color of the foreground color").print().remove_inverseFore()
.inverseBg("and also background color.").print().remove_inverseFore()
.inverse("Of course, the background color and foreground color are inversed at the same time.").print()


geadientText("You can also generate colors, make gradients, background gradients, and apply various effects in gradient text!").print()

firebrick('\nEnjoy it!')

This set of code does not need to be modified and can be directly used in the browser:

When you create a color through a color name, you find that all the colors in the preset color name do not meet your requirements. You can use the fr function to create a color:

import { fr } from 'jc-color';

fr('some text.', '#D841B3').print();
fr('some text.','#D841B3').yellowBg().print();
fr('some text.', '#D841B3').bg('rgb(213,247,74)').print()

Appendix. Internally defined color names

For the convenience of use, jc-color has predefined some common color names. These color names are generally consistent with the colors defined in CSS standards. The color names and corresponding values are as follows:

| color names | hex color value | Effect preview | | color names | hex color value | Effect preview | | :------------- | :-------------- | :-------------------------------------------------- |:-| :------------------- | :-------------- | :-------------------------------------------------- | | black | #000000 | #000000 | | navy | #000080 | #000080 | | darkblue | #00008B | #00008B | | mediumblue | #0000CD | #0000CD | | blue | #0000FF | #0000FF | | darkgreen | #006400 | #006400 | | green | #008000 | #008000 | | teal | #008080 | #008080 | | darkcyan | #008B8B | #008B8B | | deepskyblue | #00BFFF | #00BFFF | | darkturquoise | #00CED1 | #00CED1 | | mediumspringgreen | #00FA9A | #00FA9A | | lime | #00FF00 | #00FF00 | | springgreen | #00FF7F | #00FF7F | | aqua | #00FFFF | #00FFFF | | cyan | #00FFFF | #00FFFF | | midnightblue | #191970 | #191970 | | dodgerblue | #1E90FF | #1E90FF | | lightseagreen | #20B2AA | #20B2AA | | forestgreen | #228B22 | #228B22 | | seagreen | #2E8B57 | #2E8B57 | | darkslategray | #2F4F4F | #2F4F4F | | limegreen | #32CD32 | #32CD32 | | mediumseagreen | #3CB371 | #3CB371 | | turquoise | #40E0D0 | #40E0D0 | | royalblue | #4169E1 | #4169E1 | | steelblue | #4682B4 | #4682B4 | | mediumturquoise | #48D1CC | #48D1CC | | darkslateblue | #483D8B | #483D8B | | indigo | #4B0082 | #4B0082 | | darkolivegreen | #556B2F | #556B2F | | cadetblue | #5F9EA0 | #5F9EA0 | | cornflowerblue | #6495ED | #6495ED | | mediumaquamarine | #66CDAA | #66CDAA | | dimgray | #696969 | #696969 | | slateblue | #6A5ACD | #6A5ACD | | olivedrab | #6B8E23 | #6B8E23 | | slategray | #708090 | #708090 | | lightslategray | #778899 | #778899 | | mediumslateblue | #7B68EE | #7B68EE | | lawngreen | #7CFC00 | #7CFC00 | | chartreuse | #7FFF00 | #7FFF00 | | aquamarine | #7FFFD4 | #7FFFD4 | | maroon | #800000 | #800000 | | purple | #800080 | #800080 | | olive | #808000 | #808000 | | gray | #808080 | #808080 | | lightskyblue | #87CEFA | #87CEFA | | skyblue | #87CEEB | #87CEEB | | blueviolet | #8A2BE2 | #8A2BE2 | | darkred | #8B0000 | #8B0000 | | darkmagenta | #8B008B | #8B008B | | saddlebrown | #8B4513 | #8B4513 | | darkseagreen | #8FBC8F | #8FBC8F | | lightgreen | #90EE90 | #90EE90 | | mediumpurple | #9370DB | #9370DB | | darkviolet | #9400D3 | #9400D3 | | palegreen | #98FB98 | #98FB98 | | darkorchid | #9932CC | #9932CC | | yellowgreen | #9ACD32 | #9ACD32 | | sienna | #A0522D | #A0522D | | brown | #A52A2A | #A52A2A | | darkgray | #A9A9A9 | #A9A9A9 | | lightblue | #ADD8E6 | #ADD8E6 | | greenyellow | #ADFF2F | #ADFF2F | | paleturquoise | #AFEEEE | #AFEEEE | | lightsteelblue | #B0C4DE | #B0C4DE | | firebrick | #B22222 | #B22222 | | darkgoldenrod | #B8860B | #B8860B | | mediumorchid | #BA55D3 | #BA55D3 | | rosybrown | #BC8F8F | #BC8F8F | | darkkhaki | #BDB76B | #BDB76B | | indianred | #CD5C5C | #CD5C5C | | goldenrod | #DAA520 | #DAA520 | | palevioletred | #DB7093 | #DB7093 | | crimson | #DC143C | #DC143C | | lavender | #E6E6FA | #E6E6FA | | darksalmon | #E9967A | #E9967A | | palegoldenrod | #EEE8AA | #EEE8AA | | lightcoral | #F08080 | #F08080 | | aliceblue | #F0F8FF | #F0F8FF | | honeydew | #F0FFF0 | #F0FFF0 | | wheat | #F5DEB3 | #F5DEB3 | | deeppink | #FF1493 | #FF1493 | | darkorange | #FF8C00 | #FF8C00 | | gold | #FFD700 | #FFD700 | | peachpuff | #FFDAB9 | #FFDAB9 | | papayawhip | #FFEFD5 | #FFEFD5 | | powderblue | #B0E0E6 | #B0E0E6 | | chocolate | #D2691E | #D2691E | | tan | #D2B48C | #D2B48C | | lightgray | #D3D3D3 | #D3D3D3 | | silver | #C0C0C0 | #C0C0C0 | | mediumvioletred | #C71585 | #C71585 | | fuchsia | #C83293 | #C83293 | | peru | #CD853F | #CD853F | | thistle | #D8BFD8 | #D8BFD8 | | orchid | #DA70D6 | #DA70D6 | | gainsboro | #DCDCDC | #DCDCDC | | plum | #DDA0DD | #DDA0DD | | burlywood | #DEB887 | #DEB887 | | lightcyan | #E0FFFF | #E0FFFF | | violet | #EE82EE | #EE82EE | | khaki | #F0E68C | #F0E68C | | azure | #F0FFFF | #F0FFFF | | beige | #F5F5DC | #F5F5DC | | whitesmoke | #F5F5F5 | #F5F5F5 | | mintcream | #F5FFFA | #F5FFFA | | ghostwhite | #F8F8FF | #F8F8FF | | salmon | #FA8072 | #FA8072 | | sandybrown | #FAA460 | #FAA460 | | antiquewhite | #FAEBD7 | #FAEBD7 | | linen | #FAF0E6 | #FAF0E6 | | lightgoldenrodyellow | #FAFAD2 | #FAFAD2 | | oldlace | #FDF5E6 | #FDF5E6 | | red | #FF0000 | #FF0000 | | magenta | #FF00FF | #FF00FF | | orangered | #FF4500 | #FF4500 | | tomato | #FF6347 | #FF6347 | | hotpink | #FF69B4 | #FF69B4 | | coral | #FF7F50 | #FF7F50 | | lightsalmon | #FFA07A | #FFA07A | | orange | #FFA500 | #FFA500 | | lightpink | #FFB6C1 | #FFB6C1 | | pink | #FFC0CB | #FFC0CB | | navajowhite | #FFDEAD | #FFDEAD | | moccasin | #FFE4B5 | #FFE4B5 | | bisque | #FFE4C4 | #FFE4C4 | | mistyrose | #FFE4E1 | #FFE4E1 | | blanchedalmond | #FFEBCD | #FFEBCD | | lavenderblush | #FFF0F5 | #FFF0F5 | | seashell | #FFF5EE | #FFF5EE | | cornsilk | #FFF8DC | #FFF8DC | | lemonchiffon | #FFFACD | #FFFACD | | floralwhite | #FFFAF0 | #FFFAF0 | | snow | #FFFAFA | #FFFAFA | | yellow | #FFFF00 | #FFFF00 | | lightyellow | #FFFFE0 | #FFFFE0 | | ivory | #FFFFF0 | #FFFFF0 | | white | #FFFFFF | #FFFFFF |