Quasar 提供了一组有用的函数，可在大多数情况下轻松地操作颜色，而无需高昂的集成专用库的额外成本。
提示
有关 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)
如果 percent 为正，则使 color 变亮；如果 percent 为负，则使 color 变暗。
接受 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 之间的值。
brightness (color)
计算 color 的颜色对比度。
接受 HEX/A 字符串、RGB/A 字符串或 RGB/A 对象作为 color。返回介于 0 和 255 之间的值。小于 128 的值被认为是深色。
blend (fgColor, bgColor)
计算两种颜色的混合。
接受 HEX/A 字符串或 RGB/A 对象作为 fgColor / bgColor。如果 fgColor 的 alpha 通道完全不透明，则结果将是 fgColor。如果 bgColor 的 alpha 通道完全不透明，则生成的混合颜色也将不透明。返回与 fgColor 输入类型相同的类型。
changeAlpha (color, offset)
增加或减少字符串颜色的 alpha。
接受 HEX/A 字符串作为 color，以及 -1 到 1 之间的数字（包括边缘）作为 offset。使用负值减少，使用正值增加（例如：changeAlpha('#ff0000', -0.1) 将 alpha 减少 10%）。返回 HEX/A 字符串。
助手 - 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')) // '#...'