https://github.com/waterbeside/colorsea
A color tool library written in Typescript, you can use it for color space conversion, color manipulation, and color difference query. Support X11, Chinese traditional color, Nippon color color name query. 一个使用Typescript编写的颜色工具库，你可以使用此进行颜色空间的转换、颜色操作、以及色差查询。支持X11、中国传统色、Nippon color颜色名查询
https://github.com/waterbeside/colorsea
chinese-color color colorconverter deltae hex hsl lab nipponcolor rgb typescript x11
Last synced: 20 days ago
JSON representation
A color tool library written in Typescript, you can use it for color space conversion, color manipulation, and color difference query. Support X11, Chinese traditional color, Nippon color color name query. 一个使用Typescript编写的颜色工具库，你可以使用此进行颜色空间的转换、颜色操作、以及色差查询。支持X11、中国传统色、Nippon color颜色名查询
- Host: GitHub
- URL: https://github.com/waterbeside/colorsea
- Owner: waterbeside
- License: mit
- Created: 2022-12-13T08:01:42.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-22T10:41:32.000Z (11 months ago)
- Last Synced: 2025-04-20T01:33:05.906Z (about 1 month ago)
- Topics: chinese-color, color, colorconverter, deltae, hex, hsl, lab, nipponcolor, rgb, typescript, x11
- Language: TypeScript
- Homepage: https://colorsea.js.org
- Size: 1.35 MB
- Stars: 17
- Watchers: 1
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# COLORSEA
[For detailed documents, please click here](https://colorsea.js.org)
[English](./README.md) | [简体中文](./README.zh-CN.md)
## About
**colorsea.js** is a tiny color tool library written in `Typescript`.
- You can use it to convert color spaces (`RGB`, `HSL`, `HSV`, `HSI`, `HWB`, `XYZ`, `LAB`, `LCH`, `xyY`),
- Adjust the color like LESS/SASS, such as `darken`/`lighten`, `saturate`/`desaturate`, `spin`, `fadeIn`/`fadeOut`, `mix` and other methods, easy to use.
- Support `CMC(l:c)`, `CIE2000`, `CIE1994`, `CIE1976` color difference queries.
- Support to use `X11`, `Chinese Traditional Color`, `Japanese Traditional Color` types of color names to get the color
## Quick Start
### Installation
```bash
npm install colorsea
```
### Import & Use
#### Import
ES Module
```typescript
import colorsea from 'colorsea'
```
CommonJs
```javascript
const colorsea = require('colorsea')
```
Browser
```html:no-line-numbers
```
#### Color space conversion
```typescript
// ----- color conversion
colorsea('#ff0000').rgb() // [255, 0, 0]
colorsea('#ff0000', 50).rgba() // [255, 0, 0, 50]
// The colorsea() function can create a Color instance
const color = colorsea('#405060')
color.rgba() // [255, 0, 0, 50]
color.xyz() // [7.09, 7.67, 12.17]
color.lab() // [33.29, -1.94, -11.36]
// Convert from other color spaces
colorsea.xyz(7.09, 7.67, 12.17).rgb() // [64, 80, 96]
colorsea.hsl(210, 20, 31.37).rgb() // [64, 80, 96]
// ... Other color spaces are similar
```
#### Color operations
```typescript
// ---- Color operations
const color = colorsea('#ffffff')
const newColor = color.darken(10) // All operations will return a new Color instance object
newColor.hex() // #e6e6e6
colorsea('#000').lighten(10).hex() // #1a1a1a
colorsea('#ff0000').spin(180).hex() // #00ffff
colorsea.hsl(80, 90, 20).saturate(10).hsl() // [80, 100, 20]
colorsea.hsl(80, 90, 20).desaturate(10).hsl() // [80, 80, 20]
colorsea('#776600').fadeOut(10).rgba() // [119, 102, 0, 90]
const color1 = new Color('#ff0000')
const color2 = new Color('#0000ff')
const color = color1.mix(color2, 20)
color.hex() // #cc0033
```
#### Color difference calculation
```typescript
const color1 = colorsea.lab(80, 30, 120) // Standard color (reference color)
const color2 = colorsea.lab(79, 28, 100) // Sample color
// CMC(1:1)
color1.deltaE(color2, 'CMC') // 5.754...
// CMC(2:1) formula, just set the weight factor l to 2 (c defaults to 1)
color1.deltaE(color2, 'CMC', { l: 2 }) // 5.719...
// CIE2000
color1.deltaE(color2, 'CIE2000') // 3.6815...
// CIE1994
color1.deltaE(color2, 'CIE1994') // 3.3725...
// CIE1976
color1.deltaE(color2, 'CIE1976') // 20.1246...
```
### Use color names
```typescript
import colorsea from 'colorsea'
import x11 from 'colorsea/colors/x11'
// Load X11 color names
colorsea.useNames(x11)
// At this point you can directly use the X11 color name to create the color instance
colorsea('Aqua') // color: #00ffff
colorsea('Aquamarine') // color: #7fffd4
```
```typescript
import chinese from 'colorsea/colors/chinese' // Chinese traditional color
import nippon from 'colorsea/colors/nippon' // Japanese traditional color
// load both
colorsea.useNames(chinese).useNames(nippon)
// use
colorsea('山梗紫') // color: #61649F
colorsea('水がき') // color: #B9887D
```
For more detailed usage, please refer to the documentation: [https://colorsea.js.org](https://colorsea.js.org/)
## Reference
- [ https://github.com/sass/dart-sass/](https://github.com/sass/dart-sass/)
- [http://brucelindbloom.com/](http://brucelindbloom.com/)
- [https://www.w3.org/TR/AERT/#color-contrast](https://www.w3.org/TR/AERT/#color-contrast)
- [https://www.w3.org/TR/AERT/#color-contrast](https://www.w3.org/TR/AERT/#color-contrast)
- [x11: https://www.w3.org/TR/css-color-3/#svg-color](https://www.w3.org/TR/css-color-3/#svg-color)
- [中国传统色: http://zhongguose.com/](http://zhongguose.com/)
- [Nippon color names: https://nipponcolors.com/](https://nipponcolors.com/)