颜色实用程序

Quasar提供了一组有用的功能,可以在大多数使用情况下轻松操作颜色,而没有集成专用库的较高额外成本。

TIP

有关UMD版本的使用,请参见此处.

颜色转换

这些函数将颜色作为字符串或对象并将其转换为另一种格式。

函数源格式目的地格式说明
rgbToHex对象字符串将RGB/A颜色对象({ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>})转换为HEX/A作为字符串的表示(#RRGGBB<AA>)。如果Alpha通道出现在原始对象中,它也将出现在输出中。
rgbToHsv对象对象将RGB/A颜色对象({ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>})转换为HSV/A作为对象的表示({ h: [0-360], s: [0-100], v: [0-100}, a: [0-100]})。如果Alpha通道出现在原始对象中,它也将出现在输出中。
hexToRgb字符串对象将HEX/A颜色字符串(#RRGGBB <AA>)转换为其RGB/A表示形式({ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>})。如果Alpha通道出现在原始对象中,它也将出现在输出中。
textToRgb字符串对象将HEX/A颜色字符串(#RRGGBB <AA>)或RGB/A颜色字符串(rgb(R,G,B <,A>))转换为它的RGB/A表示形式({ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>})。如果Alpha通道出现在原始对象中,它也将出现在输出中。
hsvToRgb字符串对象将HSV/A颜色对象({ h: [0-360], s: [0-100], v: [0-100}, a: [0-100]})转换为RGB/A表示作为对象的表示({r:[0-255],g:[0-255],b:[0-255} <,a:[0-100]>})。如果Alpha通道出现在原始对象中,它也将出现在输出中。

颜色处理

这些功能对颜色进行更改或提取特定信息。

lighten (color, percent)

使color变亮(如果percent为正值)或使其变暗(如果percent为负值)。

一个HEX/A字符串或RGB/A字符串表示的color参数和一个应用于color的变亮/变暗的percent(0至100或-100至0)参数。 返回经计算过的color的HEX字符串表示形式。

luminosity (color)

计算color相对亮度

一个HEX/A字符串、RGB/A字符串或RGB/A对象表示的“color”参数。 返回0到1之间的值。

亮度(颜色)

计算color颜色对比

接受HEX/A字符串、RGB/A字符串或RGB/A对象作为color。 返回0到255之间的值。小于128的值将被视为深色。

blend (fgColor, bgColor)

计算两种颜色的blend.

接受HEX/A字符串或RGB/A对象作为fgColor/bgColor。 如果fgColor的alpha通道是完全不透明的,那么结果将是fgColor。 如果bgColor的Alpha通道是完全不透明的,那么生成的混合颜色也将是不透明的。 返回与fgColor的输入相同的类型。

changeAlpha (color, offset)

Increments or decrements the alpha of a string color.

Accepts a HEX/A String as color and a number between -1 and 1 (including edges) as offset. Use a negative value to decrement and a positive number to increment (ex: changeAlpha('#ff0000', -0.1) to decrement alpha by 10%). Returns HEX/A String.

助手方法 - getPaletteColor

您可以在JS上下文中查询任何品牌颜色、调色板颜色或自定义颜色以获取其十六进制字符串值。请注意,下面的方法运行起来并非不耗性能,因此请谨慎使用:

import { colors } from 'quasar'

const { getPaletteColor } = colors

console.log(getPaletteColor('primary')) // '#1976d2'
console.log(getPaletteColor('red-2')) // '#ffcdd2'

假设您已经创建了一个自定义颜色并将其命名为“my color”,那么您可以在JS中提取它的值:

console.log(getPaletteColor('my-color')) // '#...'