顏色選擇器是復雜的 ui 元素，允許用戶從給定的調色板中選擇顏色。有兩種方法可以將顏色選擇器添加到網頁中。第一個涉及簡單地使用 input 元素，并將 type 屬性設置為 color。添加起來很容易，您可以附加事件偵聽器以根據所選顏色對網頁進行任何更改。
使用 input 元素創建顏色選擇器的一個問題是，不同瀏覽器的 UI 可能存在顯著差異。這可能并不總是令人滿意，具體取決于您要創建的內容。您的用戶通常希望看到 UI 中只有微小的變化，無論他們使用什么瀏覽器。此外，內置顏色選擇器的視覺外觀可能無法與您網站的整體主題正確融合。
您可以借助基于 JavaScript 的顏色選擇器來解決此問題。在這篇文章中，我將向您介紹一些最好的免費開源 JavaScript 顏色選擇器，它們具有自己獨特的功能和 UI。
Huebee 顏色選擇器
Huebee 顏色選擇器為您提供了一個用戶友好的界面，用于顯示一組有限的顏色。通常，顏色選擇器要求您從一個點到下一個點的漸變中選擇顏色。另一方面，Huebee 根據您設置的參數顯示一組特定的顏色。
立即學習“Java免費學習筆記（深入）”；
顏色選擇器的初始化選項允許您指定要包含在顏色選擇器中的色調數量。您還可以選擇色調和飽和度的數量，以及顏色網格的第一個色調。甚至還有一個選項可以通過將它們作為數組傳遞來在顏色選擇器中顯示您自己的一組自定義顏色。
此外，Huebee 有一個事件偵聽器，允許您在所選顏色值發生變化時采取操作。您可以使用四種不同的屬性來單獨訪問完整顏色值或其色調、飽和度和亮度。您還可以使用 isLight 屬性檢查用戶是否選擇了淺色或深色。
官方網站上記錄了 Huebee 顏色選擇器的其他功能。
引導顏色選擇器
正如您可能已經猜到的，bootstrap Colorpicker 是 Bootstrap 的顏色選擇器插件。它有兩個不同的版本。 2.x 版本適用于 Bootstrap 3 和 4，而 3.x 版本適用于 Bootstrap 4。
3.x 版本的一個好處是，即使您根本不使用 Bootstrap，它仍然可以工作。您只需在初始化期間將 popover 選項的值設置為 false 或 NULL 即可在不使用 Bootstrap 框架的情況下使用它。
您可以使用這個庫做很多有趣的事情。例如，您可以創建預定義的調色板以與顏色選擇器一起向用戶顯示。您還可以創建更高級的顏色選擇器，它將根據您當前選擇的顏色創建動態顏色樣本。
您可以對顏色選擇器的 UI 進行大量控制。這包括從對其外觀進行細微更改到添加全新元素（例如使用您自己的 html 模板的按鈕）的一切內容。網站上的文檔更詳細地介紹了所有這些內容。
反應顏色
網站和應用程序使用幾種不同類型的 UI 來選擇顏色。您是否曾想在自己的網站上嘗試其中的任何一個？ React Color 庫可以讓您做到這一點。
它配備了 13 種不同的預構建顏色選擇器，可模擬 github、photoshop、chrome 和 Twitter 等流行網站和應用程序的 UI。不僅如此，您還可以使用不同的組件來創建自己獨特的顏色選擇器。
MD 顏色選擇器
MD Color Picker 實際上是一個基于 angular 的顏色選擇器，其 UI 的靈感來自于 Material Design 哲學。它還使用一個名為 tinycolor.JS 的小型庫來操作顏色值。
顏色選擇器為用戶提供了多種從彈出窗口中選擇顏色的不同方式。他們可以使用良好的舊 RGB 光譜或使用 RGBA 滑塊。他們還可以使用兩種不同的調色板變體來選擇他們喜歡的顏色。您可以添加一項可選功能來跟蹤用戶過去的顏色選擇，以幫助他們快速選擇顏色。
色彩喬
Colorjoe 是一個簡單且可擴展的顏色選擇器，您可以輕松地將其集成到您的網站中。這里的術語“可縮放”指的是您使用 css 定義尺寸和控制布局的能力，使其在所有屏幕尺寸上看起來都很棒。
它帶有兩個不同的事件偵聽器 – change 和 done – 幫助您根據用戶與顏色選擇器的交互做出反應。在初始化期間傳遞一堆參數允許您創建 RGB 或 HSL 選擇器。該 API 還使您可以更輕松地將自己的 UI 元素添加到顏色選擇器，以便根據您的需要對其進行自定義。
虹膜
Iris 是一個簡單的顏色選擇器，由 Automattic 創建，該公司是 WordPress 背后的公司。它使用 jquery 和 jQuery UI 作為依賴項，因此對于已經使用這兩個庫的任何人來說都是一個不錯的選擇。在包含相關庫后，您可以通過在輸入元素上調用 iris() 將顏色選擇器集成到您自己的網站中。
您可以設置許多有用的選項來更改顏色選擇器在您網站上的行為方式?？梢燥@示常見顏色的調色板或傳遞要在調色板中顯示的顏色數組。您可以完全控制顏色選擇器的寬度以及它附加到輸入元素時彈出的位置。
Iris 還具有一些回調函數和方法，您可以在 Iris 網站上了解它們。它包括一些顏色選擇器的實時工作示例。
徑向顏色選擇器
這個徑向顏色選擇器在顏色選擇器的 UI 方面采用了不同的方法。它帶有一個徑向滑塊，在其中心顯示所選顏色。我們的目標是盡可能簡單易用。
查看 Rosen 的以下演示，了解如何在 vue.js 中使用顏色選擇器：
牢記這一理念，滑塊提供了對屏幕閱讀器和基于鍵盤的顏色選擇的支持。您可以按向上和向下箭頭鍵來增大或減小色調值。用戶可以按Enter鍵關閉或打開顏色選擇器，然后按Tab鍵使顏色選擇器處于焦點。
飽和度和亮度值在初始設置期間傳遞到顏色選擇器。有關顏色選擇器不同配置選項的更多信息，請訪問徑向顏色選擇器網站。
我已鏈接到 Vue 版本，但此顏色選擇器也可與 React 和 Angular 一起使用。
ColoReact
ColoReact 顏色選擇器是另一個小型顏色選擇器小部件，與 React 配合得很好。它易于使用，并允許您創建不同復雜程度的顏色選擇器。 UI 將在所有這些情況下做出響應。
示例頁面說明了如何創建一個非?；镜念伾x擇器或創建支持透明度和色樣的東西。您還可以為顏色選擇器創建與您的網站完美融合的自定義 UI。
顏色選擇
ColorPick 庫是一個簡單的 jQuery 插件，您可以將其添加到您的網站，以將最小的顏色選擇器與現代外觀集成。它具有非常時尚的設計，可以與幾乎所有網站無縫融合。
由于這是一個 jQuery 插件，因此您需要在網頁中包含 jQuery 庫（如果您尚未這樣做）。該顏色選擇器的兩個不錯的功能是它的深色模式和自動將最近選擇的顏色保存到本地存儲的能力。
顏色選擇器默認使用 Flat UI 顏色數據庫。但是，您也可以在初始化期間提供自己的顏色集并更改調色板的標簽。
您可能已經注意到，此顏色選擇器為用戶提供了相對較小的顏色列表以供選擇。它通過為您提供包含輸入元素及其 allowCustomColor 參數的選項來彌補這一點，用戶可以在其中輸入他們喜歡的任何顏色的十六進制值。
Iro.js
iro.js 顏色選擇器是我們列表中功能最豐富的 JavaScript 顏色選擇器小部件。事實上，它沒有任何其他依賴項，這使得它更具吸引力。您無需加載任何第三方庫或框架或任何 CSS 或圖像文件即可使顏色選擇器工作?？纯?James Daniel 的這支筆：
它的一些功能包括使用單個 API 處理十六進制、RGB、HSV 和 HSL 顏色值的能力。該小部件還附帶了自己的一組預構建的 UI 組件。如果您嘗試為任何新設計或產品創建配色方案，您甚至可以從同一顏色選擇器小部件中選擇多種顏色。
有很多初始化選項可用于確定顏色選擇器的行為和外觀。所有這些都在小部件的文檔中進行了詳細解釋。您還可以在那里找到一些顏色選擇器的高級使用示例。
最終想法
顏色選擇器是非常有用的 UI 元素，但很難從頭開始重新創建。這就是為什么我想寫這篇文章來為您提供可以在項目中使用的最佳免費開源 JavaScript 顏色選擇器的列表。我試圖通過包含無依賴的顏色選擇器以及那些與其他流行的庫或框架（如 Bootstrap、jQuery、Angular、Vue 和 React）一起使用的顏色選擇器來涵蓋這里的所有基礎。
希望這些顏色選擇器之一具有您需要的功能，但如果沒有，GitHub 上還有更多顏色選擇器可供發現。
