颜色工具 | Quasar 中文网

颜色工具

Quasar 提供了一组实用的函数，可在大多数用例中轻松操作颜色，而无需集成专用库的高昂额外成本。

¥Quasar provides a set of useful functions to manipulate colors easily in most use cases, without the high additional cost of integrating dedicated libraries.

提示

有关 UMD 构建的使用方法，请参阅此处。

¥For usage with the UMD build see here.

颜色转换(Color Conversion)

¥Color Conversion

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

¥These functions take a color as string or Object and convert it to another format.

函数	源代码格式	目标格式	描述
`rgbToHex`	对象	字符串	将 RGB/A 颜色对象 (`{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}`) 转换为其 HEX/A 表示形式的字符串 (`#RRGGBB<AA>`)。如果原始对象中存在 Alpha 通道，则输出中也会存在 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 通道，则输出中也会存在 Alpha 通道。
`hexToRgb`	字符串	对象	将 HEX/A 颜色字符串 (`#RRGGBB<AA>`) 转换为其 RGB/A 表示形式的对象 (`{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}`)。如果原始对象中存在 Alpha 通道，则输出中也会存在 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 通道，则输出中也会存在 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 通道，则输出中也会存在 Alpha 通道。

颜色处理(Color Processing)

¥Color Processing

这些函数会更改颜色或提取特定信息。

¥These functions perform changes on the color or extract specific information.

变亮（颜色，百分比）(lighten (color, percent))

¥lighten (color, percent)

如果 percent 为正，则使 color 变亮；如果 percent 为负，则使 color 变暗。

¥Lighten the color (if percent is positive) or darken it (if percent is negative).

接受 HEX/A 字符串或 RGB/A 字符串作为 color，接受 percent（0 到 100 或 -100 到 0）的亮/暗效果应用于 color。返回计算出的 color 的十六进制字符串表示形式。

¥Accepts a HEX/A String or a RGB/A String as color and a percent (0 to 100 or -100 to 0) of lighten/darken to be applied to the color. Returns a HEX String representation of the calculated color.

亮度（颜色）(luminosity (color))

¥luminosity (color)

计算 color 的相对亮度。

¥Calculates the relative luminance of the color.

接受 HEX/A 字符串、RGB/A 字符串或 RGB/A 对象作为 color。返回介于 0 到 1 之间的值。

¥Accepts a HEX/A String, a RGB/A String or a RGB/A Object as color. Returns a value between 0 and 1.

brightness (color)(brightness (color))

计算 color 的颜色对比度。

¥Calculates the color contrast of the color.

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

¥Accepts a HEX/A String, a RGB/A String or a RGB/A Object as color. Returns a value between 0 and 255. A value of < 128 would be considered a dark color.

blend (fgColor, bgColor)(blend (fgColor, bgColor))

计算两种颜色的 blend。

¥Calculates the blend of two colors.

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

¥Accepts a HEX/A String or a RGB/A Object as fgColor / bgColor. If the alpha channel of the fgColor is completely opaque, then the result will be the fgColor. If the alpha channel of the bgColor is completely opaque, then the resulting blended color will also be opaque. Returns the same type as input for fgColor.

changeAlpha (color, offset)(changeAlpha (color, offset))

增加或减少字符串颜色的 Alpha 值。

¥Increments or decrements the alpha of a string color.

接受 HEX/A 字符串作为 color，接受 -1 到 1 之间的数字（包括边缘）作为 offset。使用负值减少，使用正数增加（例如：changeAlpha('#ff0000', -0.1) 将 alpha 值减少 10%）。返回十六进制/A 字符串。

¥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(Helper - getPaletteColor)

¥Helper - getPaletteColor

你可以在 JS 上下文中查询任何品牌颜色、调色板颜色或自定义颜色，以获取其十六进制字符串值。请注意，以下方法运行成本较高，请谨慎使用：

¥You can query any brand color, palette color or custom color in JS context to get its hex string value. Note that the method below is not cheap to run, so use it with care:

import { colors } from 'quasar'

const { getPaletteColor } = colors

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

假设你已经创建了自定义颜色并将其命名为 “my-color”，然后你可以在 JS 中提取它的值：

¥Assuming you’ve created a custom color and named it “my-color”, then you can extract its value in JS:

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

1. Introduction

2. 颜色转换(Color Conversion)

3. 颜色处理(Color Processing)

3.1. 变亮（颜色，百分比）(lighten (color, percent))

3.2. 亮度（颜色）(luminosity (color))

3.3. brightness (color)(brightness (color))

3.4. blend (fgColor, bgColor)(blend (fgColor, bgColor))

3.5. changeAlpha (color, offset)(changeAlpha (color, offset))

4. 助手 - getPaletteColor(Helper - getPaletteColor)