颜色实用程序 | Quasar Framework 中文网

颜色实用程序

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')) // '#...'