jc-color

关于 jc-color...

作者 : 李俊才

邮箱 : 291148484@163.com

版本 : v0.0.6

home : http://thispage.tech:9680/jclee1995/jc-color

gitee : https://gitee.com/jacklee1995/jc-color

github : https://github.com/jacklee1995/jc-color

简介 :

jc-color 是一个 JavaScript/NodeJS 颜色工具，可以用于 颜色类型转换、调色、控制台输出。它不仅可以用于 浏览器，还可以用于 NodeJS。

中文 | English

特征

真彩色/256色 支持；
跨运行时，可以在浏览器、NodeJS运行时中运行，且效果比较统一；
无依赖模块，不需要任何其它模块，可以完全独立使用。意味着你可以在无网络环境复制单个模块进行安装，而不要考虑层层依赖；
全面的预定义颜色，囊括了全部一百四十多个CSS颜色名。这些颜色名不但可以作为表示颜色的值传给文本对象，也可以直接以将他们作为函数名来创建彩色单元；请参考附录和WS3文档《命名颜色》、《定义的命名颜色》
功能全面，弥补了 chalk 模块在浏览器环境中无法使用 overline，在NodeJS中无法使用闪烁，不具备渐变色、反转色、反色输出功能。相对于 chalk 只能输出文本，jc-color 本身还是一个颜色处理模块，具备各种颜色的计算和处理函数，包括调色、颜色生成等等。在开发时，你不仅可以使用它在辅助进行颜色计算，还可以在终端边对某些效果预览。

本模块的基础是颜色处理与转换，可用于需要通过 JavaScript 来处理颜色的应用场景。虽然很多功能已经提供，但目前文档部分仍然在努力完善中。

1.安装

使用 npm 来安装

# use npm
npm install jc-color
# use yarn
yarn add jc-color
# use pnpm
pnpm install jc-color

2. 快速开始

2.1 颜色转换工具

这些转换器模块允许您在不同颜色值格式之间进行转换。例如，您可以将 RGB 颜色值转换为 ANSI 颜色值，将十六进制颜色值转换为 RGB 颜色值，将 RGB 颜色值转换为 HSL 颜色值等。

hex3ToChannels, hex6ToChannels, hexToChannels

这些函数用于将 3 位或 6 位十六进制颜色字符串、hsl颜色字符串转换为 RGB 通道。

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

这个函数将 RGB 颜色字符串转换为 RGB 通道。

import { rgbToChannels } from 'jc-color';

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

hslToChannels

这个函数将 HSL 颜色字符串转换为 HSL 通道。

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

这个函数将 RGB 通道转换为 6 位十六进制颜色字符串。

import { channelsToHex } from 'jc-color';

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

rgbToHex

这个函数将 RGB 颜色字符串转换为 6 位十六进制颜色字符串。

import { rgbToHex } from 'jc-color';

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

hexToRgb

这个函数将 6 位十六进制颜色字符串转换为 RGB 颜色字符串。

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

这个函数将 HSL 颜色字符串转换为 6 位十六进制颜色字符串。

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

hexToHsl

这个函数将 6 位十六进制颜色字符串转换为 HSL 颜色字符串。

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

channelsToHsl

这个函数将 RGB 通道转换为 HSL 通道。

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

这个函数将 HSL 通道转换为 RGB 通道。

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

这个函数将 HSL 颜色字符串转换为 RGB 颜色字符串。

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

2.2 彩色终端工具

你可以依据下面的效果和代码，配合附录中的颜色表掌握在终端中的方法。

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

print('--------------------------------------------------')
geadientText("你好呀！欢迎使用 JC Color！").underline().italic().print()
print('--------------------------------------------------')

geadientText("这是一款涵盖颜色计算、处理与终端输出的工具",["red", "blue","#EB6461","green","rgb(128, 80, 252)"]).underline_double().print()
geadientText("它同时兼容 NodeJS 与 Web 环境，在终端打印上的功能尤其丰富，并且没有任何模块依赖。",["#84FC2C","yellow"],["red", "blue","#EB6461","green"]).glimmer().print()

createText(
 "\n你可以使用",
  createUnit(" Hex、","#EB6461"),
  createUnit(" Rgb 来设置颜色、","rgb(62, 122, 234)"),
  " 具有 256色/真彩色 支持!",
  createUnit("\n这里包含了一百多个内置颜色名来设置你的颜色、","Yellow"),
  createUnit(" 可以使用高亮/加粗体、").bold(),
  createUnit(" 可以 暗体。").dark(),
  "\n还有 ",
  blue("斜体字、").orangeBg().italic(),
  createUnit(" 下划线、","tomato").underline(),
  createUnit(" 双下划线、","teal").underline_double(),
  lime("闪烁体（仅Node）、").bg("#cdcdcd").glimmer(),
).print()

crimson("\n你还可以使用").blueBg().print()
.reverse("反转色：前景色和背景色互换").print()

blue("\n以及反色：").redBg().print()
.inverseFore("包括前景色的反色").print().remove_inverseFore()
.inverseBg("和背景色的反色").print().remove_inverseFore()
.inverse("背景色和前景色同时反色").print()


geadientText("也可以生成颜色，制作渐变色、背景渐变色，并且在渐变色文本中应用各种效果！").print()

firebrick('\n尽情享用吧！')

这套代码不需要修改，可以直接使用于浏览器中：

当你通过颜色名创建颜色时，发现预置颜色名中的所有颜色均不满足你的要求，可以使用 fr 创建颜色：

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()

附录. 预定义颜色名对照表

为了方便使用，jc-color 已经预先定义好了一些常见的颜色名。这些颜色名与CSS定义的颜色总体一致。各颜色名与对应的值如下：

颜色名十六进制颜色值颜色展示颜色名十六进制颜色值颜色展示

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

readme_CN.md

readme_CN.md

jc-color

1.安装

使用 npm 来安装

2. 快速开始

2.1 颜色转换工具

hex3ToChannels, hex6ToChannels, hexToChannels

rgbToChannels

hslToChannels

channelsToHex

rgbToHex

hexToRgb

hslToHex

hexToHsl

channelsToHsl

channelsToRgb

hslToRgb

2.2 彩色终端工具

附录. 预定义颜色名对照表

Files

readme_CN.md

Latest commit

History

readme_CN.md

File metadata and controls

jc-color

1.安装

使用 npm 来安装

2. 快速开始

2.1 颜色转换工具

hex3ToChannels, hex6ToChannels, hexToChannels

rgbToChannels

hslToChannels

channelsToHex

rgbToHex

hexToRgb

hslToHex

hexToHsl

channelsToHsl

channelsToRgb

hslToRgb

2.2 彩色终端工具

附录. 预定义颜色名对照表