顏色選擇器是複雜的 UI 元素，允許使用者從給定的調(diào)色板中選擇顏色。有兩種方法可以將顏色選擇器新增到網(wǎng)頁(yè)中。第一個(gè)涉及簡(jiǎn)單地使用 input 元素，並將 type 屬性設(shè)為 color。新增起來(lái)很容易，您可以附加事件偵聽(tīng)器以根據(jù)所選顏色對(duì)網(wǎng)頁(yè)進(jìn)行任何變更。

使用 input 元素建立顏色選擇器的一個(gè)問(wèn)題是，不同瀏覽器的 UI 可能有顯著差異。這可能並不總是令人滿意，具體取決於您要?jiǎng)?chuàng)建的內(nèi)容。您的用戶通常希望看到 UI 中只有微小的變化，無(wú)論他們使用什麼瀏覽器。此外，內(nèi)建顏色選擇器的視覺(jué)外觀可能無(wú)法與您網(wǎng)站的整體主題正確融合。

您可以藉助基於 JavaScript 的顏色選擇器來(lái)解決此問(wèn)題。在這篇文章中，我將向您介紹一些最好的免費(fèi)開(kāi)源 JavaScript 顏色選擇器，它們具有自己獨(dú)特的功能和 UI。

Huebee 顏色選擇器

Huebee 顏色選擇器為您提供了一個(gè)用戶友好的介面，用於顯示一組有限的顏色。通常，顏色選擇器要求您從一個(gè)點(diǎn)到下一個(gè)點(diǎn)的漸變中選擇顏色。另一方面，Huebee 根據(jù)您設(shè)定的參數(shù)顯示一組特定的顏色。

顏色選擇器的初始化選項(xiàng)可讓您指定要包含在顏色選擇器中的色調(diào)數(shù)量。您也可以選擇色調(diào)和飽和度的數(shù)量，以及顏色網(wǎng)格的第一個(gè)色調(diào)。甚至還有一個(gè)選項(xiàng)可以透過(guò)將它們作為數(shù)組傳遞來(lái)在顏色選擇器中顯示您自己的一組自訂顏色。

此外，Huebee 有一個(gè)事件偵聽(tīng)器，可讓您在所選顏色值變更時(shí)採(cǎi)取操作。您可以使用四種不同的屬性來(lái)單獨(dú)存取完整顏色值或其色調(diào)、飽和度和亮度。您也可以使用 isLight 屬性檢查使用者是否選擇了淺色或深色。

官方網(wǎng)站上記錄了 Huebee 顏色選擇器的其他功能。

引導(dǎo)顏色選擇器

正如您可能已經(jīng)猜到的，Bootstrap Colorpicker 是 Bootstrap 的顏色選擇器外掛程式。它有兩個(gè)不同的版本。 2.x 版本適用於 Bootstrap 3 和 4，而 3.x 版本適用於 Bootstrap 4。

#3.x 版本的一個(gè)好處是，即使您根本不使用 Bootstrap，它仍然可以工作。您只需在初始化期間將 popover 選項(xiàng)的值設(shè)為 false 或 null 即可在不使用 Bootstrap 框架的情況下使用它。

您可以使用這個(gè)函式庫(kù)做很多有趣的事情。例如，您可以建立預(yù)先定義的調(diào)色板以與顏色選擇器一起向使用者顯示。您還可以建立更高級(jí)的顏色選擇器，它將根據(jù)您目前選擇的顏色建立動(dòng)態(tài)顏色樣本。

您可以對(duì)顏色選擇器的 UI 進(jìn)行大量控制。這包括從對(duì)其外觀進(jìn)行細(xì)微更改到添加全新元素（例如使用您自己的 HTML 模板的按鈕）的一切內(nèi)容。網(wǎng)站上的文件更詳細(xì)地介紹了所有這些內(nèi)容。

反應(yīng)顏色

網(wǎng)站和應(yīng)用程式使用幾種不同類型的 UI 來(lái)選擇顏色。您是否曾想在自己的網(wǎng)站上嘗試其中的任何一個(gè)？ React Color 函式庫(kù)可以讓您做到這一點(diǎn)。

#它配備了 13 種不同的預(yù)建顏色選擇器，可模擬 GitHub、Photoshop、Chrome 和 Twitter 等流行網(wǎng)站和應(yīng)用程式的 UI。不僅如此，您還可以使用不同的組件來(lái)創(chuàng)建自己獨(dú)特的顏色選擇器。

MD 顏色選擇器

MD Color Picker 其實(shí)是一個(gè)基於 Angular 的顏色選擇器，其 UI 的靈感來(lái)自 Material Design 哲學(xué)。它還使用一個(gè)名為 tinycolor.js 的小型函式庫(kù)來(lái)操作顏色值。

#顏色選擇器為使用者提供了多種從彈出視窗中選擇顏色的不同方式。他們可以使用良好的舊 RGB 光譜或使用 RGBA 滑桿。他們還可以使用兩種不同的調(diào)色板變體來(lái)選擇他們喜歡的顏色。您可以添加一個(gè)可選功能來(lái)追蹤使用者過(guò)去的顏色選擇，以幫助他們快速選擇顏色。

色彩喬

Colorjoe 是一個(gè)簡(jiǎn)單且可擴(kuò)展的顏色選擇器，您可以輕鬆地將其整合到您的網(wǎng)站中。這裡的術(shù)語(yǔ)「可縮放」指的是您使用 CSS 定義尺寸和控制佈局的能力，使其在所有螢?zāi)怀叽缟峡雌饋?lái)都很棒。

#它附帶兩個(gè)不同的事件偵聽(tīng)器 - change 和 done - 幫助您根據(jù)使用者與顏色選擇器的互動(dòng)做出反應(yīng)。在初始化期間傳遞一堆參數(shù)可讓您建立 RGB 或 HSL 選擇器。該 API 還可讓您更輕鬆地將自己的 UI 元素新增至顏色選擇器，以便根據(jù)您的需求進(jìn)行自訂。

虹膜

Iris 是一個(gè)簡(jiǎn)單的顏色選擇器，由 Automattic 創(chuàng)建，該公司是 WordPress 背後的公司。它使用 jQuery 和 jQuery UI 作為依賴項(xiàng)，因此對(duì)於已經(jīng)使用這兩個(gè)庫(kù)的任何人來(lái)說(shuō)都是一個(gè)不錯(cuò)的選擇。在包含相關(guān)庫(kù)後，您可以透過(guò)在輸入元素上呼叫 iris() 將顏色選擇器整合到您自己的網(wǎng)站中。

您可以設(shè)定許多有用的選項(xiàng)來(lái)更改顏色選擇器在您網(wǎng)站上的行為。可以顯示常見(jiàn)顏色的調(diào)色板或傳遞要在調(diào)色板中顯示的顏色數(shù)組。您可以完全控制顏色選擇器的寬度以及它附加到輸入元素時(shí)彈出的位置。

Iris 還具有一些回呼函數(shù)和方法，您可以在 Iris 網(wǎng)站上了解它們。它包括一些顏色選擇器的即時(shí)工作範(fàn)例。

徑向顏色選擇器

這個(gè)徑向顏色選擇器在顏色選擇器的 UI 方面採(cǎi)用了不同的方法。它帶有一個(gè)徑向滑塊，在其中心顯示所選顏色。我們的目標(biāo)是盡可能簡(jiǎn)單易用。

查看 Rosen 的以下演示，了解如何在 Vue.js 中使用顏色選擇器：

牢記這一理念，滑桿提供了對(duì)螢?zāi)婚喿x器和基於鍵盤(pán)的顏色選擇的支援。您可以按下向上和向下箭頭鍵來(lái)增加或減少色調(diào)值。使用者可以按Enter鍵關(guān)閉或開(kāi)啟顏色選擇器，然後按Tab鍵使顏色選擇器處?kù)督裹c(diǎn)。

飽和度和亮度值在初始設(shè)定期間傳遞到顏色選擇器。有關(guān)顏色選擇器不同配置選項(xiàng)的更多信息，請(qǐng)?jiān)L問(wèn)徑向顏色選擇器網(wǎng)站。

我已連結(jié)到 Vue 版本，但此顏色選擇器也可與 React 和 Angular 一起使用。

ColoReact

ColoReact 顏色選擇器是另一個(gè)小型顏色選擇器小部件，與 React 配合得很好。它易於使用，並允許您創(chuàng)建不同複雜程度的顏色選擇器。 UI 將在所有這些情況下做出回應(yīng)。

#範(fàn)例頁(yè)面說(shuō)明如何建立一個(gè)非?；镜念伾x擇器或建立支援透明度和色樣的東西。您還可以為顏色選擇器創(chuàng)建與您的網(wǎng)站完美融合的自訂 UI。

顏色選擇

ColorPick 庫(kù)是一個(gè)簡(jiǎn)單的 jQuery 插件，您可以將其添加到您的網(wǎng)站，以將最小的顏色選擇器與現(xiàn)代外觀整合。它具有非常時(shí)尚的設(shè)計(jì)，幾乎可以與所有網(wǎng)站無(wú)縫融合。

#由於這是一個(gè) jQuery 插件，因此您需要在網(wǎng)頁(yè)中包含 jQuery 庫(kù)（如果您尚未這樣做）。該顏色選擇器的兩個(gè)不錯(cuò)的功能是它的深色模式和自動(dòng)將最近選擇的顏色保存到本地存儲(chǔ)的能力。

顏色選擇器預(yù)設(shè)使用 Flat UI 顏色資料庫(kù)。但是，您也可以在初始化期間提供自己的顏色集並更改調(diào)色板的標(biāo)籤。

您可能已經(jīng)注意到，此顏色選擇器為使用者提供了相對(duì)較小的顏色清單以供選擇。它透過(guò)為您提供包含輸入元素及其 allowCustomColor 參數(shù)的選項(xiàng)來(lái)彌補(bǔ)這一點(diǎn)，使用者可以在其中輸入他們喜歡的任何顏色的十六進(jìn)位值。

Iro.js

iro.js 顏色選擇器是我們清單中功能最豐富的 JavaScript 顏色選擇器小工具。事實(shí)上，它沒(méi)有任何其他依賴項(xiàng)，這使得它更具吸引力。您無(wú)需加載任何第三方庫(kù)或框架或任何 CSS 或圖像檔案即可使顏色選擇器工作?？纯?James Daniel 的這支筆：

它的一些功能包括使用單一 API 處理十六進(jìn)位、RGB、HSV 和 HSL 顏色值的能力。該小部件還附帶了自己的一組預(yù)先建立的 UI 元件。如果您嘗試為任何新設(shè)計(jì)或產(chǎn)品建立配色方案，您甚至可以從相同顏色選擇器小工具中選擇多種顏色。

有許多初始化選項(xiàng)可用於確定顏色選擇器的行為和外觀。所有這些都在小部件的文檔中進(jìn)行了詳細(xì)解釋。您也可以在那裡找到一些顏色選擇器的高級(jí)使用範(fàn)例。

最終想法

顏色選擇器是非常有用的 UI 元素，但很難從頭開(kāi)始重新建立。這就是為什麼我想寫(xiě)這篇文章來(lái)為您提供可以在專案中使用的最佳免費(fèi)開(kāi)源 JavaScript 顏色選擇器的清單。我試圖透過(guò)包含無(wú)依賴的顏色選擇器以及那些與其他流行的庫(kù)或框架（如 Bootstrap、jQuery、Angular、Vue 和 React）一起使用的顏色選擇器來(lái)涵蓋這裡的所有基礎(chǔ)。

希望這些顏色選擇器之一具有您需要的功能，但如果沒(méi)有，GitHub 上還有更多顏色選擇器可供發(fā)現(xiàn)。

以上是十大免費(fèi)開(kāi)源 JavaScript 顏色選擇器的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！