Skip to content

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.

License

Notifications You must be signed in to change notification settings

jacklee1995/jc-color

Repository files navigation

jc-color

中文 | English

About jc-color...

Author : 李俊才

Email : 291148484@163.com

Version : 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

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 colorsNamed 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.

1678277252714

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:

1678275599669

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

1678272039676


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

About

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.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published