十大免费开源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 上还有更多颜色选择器可供发现。