對(duì)于前端開發(fā)初學(xué)者而言，顏色選擇器可能比較陌生，甚至在實(shí)際項(xiàng)目中都未曾使用過。但如果開發(fā)高端一點(diǎn)的網(wǎng)站的話，通常需要自定義主題功能，可以自定義導(dǎo)航欄、菜單欄的文本顏色、背景色之類的，此時(shí)就用到顏色選擇器了。

今天w3cschool編程獅為大家推薦幾個(gè) Github 上熱門的顏色選擇器組件。

一、Colorjoe

colorjoe 是一個(gè)具有觸控和 AMD 支持的可擴(kuò)展顏色選擇器。可以通過 CSS 定義其實(shí)際尺寸和布局。通過這種方式，該組件非常適合響應(yīng)式布局。

與那里的許多其他顏色選擇器不同，colorjoe 是真正可擴(kuò)展的。它基于 CSS，不依賴于外部圖像。因此，您可以調(diào)整其大小以適應(yīng)您的目的。還支持觸控和 AMD 模塊定義。

colorjoe 受到 ColorJack 和 RightJS Colorpicker 的啟發(fā)。與那些不同的是，它實(shí)際上可以很好地?cái)U(kuò)展。從本質(zhì)上講，這意味著您將能夠使用一些 CSS 定義其實(shí)際尺寸和布局。通過這種方式，小部件非常適合響應(yīng)式布局。

此外，由于它提供的簡(jiǎn)單 API，實(shí)現(xiàn)缺失的功能（RGB 字段等）相對(duì)容易。

安裝

如果您更喜歡獨(dú)立的 dist，請(qǐng)將預(yù)打包的dist/colorjoe.js和添加css/colorjoe.css到您的頁面或從?src/使用 AMD 。

用法

或者

二、 Colorful

今天，每個(gè)依賴項(xiàng)都會(huì)拖累更多的依賴項(xiàng)，并且無法控制地增加項(xiàng)目的包大小。但是大小對(duì)于打算在瀏覽器中工作的所有內(nèi)容都非常重要。React Colorful 是一個(gè)用于 React 和 Preact 應(yīng)用程序的小型顏色選擇器組件，使用 hooks 和函數(shù)組件構(gòu)建。它使用嚴(yán)格的 TypeScript 編寫，具有 100% 的測(cè)試覆蓋率，界面簡(jiǎn)單易用，適用于大多數(shù)瀏覽器，支持移動(dòng)設(shè)備和觸摸屏遵循 WAI-ARIA 指南以支持輔助技術(shù)的用戶，壓縮后僅 2,8 KB（比 react-color 輕小13 倍）。react-colorful?是一個(gè)簡(jiǎn)單的顏色選擇器，適合那些關(guān)心包大小和客戶端性能的人。。

安裝

支持的顏色模型

我們?yōu)椴煌念伾Ｐ吞峁┝?12 個(gè)額外的顏色選擇器組件，除非您的應(yīng)用程序需要 HEX 字符串作為輸入/輸出格式。

可用的選擇器

代碼示例

三、Huebee

Huebee 是一個(gè) JavaScript 庫，用于創(chuàng)建以用戶為中心的顏色選擇器。Huebee 顯示一組有限的顏色，因此用戶可以一目了然地查看所有顏色，做出明確的決定，并通過單擊選擇一種顏色。

使用 npm 安裝：npm install huebee

使用 Bower 安裝：bower install huebee --save

在您的站點(diǎn)中包含 Huebee.css和.js文件。

Huebee 在錨元素上工作。

四、React Color

React Color 提供了 13 種不同的顏色選擇器，可以模擬流行網(wǎng)站和應(yīng)用程序（如 GitHub、Photoshop、Chrome 和 Twitter）的 UI。不僅如此，還可以使用不同的組件來創(chuàng)建自定義顏色選擇器。

安裝和使用

包含組件

可以分別導(dǎo)入：AlphaPicker?BlockPicker?ChromePicker?CirclePicker?CompactPicker?GithubPicker?HuePicker?MaterialPicker?PhotoshopPicker?SketchPicker?SliderPicker?SwatchesPicker?TwitterPicker。

通過ReactCSS 實(shí)現(xiàn)100% 內(nèi)聯(lián)樣式

五、Vue Color

Vue Color 是一個(gè)適用于 Sketch、Photoshop、Chrome 等的 Vue (Vue2.0)顏色選擇器。

安裝

NPM

CommonJS

ES6

瀏覽器全局變量

該dist文件夾包含對(duì)象vue-color.js中vue-color.min.js導(dǎo)出的所有組件。window.VueColor這些包也可用于 NPM 包。

本地設(shè)置

六、iro.js

iro.js 是一個(gè)用于 JavaScript 的模塊化、注重設(shè)計(jì)的顏色顏色選擇器組件 - 支持多種顏色格式。所有 iro.js 都可以從單個(gè)腳本運(yùn)行 - 不需要額外的 CSS、圖像或第三方庫！

安裝

使用 NPM 安裝

如果您使用的是 Webpack 或 Rollup 之類的模塊打包器，請(qǐng)將 iro.js 導(dǎo)入您的項(xiàng)目：

使用 jsDelivr CDN

當(dāng)您像這樣手動(dòng)包含庫時(shí)，iro.js 將在?window.iro?上全局可用。

下載并托管自己

以上就是小師妹為你推薦的6個(gè)熱門顏色選擇器組件了，關(guān)注w3cschool編程獅收獲更多技術(shù)干貨~