JavaScript库,用于支持CSS颜色字符串的颜色转换和操作,引用自color
构造
var color = $api.color('rgb(255, 255, 255)')
var color = $api.color({r: 255, g: 255, b: 255})
var color = $api.color.rgb(255, 255, 255)
var color = $api.color.rgb([255, 255, 255])
Set the values for individual channels with alpha
, red
, green
, blue
, hue
, saturationl
(hsl), saturationv
(hsv), lightness
, whiteness
, blackness
, cyan
, magenta
, yellow
, black
String constructors are handled by color-string
Getters
color.hsl();
Convert a color to a different space (hsl()
, cmyk()
, etc.).
color.object(); // {r: 255, g: 255, b: 255}
Get a hash of the color value. Reflects the color's current model (see above).
color.rgb().array() // [255, 255, 255]
Get an array of the values with array()
. Reflects the color's current model (see above).
color.rgbNumber() // 16777215 (0xffffff)
Get the rgb number value.
color.red() // 255
Get the value for an individual channel.
CSS 字符串
color.hsl().string() // 'hsl(320, 50%, 100%)'
Calling .string()
with a number rounds the numbers to that decimal place. It defaults to 1.
亮度
color.luminosity(); // 0.412
The WCAG luminosity of the color. 0 is black, 1 is white.
color.contrast(Color("blue")) // 12
The WCAG contrast ratio to another color, from 1 (same color) to 21 (contrast b/w white and black).
color.isLight(); // true
color.isDark(); // false
Get whether the color is "light" or "dark", useful for deciding text color.
操作
color.negate() // 取反 rgb(0, 100, 255) -> rgb(255, 155, 0)
color.lighten(0.5) // 提升亮度 hsl(100, 50%, 50%) -> hsl(100, 50%, 75%)
color.darken(0.5) // 降低亮度 hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)
color.saturate(0.5) // 提升饱和度 hsl(100, 50%, 50%) -> hsl(100, 75%, 50%)
color.desaturate(0.5) // 降低饱和度 hsl(100, 50%, 50%) -> hsl(100, 25%, 50%)
color.grayscale() // 灰度 #5CBF54 -> #969696
color.whiten(0.5) // 变白 hwb(100, 50%, 50%) -> hwb(100, 75%, 50%)
color.blacken(0.5) // 变黑 hwb(100, 50%, 50%) -> hwb(100, 50%, 75%)
color.fade(0.5) // 降低透明度 rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
color.opaquer(0.5) // 提升透明度 rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 1.0)
color.rotate(180) // 旋转 hsl(60, 20%, 20%) -> hsl(240, 20%, 20%)
color.rotate(-90) // 旋转 hsl(60, 20%, 20%) -> hsl(330, 20%, 20%)
color.mix(Color("yellow")) // 混合 cyan -> rgb(128, 255, 128)
color.mix(Color("yellow"), 0.3) // 混合 cyan -> rgb(77, 255, 179)
// 链式调用
color.green(100).grayscale().lighten(0.6)