颜色选择器是复杂的ui元素，允许用户从给定的调色板中选择颜色。有两种方法可以将颜色选择器添加到网页中。第一个涉及简单地使用input元素，并将type属性设置为color。添加起来很容易，您可以附加事件侦听器以根据所选颜色对网页进行任何更改。
使用input元素创建颜色选择器的一个问题是，不同浏览器的UI可能存在显着差异。这可能并不总是令人满意，具体取决于您要创建的内容。您的用户通常希望看到UI中只有微小的变化，无论他们使用什么浏览器。此外，内置颜色选择器的视觉外观可能无法与您网站的整体主题正确融合。
您可以借助基于JavaScript的颜色选择器来解决此问题。在这篇文章中，我将向您介绍一些最好的免费开源JavaScript颜色选择器，它们具有自己独特的功能和UI。
Huebee颜色选择器
Huebee颜色选择器为您提供了一个用户友好的界面，用于显示一组有限的颜色。通常，颜色选择器要求您从一个点到下一个点的渐变中选择颜色。另一方面，Huebee根据您设置的参数显示一组特定的颜色。
立即学习“Java免费学习笔记（深入）”；
颜色选择器的初始化选项允许您指定要包含在颜色选择器中的色调数量。您还可以选择色调和饱和度的数量，以及颜色网格的第一个色调。甚至还有一个选项可以通过将它们作为数组传递来在颜色选择器中显示您自己的一组自定义颜色。
此外，Huebee有一个事件侦听器，允许您在所选颜色值发生变化时采取操作。您可以使用四种不同的属性来单独访问完整颜色值或其色调、饱和度和亮度。您还可以使用isLight属性检查用户是否选择了浅色或深色。
官方网站上记录了Huebee颜色选择器的其他功能。
引导颜色选择器
正如您可能已经猜到的，BootstrapColorpicker是Bootstrap的颜色选择器插件。它有两个不同的版本。2.x版本适用于Bootstrap3和4，而3.x版本适用于Bootstrap4。
3.x版本的一个好处是，即使您根本不使用Bootstrap，它仍然可以工作。您只需在初始化期间将popover选项的值设置为false或null即可在不使用Bootstrap框架的情况下使用它。
您可以使用这个库做很多有趣的事情。例如，您可以创建预定义的调色板以与颜色选择器一起向用户显示。您还可以创建更高级的颜色选择器，它将根据您当前选择的颜色创建动态颜色样本。
您可以对颜色选择器的UI进行大量控制。这包括从对其外观进行细微更改到添加全新元素（例如使用您自己的HTML模板的按钮）的一切内容。网站上的文档更详细地介绍了所有这些内容。
反应颜色
网站和应用程序使用几种不同类型的UI来选择颜色。您是否曾想在自己的网站上尝试其中的任何一个？ReactColor库可以让您做到这一点。
它配备了13种不同的预构建颜色选择器，可模拟GitHub、Photoshop、Chrome和Twitter等流行网站和应用程序的UI。不仅如此，您还可以使用不同的组件来创建自己独特的颜色选择器。
MD颜色选择器
MDColorPicker实际上是一个基于Angular的颜色选择器，其UI的灵感来自于MaterialDesign哲学。它还使用一个名为tinycolor.js的小型库来操作颜色值。
颜色选择器为用户提供了多种从弹出窗口中选择颜色的不同方式。他们可以使用良好的旧RGB光谱或使用RGBA滑块。他们还可以使用两种不同的调色板变体来选择他们喜欢的颜色。您可以添加一项可选功能来跟踪用户过去的颜色选择，以帮助他们快速选择颜色。
色彩乔
Colorjoe是一个简单且可扩展的颜色选择器，您可以轻松地将其集成到您的网站中。这里的术语“可缩放”指的是您使用CSS定义尺寸和控制布局的能力，使其在所有屏幕尺寸上看起来都很棒。
它带有两个不同的事件侦听器-change和done-帮助您根据用户与颜色选择器的交互做出反应。在初始化期间传递一堆参数允许您创建RGB或HSL选择器。该API还使您可以更轻松地将自己的UI元素添加到颜色选择器，以便根据您的需要对其进行自定义。
虹膜
Iris是一个简单的颜色选择器，由Automattic创建，该公司是WordPress背后的公司。它使用jQuery和jQueryUI作为依赖项，因此对于已经使用这两个库的任何人来说都是一个不错的选择。在包含相关库后，您可以通过在输入元素上调用iris()将颜色选择器集成到您自己的网站中。
您可以设置许多有用的选项来更改颜色选择器在您网站上的行为方式。可以显示常见颜色的调色板或传递要在调色板中显示的颜色数组。您可以完全控制颜色选择器的宽度以及它附加到输入元素时弹出的位置。
Iris还具有一些回调函数和方法，您可以在Iris网站上了解它们。它包括一些颜色选择器的实时工作示例。
径向颜色选择器
这个径向颜色选择器在颜色选择器的UI方面采用了不同的方法。它带有一个径向滑块，在其中心显示所选颜色。我们的目标是尽可能简单易用。
查看Rosen的以下演示，了解如何在Vue.js中使用颜色选择器：
牢记这一理念，滑块提供了对屏幕阅读器和基于键盘的颜色选择的支持。您可以按向上和向下箭头键来增大或减小色调值。用户可以按Enter键关闭或打开颜色选择器，然后按Tab键使颜色选择器处于焦点。
饱和度和亮度值在初始设置期间传递到颜色选择器。有关颜色选择器不同配置选项的更多信息，请访问径向颜色选择器网站。
我已链接到Vue版本，但此颜色选择器也可与React和Angular一起使用。
ColoReact
ColoReact颜色选择器是另一个小型颜色选择器小部件，与React配合得很好。它易于使用，并允许您创建不同复杂程度的颜色选择器。UI将在所有这些情况下做出响应。
示例页面说明了如何创建一个非常基本的颜色选择器或创建支持透明度和色样的东西。您还可以为颜色选择器创建与您的网站完美融合的自定义UI。
颜色选择
ColorPick库是一个简单的jQuery插件，您可以将其添加到您的网站，以将最小的颜色选择器与现代外观集成。它具有非常时尚的设计，可以与几乎所有网站无缝融合。
由于这是一个jQuery插件，因此您需要在网页中包含jQuery库（如果您尚未这样做）。该颜色选择器的两个不错的功能是它的深色模式和自动将最近选择的颜色保存到本地存储的能力。
颜色选择器默认使用FlatUI颜色数据库。但是，您也可以在初始化期间提供自己的颜色集并更改调色板的标签。
您可能已经注意到，此颜色选择器为用户提供了相对较小的颜色列表以供选择。它通过为您提供包含输入元素及其allowCustomColor参数的选项来弥补这一点，用户可以在其中输入他们喜欢的任何颜色的十六进制值。
Iro.js
iro.js颜色选择器是我们列表中功能最丰富的JavaScript颜色选择器小部件。事实上，它没有任何其他依赖项，这使得它更具吸引力。您无需加载任何第三方库或框架或任何CSS或图像文件即可使颜色选择器工作。看看JamesDaniel的这支笔：
它的一些功能包括使用单个API处理十六进制、RGB、HSV和HSL颜色值的能力。该小部件还附带了自己的一组预构建的UI组件。如果您尝试为任何新设计或产品创建配色方案，您甚至可以从同一颜色选择器小部件中选择多种颜色。
有很多初始化选项可用于确定颜色选择器的行为和外观。所有这些都在小部件的文档中进行了详细解释。您还可以在那里找到一些颜色选择器的高级使用示例。
最终想法
颜色选择器是非常有用的UI元素，但很难从头开始重新创建。这就是为什么我想写这篇文章来为您提供可以在项目中使用的最佳免费开源JavaScript颜色选择器的列表。我试图通过包含无依赖的颜色选择器以及那些与其他流行的库或框架（如Bootstrap、jQuery、Angular、Vue和React）一起使用的颜色选择器来涵盖这里的所有基础。
希望这些颜色选择器之一具有您需要的功能，但如果没有，GitHub上还有更多颜色选择器可供发现。
