Quasar 提供了一組實用的函式，可以在大多數情況下輕鬆地操作色彩，而無需整合專用函式庫而產生額外的高成本。
提示
若要搭配 UMD 建置使用，請參閱這裡。
色彩轉換
這些函式接受字串或物件形式的色彩，並將其轉換為另一種格式。
| 函式 | 來源格式 | 目標格式 | 描述 |
|---|---|---|---|
rgbToHex | 物件 | 字串 | 將 RGB/A 色彩物件 ({ r: [0-255], g: [0-255], b: [0-255]<, a: [0-100]>}) 轉換為 HEX/A 字串表示形式 (#RRGGBB)。如果原始物件中存在 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) 轉換為 RGB/A 物件表示形式 ({ r: [0-255], g: [0-255], b: [0-255]<, a: [0-100]>})。如果原始物件中存在 Alpha 通道，則輸出中也會存在。 |
textToRgb | 字串 | 物件 | 將 HEX/A 色彩字串 (#RRGGBB) 或 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 之間的值。
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')) // '#...'