十大免費開源 JavaScript 顏色選擇器

顏色選擇器是複雜的 UI 元素，允許使用者從給定的調色板中選擇顏色。有兩種方法可以將顏色選擇器新增到網頁中。第一個涉及簡單地使用 input 元素，並將 type 屬性設為 color。新增起來很容易，您可以附加事件偵聽器以根據所選顏色對網頁進行任何變更。

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

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

Huebee 顏色選擇器

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

顏色選擇器的初始化選項可讓您指定要包含在顏色選擇器中的色調數量。您也可以選擇色調和飽和度的數量，以及顏色網格的第一個色調。甚至還有一個選項可以透過將它們作為數組傳遞來在顏色選擇器中顯示您自己的一組自訂顏色。

此外，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 將在所有這些情況下做出回應。

#範例頁面說明如何建立一個非常基本的顏色選擇器或建立支援透明度和色樣的東西。您還可以為顏色選擇器創建與您的網站完美融合的自訂 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 上還有更多顏色選擇器可供發現。

以上是十大免費開源 JavaScript 顏色選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！