css-color-parser-h

css-color-parser

A tool for parsing css color

Setup

Node

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

Browser

<script src="./dist/css-color-parser.min.js"></script>

Usage

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

// plain javascript in browser
new Parser.CssColorParser(255,255,255,1)

// commonJs
const { CssColorParser } = 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 { CssColorParser } from 'css-color-parser-h'

Example

CssColorParser.parseCssColorString('blue') // CssColorParser { r: 0, g: 0, b: 255, a: 1 }
CssColorParser.parseCssColorString('rgba(76,144,240,0.8)') // CssColorParser { r: 76, g: 144, b: 240, a: 0.8 }
CssColorParser.parseCssColorString('rgba(76 144 240 / 80%)') // CssColorParser { r: 76, g: 144, b: 240, a: 0.8 }
CssColorParser.parseCssColorString('rgb(76 144 240)') // CssColorParser { r: 76, g: 144, b: 240, a: 1 }
CssColorParser.parseCssColorString('rgb(76,144,240)') // CssColorParser { r: 76, g: 144, b: 240, a: 1 }
CssColorParser.parseCssColorString('#4c90f0') // CssColorParser { r: 76, g: 144, b: 240, a: 1 }
CssColorParser.parseCssColorString('#4c90f0cc') // CssColorParser { r: 76, g: 144, b: 240, a: 0.8 }
CssColorParser.parseCssColorString('#ccc') // CssColorParser { r: 204, g: 204, b: 204, a: 1 }
CssColorParser.parseCssColorString('hsl(215 85% 62% / 0.8)') // CssColorParser { r: 76, g: 144, b: 240, a: 0.8 }
CssColorParser.parseCssColorString('hsla(215,85%,62%,0.8)') // CssColorParser { r: 76, g: 144, b: 240, a: 0.8 }
CssColorParser.parseCssColorString('hwb(215deg 30% 6% / 80%)') // CssColorParser { r: 77, g: 145, b: 240, a: 0.8 }
CssColorParser.parseRGBA('rgba(76 144 240 / 80%)') // CssColorParser {r: 76, g: 144, b: 240, a: 0.8}
// 随机生成颜色
CssColorParser.fromRandom('blue', 'red').toCssColorString() // rgb(4,0,34)
CssColorParser.fromRandom('blue', '#ccffbbaa').toCssColorString() // rgba(127,128,239,0.92)
CssColorParser.fromRandom(new CssColorParser(205,205,100,0.5), '#ccffbbaa').toCssColorString() // rgba(205,211,152,0.53)
CssColorParser.fromRandom(CssColorParser.fromArray([205,205,100,0.5]), '#ccffbbaa').toCssColorString() // rgba(205,235,131,0.62)

// 归一化
CssColorParser.fromJson({
	r: 100,
	g: 200,
	b: 0,
	a: 0.552
}).toNormalize() // { r: 0.39, g: 0.78, b: 0, a: 0.55 }

/**
 * 方法总览
 * */
// 静态方法
parseKeyWord(v: string): CssColorParser
parseHEX(v: string): CssColorParser
parseRGBA(v: string): CssColorParser
parseHSLA(v: string): CssColorParser
parseHWB(v: string)
parseCssColorString(v: string): CssColorParser
fromHSL(h: number, s: number, l: number, a?: number): CssColorParser
fromHWB(h: number, w: number, b: number, a?: number)
fromRandom(color1: string | CssColorParser,color2: string | CssColorParser): CssColorParser
fromJson(json: ColorJson): CssColorParser
fromArray(color: Array<number>): CssColorParser
// 实例方法
setColor(red?: number | string,green?: number | string,blue?: number | string,alpha?: number | string)
toCssColorString(): string
toCssHexString(): string
toString(): string
toNormalize(): ColorJson
toArray(): number[]
toJson(): ColorJson
clone():CssColorParser
equals(color):boolean