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 Parser = 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 Parser from 'css-color-parser-h'

//parse from '#4c90f0cc' to: CssColorParser { r: 76, g: 144, b: 240, a: 0.8 }
Parser.fromColorStr('#4c90f0cc')
/**
 * 方法总览
 * */
// 静态方法
import Parser from 'css-color-parser-h'
Parser.parseKeyWord(v: string): CssColorParser
Parser.parseHEX(v: string): CssColorParser
Parser.parseRGBA(v: string): CssColorParser
Parser.parseHSLA(v: string): CssColorParser
Parser.parseHWB(v: string)
Parser.fromColorStr(v: string): CssColorParser
Parser.fromHSL(h: number, s: number, l: number, a?: number): CssColorParser
Parser.fromHWB(h: number, w: number, b: number, a?: number)
Parser.fromRandom(color1: string | CssColorParser,color2: string | CssColorParser): CssColorParser
Parser.fromJson(json: ColorJson): CssColorParser
Parser.fromArray(color: Array<number>): CssColorParser
// 实例方法
import { CssColorParser } from 'css-color-parser-h'
const parser = new CssColorParser()
parser.setColor(red?: number | string,green?: number | string,blue?: number | string,alpha?: number | string)
parser.toRGBA(): string
parser.toHEX(): string
parser.toString(): string
parser.toNormalize(): ColorJson
parser.toArray(): number[]
parser.toJson(): ColorJson
parser.clone():CssColorParser
parser.equals(color):boolean

Example

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

// 归一化
Parser.fromArray([100, 200, 0, 0.552]).toNormalize() // { r: 0.39, g: 0.78, b: 0, a: 0.55 }