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

帮助Tree-Shake

你会注意到所有的例子都从Quasar导入colors对象。 但是，如果您只需要一种方法，那么您可以使用ES6解构来帮助Tree Shaking嵌入该方法而不是所有的colors。

setBrand（）示例：

// 我们导入所有的`colors`
import { colors } from 'quasar'
// 解构只保留需要的东西
const { setBrand } = colors

setBrand('primary', '#f33')

颜色转换

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

颜色处理

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

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)

v1.7.1+

计算两种颜色的blend.

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

changeAlpha (color, offset)

v1.7.2+

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.

品牌(Brand)颜色的动态变化（动态主题颜色）

您可以在运行时动态定制品牌颜色： primary, secondary, accent, dark, positive, negative, info, warning。这意味着您可以使用默认颜色主题构建应用程序的一个构建版本，但显示时使用运行时所选的一个。

主要颜色配置使用存储在根元素（:root）中的CSS自定义属性完成。每个属性的名称都是--q-color-${name}（例如：--q-color-primary，--q-color-secondary），并且应该具有有效的CSS颜色作为值。

CSS自定义属性使用与普通CSS相同的继承规则，因此只能重新定义所需的颜色，其余的将从父元素继承。

推荐的工作流程是在html（document.documentElement）或body（document.body）元素上设置自定义的颜色属性。这将允许您通过删除自定义颜色来恢复为默认颜色。

有关CSS自定义属性（变量）的更多信息：http://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

辅助方法 - setBrand

在colors实用程序中，Quasar提供了一个辅助方法用于设置自定义颜色：setBrand(colorName,colorValue[,element])

使用辅助方法设置品牌颜色的示例：

import { colors } from 'quasar'

colors.setBrand('info', '#DDD')
colors.setBrand('primary', '#33F')
colors.setBrand('primary', '#F33', document.getElementById('rebranded-section-id'))

辅助方法还将负责为品牌颜色设置相关的自定义属性，所以这是推荐的使用方式，而不是原始的JavascriptsetProperty（）。

辅助方法 - getBrand

在colors实用程序中，Quasar提供了一个辅助方法，用于获取自定义颜色：getBrand(colorName [,element])

使用辅助方法获取自定义颜色的示例：

import { colors } from 'quasar'

colors.getBrand('primary') // '#33F'
colors.getBrand('primary', document.getElementById('rebranded-section-id'))

这个辅助方法所做的就是包装原始Javascript的getPropertyValue()方法以方便使用。 等同于原始Javascript的示例：

// 等同于原始Javascript中的colors.getBrand（'primary'）：

getComputedStyle(document.documentElement)
  .getPropertyValue('--q-color-primary') // #0273d4

创建动态自定义颜色

您可以使用setBrand和getBrand来定义要在您的应用程序中使用的自定义品牌颜色。 这种新的自定义颜色用法的一个示例：

$primary-darkened = darken($primary, 10%)

:root
  --q-color-primary-darkened $primary-darkened

.text-primary-darkened
  color $primary-darkened !important
  color var(--q-color-primary-darkened) !important
.bg-primary-darkened
  background $primary-darkened !important
  background var(--q-color-primary-darkened) !important

import { colors } from 'quasar'

const { lighten, setBrand } = colors

const newPrimaryColor = '#933'
setBrand('primary', newPrimaryColor)
setBrand('primary-darkened', lighten(newPrimaryColor, -10))

助手方法 - getPaletteColor

v1.10+

您可以在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')) // '#...'