# css-color-parser

**Repository Path**: roman_123/css-color-parser

## Basic Information

- **Project Name**: css-color-parser
- **Description**: css color parser
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-11-29
- **Last Updated**: 2026-01-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# css-color-parser-h
 ![QQ](https://img.shields.io/badge/QQ-306863030-green.svg) [![Git](https://img.shields.io/badge/GIT-roman_123-blue.svg)](https://gitee.com/roman_123/css-color-parser/tree/master) [![NPM](https://img.shields.io/badge/NPM-roman_123-blue.svg)](https://www.npmjs.com/package/css-color-parser-h) ![HOME](https://img.shields.io/badge/HOME-css--color--parser-orange.svg)

> A tool for parsing css color

## Setup

### Node

```shell
npm install --save css-color-parser-h
```

### Browser

```html
<script src="./dist/css-color-parser-h.umd.js"></script>
```

## Usage

You can then use it as a window global or as an CommonJs module

```js
// plain javascript in browser
new Parser.CssColorParserPlus(255,255,255,1)

// commonJs
const {CssColorParserPlus} = require('css-color-parser-h')

// es6 module 使用ES6模块，需要在项目中集成webpack等打包工具
/**
 * If you want to use this library by esm, you must ensure that your project 
 * has used webpack, vite, rollup or other packaging tools.
 */
import {CssColorParserPlus} from 'css-color-parser-h'

//parse from '#4c90f0cc' to: CssColorParser { r: 76, g: 144, b: 240, a: 0.8 }
CssColorParserPlus.parseColor('#4c90f0cc')
/**
 * 方法总览
 * */
// CssColorParser类
// 实例方法
import { CssColorParserPlus } from 'css-color-parser-h'
const colorParser = new CssColorParserPlus()
// 设置输出值的精度
colorParser.setOutPrecision(colorPrecision: number, outAlphaPrecision: number): CssColorParserPlus
colorParser.setColor(red?: number | string,green?: number | string,blue?: number | string,alpha?: number | string): CssColorParserPlus
colorParser.setAlpha(alpha?: number | string): CssColorParserPlus
colorParser.setRed(red?: number | string): CssColorParserPlus
colorParser.setGreen(green?: number | string): CssColorParserPlus
colorParser.setBlue(blue?: number | string): CssColorParserPlus
// 设置反色
colorParser.setInvert(): CssColorParserPlus
colorParser.toRGBA(): string
colorParser.toHEX(): string
// 获取反色的值（输出一个新的实例）
colorParser.toInvert(): CssColorParserPlus
colorParser.toString(): string
colorParser.toNormalize(): ColorJson
colorParser.toArray(): number[]
colorParser.toJson(): ColorJson
// 颜色相加
colorParser.add(colorParser: CssColorParserPlus, isSetAlpha?: boolean): CssColorParserPlus;
// 颜色相减
colorParser.subtract(colorParser: CssColorParserPlus, isSetAlpha?: boolean): CssColorParserPlus;
// 颜色相乘
colorParser.multiply(colorParser: CssColorParserPlus, isSetAlpha?: boolean): CssColorParserPlus;
// 颜色相除
colorParser.divide(colorParser: CssColorParserPlus, isSetAlpha?: boolean): CssColorParserPlus;
// 颜色乘以一个数值
colorParser.multiplyByScalar(scalar: number, isSetAlpha?: boolean): CssColorParserPlus;
// 颜色除以一个数值
colorParser.divideByScalar(scalar: number, isSetAlpha?: boolean): CssColorParserPlus;
// 颜色RGB属性加上一个数值
colorParser.addNumberForRGB(num: number): CssColorParserPlus;
// 颜色透明度属性加上一个数值
colorParser.addNumberForAlpha(num: number): CssColorParserPlus;
colorParser.clone():CssColorParserPlus
colorParser.equals(color: CssColorParserPlus):boolean
// 将颜色限制在0-255之间
colorParser.limitColor(): CssColorParserPlus
// 静态方法
CssColorParserPlus.parseKeyWord(v: string): CssColorParserPlus
CssColorParserPlus.parseHEX(v: string): CssColorParserPlus
CssColorParserPlus.parseRGBA(v: string): CssColorParserPlus
CssColorParserPlus.parseHSLA(v: string): CssColorParserPlus
CssColorParserPlus.parseHWB(v: string)
CssColorParserPlus.parseColor(v: string|CssColorParser): CssColorParserPlus
CssColorParserPlus.parseCssColorStr(v: string): CssColorParserPlus
CssColorParserPlus.fromHSL(h: number, s: number, l: number, a?: number): CssColorParserPlus
CssColorParserPlus.fromHWB(h: number, w: number, b: number, a?: number)
CssColorParserPlus.fromRandom(color1: string | CssColorParser,color2: string | CssColorParser): CssColorParserPlus
CssColorParserPlus.fromJson(json: ColorJson): CssColorParserPlus
CssColorParserPlus.fromArray(color: Array<number>): CssColorParserPlus
CssColorParserPlus.fromNormalize(colorArr: [number, number, number, number]): CssColorParserPlus;
// 计算颜色插值
CssColorParserPlus.lerp(opt: ColorLerpOpt, value: number): CssColorParserPlus
```

## Example

```js
import { CssColorParserPlus } from 'css-color-parser-h'

CssColorParserPlus.parseHEX('#FFF')
CssColorParserPlus.parseRGBA('rgba(255,255,255,1)')
CssColorParserPlus.fromJson({r: 255, g: 255, b: 255, a: 1})
CssColorParserPlus.fromArray([255,255,255,1])
CssColorParserPlus.parseColor('blue') // CssColorParser { r: 0, g: 0, b: 255, a: 1 }
CssColorParserPlus.parseColor('blue').toHEX() // #0000ff
CssColorParserPlus.parseColor('blue').toRGBA() // rgb(0,0,255)
CssColorParserPlus.parseColor('rgba(76,144,240,0.8)') // CssColorParser { r: 76, g: 144, b: 240, a: 0.8 }
CssColorParserPlus.parseColor('rgba(76 144 240 / 80%)') // CssColorParser { r: 76, g: 144, b: 240, a: 0.8 }
CssColorParserPlus.parseColor('rgb(76 144 240)') // CssColorParser { r: 76, g: 144, b: 240, a: 1 }
CssColorParserPlus.parseColor('rgb(76,144,240)') // CssColorParser { r: 76, g: 144, b: 240, a: 1 }
CssColorParserPlus.parseColor('#4c90f0') // CssColorParser { r: 76, g: 144, b: 240, a: 1 }
CssColorParserPlus.parseColor('#4c90f0cc') // CssColorParser { r: 76, g: 144, b: 240, a: 0.8 }
CssColorParserPlus.parseColor('#ccc') // CssColorParser { r: 204, g: 204, b: 204, a: 1 }
CssColorParserPlus.parseColor('hsl(215 85% 62% / 0.8)') // CssColorParser { r: 76, g: 144, b: 240, a: 0.8 }
CssColorParserPlus.parseColor('hsla(215,85%,62%,0.8)') // CssColorParser { r: 76, g: 144, b: 240, a: 0.8 }
CssColorParserPlus.parseColor('hwb(215deg 30% 6% / 80%)') // CssColorParser { r: 77, g: 145, b: 240, a: 0.8 }
CssColorParserPlus.parseRGBA('rgba(76 144 240 / 80%)') // CssColorParser {r: 76, g: 144, b: 240, a: 0.8}
// 随机生成颜色
CssColorParserPlus.fromRandom('blue', 'red').toRGBA() // rgb(4,0,34)
CssColorParserPlus.fromRandom('blue', '#ccffbbaa').toRGBA() // rgba(127,128,239,0.92)
CssColorParserPlus.fromRandom(new CssColorParser(205,205,100,0.5), '#ccffbbaa').toRGBA() // rgba(205,211,152,0.53)
CssColorParserPlus.fromRandom(CssColorParserPlus.fromArray([205,205,100,0.5]), '#ccffbbaa').toRGBA() // rgba(205,235,131,0.62)
// 颜色相加
const colorParser = new CssColorParserPlus(0,20,0,1)
colorParser.toHEX()
colorParser.add('red').toRGBA() // rgb(255,20,0)
// 计算
const res = CssColorParserPlus.parseColor('#000').add('red').subtract('rgba(10,20,30,0.5)').toRGBA()
console.log(res)
// 归一化
CssColorParserPlus.fromArray([100, 200, 0, 0.552]).toNormalize() // { r: 0.39, g: 0.78, b: 0, a: 0.55 }
// 计算插值
CssColorParserPlus.lerp({0: "rgba(255, 255, 0, 1)",0.5: "rgba(0, 255, 0, 1)", 1: "rgba(255, 0, 0, 1)"}, 0.8) // CssColorParser { r: 153, g: 102, b: 0, a: 1 }
```