css-color-parser-h

css-color-parser-h

A tool for parsing css color

Setup

Node

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

Browser

<script src="./dist/css-color-parser-h.umd.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) // 轻量版本
new Parser.CssColorParserPlus(255,255,255,1) // 增强版本

// commonJs
const {CssColorParser, 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 {CssColorParser, 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 {CssColorParser} from 'css-color-parser-h'
const colorParser = new CssColorParser()
// 设置输出值的精度
colorParser.setOutPrecision(colorPrecision: number, outAlphaPrecision: number): CssColorParser;
colorParser.setColor(red?: number | string,green?: number | string,blue?: number | string,alpha?: number | string): CssColorParser
colorParser.setAlpha(alpha?: number | string): CssColorParser
colorParser.setRed(red?: number | string): CssColorParser;
colorParser.setGreen(green?: number | string): CssColorParser;
colorParser.setBlue(blue?: number | string): CssColorParser;
// 设置反色
colorParser.setInvert(): CssColorParser;
colorParser.toRGBA(): string
colorParser.toHEX(): string
// 获取反色的值（输出一个新的实例）
colorParser.toInvert(): CssColorParser;
colorParser.toString(): string
colorParser.toNormalize(): ColorJson
colorParser.toArray(): number[]
colorParser.toJson(): ColorJson
// 颜色相加
colorParser.add(colorParser: CssColorParser, isSetAlpha?: boolean): CssColorParser;
// 颜色相减
colorParser.subtract(colorParser: CssColorParser, isSetAlpha?: boolean): CssColorParser;
// 颜色相乘
colorParser.multiply(colorParser: CssColorParser, isSetAlpha?: boolean): CssColorParser;
// 颜色相除
colorParser.divide(colorParser: CssColorParser, isSetAlpha?: boolean): CssColorParser;
// 颜色乘以一个数值
colorParser.multiplyByScalar(scalar: number, isSetAlpha?: boolean): CssColorParser;
// 颜色除以一个数值
colorParser.divideByScalar(scalar: number, isSetAlpha?: boolean): CssColorParser;
// 颜色RGB属性加上一个数值
colorParser.addNumberForRGB(num: number): CssColorParser;
// 颜色透明度属性加上一个数值
colorParser.addNumberForAlpha(num: number): CssColorParser;
colorParser.clone():CssColorParser
colorParser.equals(color: CssColorParser):boolean
// 静态方法
CssColorParser.parseHEX(v: string): CssColorParser
CssColorParser.parseRGBA(v: string): CssColorParser
CssColorParser.fromJson(json: ColorJson): CssColorParser
CssColorParser.fromArray(color: Array<number>): CssColorParser
CssColorParser.fromRandomfromRandom(color1: CssColorParser, color2: CssColorParser): CssColorParser
CssColorParser.fromNormalize(colorArr: [number, number, number, number]): CssColorParser;
/**
 * CssColorParserPlus类 
 * 继承CssColorParser所有方法,增加了一些静态方法，对于加减乘除、随机颜色等方法可以传入颜色字符串进行计算
 * 使用parseColor方法可以解析css颜色格式的字符串
 */
import { CssColorParserPlus } from 'css-color-parser-h'
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

Example

import { CssColorParser } from 'css-color-parser-h'

const colorParser = new CssColorParser(255,255,255,1)
colorParser.toHEX()
CssColorParser.parseHEX('#FFF')
CssColorParser.parseRGBA('rgba(255,255,255,1)')
CssColorParser.fromJson({r: 255, g: 255, b: 255, a: 1})
CssColorParser.fromArray([255,255,255,1])
CssColorParser.fromRandom(new CssColorParser(0,0,0,0), new CssColorParser(255,255,255,1))

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

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(Parser.fromArray([205,205,100,0.5]), '#ccffbbaa').toRGBA() // rgba(205,235,131,0.62)
// 颜色相加
const colorParserPlus = new CssColorParserPlus(0,20,0,1)
colorParserPlus.add('red').toRGBA() // rgb(255,20,0)

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