https://github.com/guoyunhe/fastcolor
Color class for modern browser
https://github.com/guoyunhe/fastcolor
Last synced: 3 months ago
JSON representation
Color class for modern browser
- Host: GitHub
- URL: https://github.com/guoyunhe/fastcolor
- Owner: guoyunhe
- License: mit
- Created: 2024-06-15T06:56:25.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-16T06:42:13.000Z (about 1 year ago)
- Last Synced: 2025-03-12T06:11:11.109Z (3 months ago)
- Language: TypeScript
- Size: 2.22 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# fastcolor
Color class 2~4x faster than `@ctrl/cinycolor`. Can be a drop-in replacement for `@ctrl/tinycolor`, with the follwing differences:
- Don't support CSS color names, like `'darkgreen'`, `'orange'`. This helps reduce bundle size.
- Don't support CMYK as input and output formats (almost no use case in web apps). This helps reduce bundle size and improve performance.
```
npm install --save fastcolor
```
## Constructor
```js
import { FastColor } from 'fastcolor';
new FastColor('#6cf');
new FastColor('#66ccff');
new FastColor('#66ccff88');
new FastColor('rgba(102, 204, 255)');
new FastColor('rgba(102, 204, 255, .5)');
new FastColor('hsl(200, 60%, 75%)');
new FastColor('hsla(200, 60%, 75%, 50%)');
new FastColor({ r: 103, g: 204, b: 255, a: 0.5 });
new FastColor({ h: 200, s: 0.6, l: 0.75 });
```
## Clone
```js
import { FastColor } from 'fastcolor';
const color1 = new FastColor('#66ccff');
const color2 = color1.clone();
// you can also do
const color3 = new FastColor(color2);
```
## Brightness
Returns the perceived brightness of the color, between 0 and 255. See http://www.w3.org/TR/AERT#color-contrast
If brightness is less than 128, the color is dark. Otherwise, it is light color.
```js
import { FastColor } from 'fastcolor';
const color = new FastColor('#66ccff');
color.getBrightness();
// 179.316
color.isDark();
// false
color.isLight();
// true
```
## Lightness
Lightness value between 0 and 1.
```js
import { FastColor } from 'fastcolor';
const color = new FastColor('#66ccff');
color.getLightness();
// 0.697265625
color.darken(10);
color.lighten(5);
```
## Alpha
Lightness value between 0 and 1.
```js
import { FastColor } from 'fastcolor';
const color = new FastColor('#66ccff');
color.setAlpha(0.67);
```
## onBackground
```js
import { FastColor } from 'fastcolor';
const color = new FastColor('#66ccffaa');
const background = new FastColor('#000000');
const mixed = color.onBackground(background);
// rgb(68,136,170)
```