+
Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,12 @@ jobs:
fail-fast: false
matrix:
node-version:
- 17
- 16
- 14
- 12
- 22
- 20
- 18
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
- run: npm install
Expand Down
26 changes: 13 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ console.log(color.ansi256().object()); // { ansi256: 183, alpha: 0.5 }
```

## Install
```console
$ npm install color
```shell
npm install color
```

## Usage
```js
const Color = require('color');
import Color from 'color';
```

### Constructors
Expand Down Expand Up @@ -95,17 +95,17 @@ String constructors are handled by [color-string](https://www.npmjs.com/package/

### Getters
```js
color.hsl();
color.hsl()
```
Convert a color to a different space (`hsl()`, `cmyk()`, etc.).

```js
color.object(); // {r: 255, g: 255, b: 255}
color.object() // {r: 255, g: 255, b: 255}
```
Get a hash of the color value. Reflects the color's current model (see above).

```js
color.rgb().array() // [255, 255, 255]
color.rgb().array() // [255, 255, 255]
```
Get an array of the values with `array()`. Reflects the color's current model (see above).

Expand All @@ -120,31 +120,31 @@ color.hex() // #ffffff
Get the hex value. (**NOTE:** `.hex()` does not return alpha values; use `.hexa()` for an RGBA representation)

```js
color.red() // 255
color.red() // 255
```
Get the value for an individual channel.

### CSS Strings
```js
color.hsl().string() // 'hsl(320, 50%, 100%)'
color.hsl().string() // 'hsl(320, 50%, 100%)'
```

Calling `.string()` with a number rounds the numbers to that decimal place. It defaults to 1.

### Luminosity
```js
color.luminosity(); // 0.412
color.luminosity(); // 0.412
```
The [WCAG luminosity](http://www.w3.org/TR/WCAG20/#relativeluminancedef) of the color. 0 is black, 1 is white.

```js
color.contrast(Color("blue")) // 12
color.contrast(Color("blue")) // 12
```
The [WCAG contrast ratio](http://www.w3.org/TR/WCAG20/#contrast-ratiodef) to another color, from 1 (same color) to 21 (contrast b/w white and black).

```js
color.isLight(); // true
color.isDark(); // false
color.isLight() // true
color.isDark() // false
```
Get whether the color is "light" or "dark", useful for deciding text color.

Expand All @@ -166,7 +166,7 @@ color.grayscale() // #5CBF54 -> #969696
color.whiten(0.5) // hwb(100, 50%, 50%) -> hwb(100, 75%, 50%)
color.blacken(0.5) // hwb(100, 50%, 50%) -> hwb(100, 50%, 75%)

color.fade(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
color.fade(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
color.opaquer(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 1.0)

color.rotate(180) // hsl(60, 20%, 20%) -> hsl(240, 20%, 20%)
Expand Down
135 changes: 135 additions & 0 deletions index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
import type convert from 'color-convert';

export type ColorLike = ColorInstance | string | ArrayLike<number> | number | Record<string, any>;
export type ColorJson = {model: string; color: number[]; valpha: number};
export type ColorObject = {alpha?: number | undefined} & Record<string, number>;

// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
export interface ColorInstance {
toString(): string;
// eslint-disable-next-line @typescript-eslint/naming-convention
toJSON(): ColorJson;
string(places?: number): string;
percentString(places?: number): string;
array(): number[];
object(): ColorObject;
unitArray(): number[];
unitObject(): {r: number; g: number; b: number; alpha?: number | undefined};
round(places?: number): ColorInstance;
alpha(): number;
alpha(value: number): ColorInstance;
red(): number;
red(value: number): ColorInstance;
green(): number;
green(value: number): ColorInstance;
blue(): number;
blue(value: number): ColorInstance;
hue(): number;
hue(value: number): ColorInstance;
saturationl(): number;
saturationl(value: number): ColorInstance;
lightness(): number;
lightness(value: number): ColorInstance;
saturationv(): number;
saturationv(value: number): ColorInstance;
value(): number;
value(value: number): ColorInstance;
chroma(): number;
chroma(value: number): ColorInstance;
gray(): number;
gray(value: number): ColorInstance;
white(): number;
white(value: number): ColorInstance;
wblack(): number;
wblack(value: number): ColorInstance;
cyan(): number;
cyan(value: number): ColorInstance;
magenta(): number;
magenta(value: number): ColorInstance;
yellow(): number;
yellow(value: number): ColorInstance;
black(): number;
black(value: number): ColorInstance;
x(): number;
x(value: number): ColorInstance;
y(): number;
y(value: number): ColorInstance;
z(): number;
z(value: number): ColorInstance;
l(): number;
l(value: number): ColorInstance;
a(): number;
a(value: number): ColorInstance;
b(): number;
b(value: number): ColorInstance;
keyword(): string;
keyword<V extends string>(value: V): ColorInstance;
hex(): string;
hex<V extends string>(value: V): ColorInstance;
hexa(): string;
hexa<V extends string>(value: V): ColorInstance;
rgbNumber(): number;
luminosity(): number;
contrast(color2: ColorInstance): number;
level(color2: ColorInstance): 'AAA' | 'AA' | '';
isDark(): boolean;
isLight(): boolean;
negate(): ColorInstance;
lighten(ratio: number): ColorInstance;
darken(ratio: number): ColorInstance;
saturate(ratio: number): ColorInstance;
desaturate(ratio: number): ColorInstance;
whiten(ratio: number): ColorInstance;
blacken(ratio: number): ColorInstance;
grayscale(): ColorInstance;
fade(ratio: number): ColorInstance;
opaquer(ratio: number): ColorInstance;
rotate(degrees: number): ColorInstance;
mix(mixinColor: ColorInstance, weight?: number): ColorInstance;
rgb(...arguments_: number[]): ColorInstance;
hsl(...arguments_: number[]): ColorInstance;
hsv(...arguments_: number[]): ColorInstance;
hwb(...arguments_: number[]): ColorInstance;
cmyk(...arguments_: number[]): ColorInstance;
xyz(...arguments_: number[]): ColorInstance;
lab(...arguments_: number[]): ColorInstance;
lch(...arguments_: number[]): ColorInstance;
ansi16(...arguments_: number[]): ColorInstance;
ansi256(...arguments_: number[]): ColorInstance;
hcg(...arguments_: number[]): ColorInstance;
apple(...arguments_: number[]): ColorInstance;
}

export type ColorConstructor = {
(object?: ColorLike, model?: keyof (typeof convert)): ColorInstance;
new(object?: ColorLike, model?: keyof (typeof convert)): ColorInstance;
rgb(...value: number[]): ColorInstance;
rgb(color: ColorLike): ColorInstance;
hsl(...value: number[]): ColorInstance;
hsl(color: ColorLike): ColorInstance;
hsv(...value: number[]): ColorInstance;
hsv(color: ColorLike): ColorInstance;
hwb(...value: number[]): ColorInstance;
hwb(color: ColorLike): ColorInstance;
cmyk(...value: number[]): ColorInstance;
cmyk(color: ColorLike): ColorInstance;
xyz(...value: number[]): ColorInstance;
xyz(color: ColorLike): ColorInstance;
lab(...value: number[]): ColorInstance;
lab(color: ColorLike): ColorInstance;
lch(...value: number[]): ColorInstance;
lch(color: ColorLike): ColorInstance;
ansi16(...value: number[]): ColorInstance;
ansi16(color: ColorLike): ColorInstance;
ansi256(...value: number[]): ColorInstance;
ansi256(color: ColorLike): ColorInstance;
hcg(...value: number[]): ColorInstance;
hcg(color: ColorLike): ColorInstance;
apple(...value: number[]): ColorInstance;
apple(color: ColorLike): ColorInstance;
};

// eslint-disable-next-line @typescript-eslint/naming-convention
declare const Color: ColorConstructor;

export default Color;
32 changes: 16 additions & 16 deletions index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const colorString = require('color-string');
const convert = require('color-convert');
import colorString from 'color-string';
import convert from 'color-convert';

const skippedModels = [
// To be honest, I don't really feel like keyword belongs in color convert, but eh.
Expand Down Expand Up @@ -123,14 +123,14 @@ Color.prototype = {
string(places) {
let self = this.model in colorString.to ? this : this.rgb();
self = self.round(typeof places === 'number' ? places : 1);
const args = self.valpha === 1 ? self.color : [...self.color, this.valpha];
return colorString.to[self.model](args);
const arguments_ = self.valpha === 1 ? self.color : [...self.color, this.valpha];
return colorString.to[self.model](...arguments_);
},

percentString(places) {
const self = this.rgb().round(typeof places === 'number' ? places : 1);
const args = self.valpha === 1 ? self.color : [...self.color, this.valpha];
return colorString.to.rgb.percent(args);
const arguments_ = self.valpha === 1 ? self.color : [...self.color, this.valpha];
return colorString.to.rgb.percent(...arguments_);
},

array() {
Expand Down Expand Up @@ -237,7 +237,7 @@ Color.prototype = {
return new Color(value);
}

return colorString.to.hex(this.rgb().round().color);
return colorString.to.hex(...this.rgb().round().color);
},

hexa(value) {
Expand All @@ -252,7 +252,7 @@ Color.prototype = {
alphaHex = '0' + alphaHex;
}

return colorString.to.hex(rgbArray) + alphaHex;
return colorString.to.hex(...rgbArray) + alphaHex;
},

rgbNumber() {
Expand Down Expand Up @@ -409,23 +409,23 @@ for (const model of Object.keys(convert)) {
const {channels} = convert[model];

// Conversion methods
Color.prototype[model] = function (...args) {
Color.prototype[model] = function (...arguments_) {
if (this.model === model) {
return new Color(this);
}

if (args.length > 0) {
return new Color(args, model);
if (arguments_.length > 0) {
return new Color(arguments_, model);
}

return new Color([...assertArray(convert[this.model][model].raw(this.color)), this.valpha], model);
};

// 'static' construction methods
Color[model] = function (...args) {
let color = args[0];
Color[model] = function (...arguments_) {
let color = arguments_[0];
if (typeof color === 'number') {
color = zeroArray(args, channels);
color = zeroArray(arguments_, channels);
}

return new Color(color, model);
Expand All @@ -446,7 +446,7 @@ function getset(model, channel, modifier) {
model = Array.isArray(model) ? model : [model];

for (const m of model) {
(limiters[m] || (limiters[m] = []))[channel] = modifier;
(limiters[m] ||= [])[channel] = modifier;
}

model = model[0];
Expand Down Expand Up @@ -493,4 +493,4 @@ function zeroArray(array, length) {
return array;
}

module.exports = Color;
export default Color;
Loading
点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载