• ? Github Star: 9.9k^[1]

• ? 官方文檔^[2]

  

Chroma.js 是什么？

Chroma.js， 一個小巧而強(qiáng)大的 JavaScript 庫，為你的色彩帶來無限可能。它以極簡的代碼，解鎖顏色空間轉(zhuǎn)換、動態(tài)漸變生成和智能顏色調(diào)整的大門。

功能特性

• ? 顏色空間轉(zhuǎn)換：Chroma.js 支持包括 RGB、HEX、HSL、HSV、LAB、LCH、XYZ 以及 CMYK 在內(nèi)的顏色空間之間的無縫轉(zhuǎn)換。

• ? 動態(tài)顏色操作：提供了顏色變暗、變亮等動態(tài)調(diào)整功能，以適應(yīng)不同的視覺需求。

• ? 漸變效果生成：能夠創(chuàng)建平滑且吸引人的顏色漸變效果，為數(shù)據(jù)可視化增添視覺吸引力。

• ? 調(diào)色板構(gòu)建：允許用戶構(gòu)建和管理個性化的顏色調(diào)色板，簡化顏色使用流程。

• ? 與 d3.js 的兼容性：Chroma.js 可與流行的數(shù)據(jù)可視化庫 d3.js 無縫集成，擴(kuò)展其功能。

快速開始

通過 npm 包管理器安裝 Chroma.js，或通過在 HTML 文件中引入 CDN 鏈接來快速集成。創(chuàng)建 Chroma 對象并利用其豐富的 API，用戶可以輕松實(shí)現(xiàn)顏色的轉(zhuǎn)換與操作。

npm install chroma-js

Chroma.js 中最基礎(chǔ)的操作包括顏色的創(chuàng)建、轉(zhuǎn)換和其他顏色空間的轉(zhuǎn)換。創(chuàng)建一個 Chroma 對象，然后將其轉(zhuǎn)換為其他顏色格式：

import chroma from "chroma-js"
const color = chroma('#3498db'); // 創(chuàng)建一個顏色對象
console.log(color.hex());       // 輸出: #3498db
console.log(color.rgb());      // 輸出: [52, 152, 219]
console.log(color.hsl());      // 輸出: [204, 0.68, 0.53]

除了顏色轉(zhuǎn)換，Chroma.js 還提供了多種顏色操作方法，比如調(diào)整亮度、混合顏色、生成漸變色等：

let color1 = chroma('#ff0000').brighten(2);  // 提高亮度
let color2 = chroma.mix('#ff0000', '#0000ff'); // 混合紅色和藍(lán)色
console.log(color1.hex());                   // 輸出: 根據(jù)實(shí)際調(diào)整結(jié)果變化
console.log(color2.hex());                   // 輸出: 根據(jù)實(shí)際調(diào)整結(jié)果變化

Chroma.js 還可以生成漂亮的顏色漸變，數(shù)據(jù)可視化比較常用：

let scale = chroma.scale(['white', 'red']);
console.log(scale(0.5).hex());  // 輸出: "#ff8080"，介于白色和紅色中間的顏色

總結(jié)

Chroma.js 是一個輕量級、功能全面的 JavaScript 顏色處理庫，它提供簡單直觀的 API，使得顏色管理變得輕松。無論是在前端開發(fā)、數(shù)據(jù)可視化還是設(shè)計(jì)工具中，Chroma.js 都能夠提供強(qiáng)大的支持，幫助開發(fā)者輕松應(yīng)對各種色彩相關(guān)的任務(wù)。

祝好！

引用鏈接

[1] Github Star: 9.9k: https://github.com/gka/chroma.js
[2] 官方文檔: https://www.vis4.net/chromajs/