目录
Huebee 颜色选择器
引导颜色选择器
反应颜色
MD 颜色选择器
色彩乔
虹膜
径向颜色选择器
ColoReact
颜色选择
Iro.js
最终想法
首页 CMS教程 &#&按 十大免费开源 JavaScript 颜色选择器

十大免费开源 JavaScript 颜色选择器

Aug 28, 2023 pm 12:21 PM

颜色选择器是复杂的 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。

十大免费开源 JavaScript 颜色选择器

3.x 版本的一个好处是,即使您根本不使用 Bootstrap,它仍然可以工作。您只需在初始化期间将 popover 选项的值设置为 falsenull 即可在不使用 Bootstrap 框架的情况下使用它。

您可以使用这个库做很多有趣的事情。例如,您可以创建预定义的调色板以与颜色选择器一起向用户显示。您还可以创建更高级的颜色选择器,它将根据您当前选择的颜色创建动态颜色样本。

您可以对颜色选择器的 UI 进行大量控制。这包括从对其外观进行细微更改到添加全新元素(例如使用您自己的 HTML 模板的按钮)的一切内容。网站上的文档更详细地介绍了所有这些内容。

反应颜色

网站和应用程序使用几种不同类型的 UI 来选择颜色。您是否曾想在自己的网站上尝试其中的任何一个? React Color 库可以让您做到这一点。

十大免费开源 JavaScript 颜色选择器

它配备了 13 种不同的预构建颜色选择器,可模拟 GitHub、Photoshop、Chrome 和 Twitter 等流行网站和应用程序的 UI。不仅如此,您还可以使用不同的组件来创建自己独特的颜色选择器。

MD 颜色选择器

MD Color Picker 实际上是一个基于 Angular 的颜色选择器,其 UI 的灵感来自于 Material Design 哲学。它还使用一个名为 tinycolor.js 的小型库来操作颜色值。

十大免费开源 JavaScript 颜色选择器

颜色选择器为用户提供了多种从弹出窗口中选择颜色的不同方式。他们可以使用良好的旧 RGB 光谱或使用 RGBA 滑块。他们还可以使用两种不同的调色板变体来选择他们喜欢的颜色。您可以添加一项可选功能来跟踪用户过去的颜色选择,以帮助他们快速选择颜色。

色彩乔

Colorjoe 是一个简单且可扩展的颜色选择器,您可以轻松地将其集成到您的网站中。这里的术语“可缩放”指的是您使用 CSS 定义尺寸和控制布局的能力,使其在所有屏幕尺寸上看起来都很棒。

十大免费开源 JavaScript 颜色选择器

它带有两个不同的事件侦听器 - changedone - 帮助您根据用户与颜色选择器的交互做出反应。在初始化期间传递一堆参数允许您创建 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 将在所有这些情况下做出响应。

十大免费开源 JavaScript 颜色选择器

示例页面说明了如何创建一个非常基本的颜色选择器或创建支持透明度和色样的东西。您还可以为颜色选择器创建与您的网站完美融合的自定义 UI。

颜色选择

ColorPick 库是一个简单的 jQuery 插件,您可以将其添加到您的网站,以将最小的颜色选择器与现代外观集成。它具有非常时尚的设计,可以与几乎所有网站无缝融合。

十大免费开源 JavaScript 颜色选择器

由于这是一个 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中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

WordPress开发的5个最佳ID(以及原因) WordPress开发的5个最佳ID(以及原因) Mar 03, 2025 am 10:53 AM

为WordPress开发选择正确的集成开发环境(IDE) 十年来,我探索了WordPress开发的许多集成开发环境(IDE)。 纯粹的品种 - 从免费到商业,基本到FEA

使用OOP技术创建WordPress插件 使用OOP技术创建WordPress插件 Mar 06, 2025 am 10:30 AM

本教程演示了使用面向对象的编程(OOP)原理构建WordPress插件,利用Dribbble API。 让我们在保留原始含义和结构的同时完善文本以清晰和简洁。 object-ori

如何将PHP数据和字符串传递给WordPress中的JavaScript 如何将PHP数据和字符串传递给WordPress中的JavaScript Mar 07, 2025 am 09:28 AM

将PHP数据传递给JavaScript的最佳实践:WP_LOCALIZE_SCRIPT和WP_ADD_INLINE_SCRIPT的比较 在PHP文件中将数据存储在静态字符串中是建议的练习。 如果在您的JavaScript代码中需要此数据,请合并

如何使用WordPress插件嵌入和保护PDF文件 如何使用WordPress插件嵌入和保护PDF文件 Mar 09, 2025 am 11:08 AM

本指南演示了如何使用WordPress PDF插件在WordPress帖子和页面中嵌入和保护PDF文件。 PDFS为从目录到演示文稿提供了一种用户友好的,普遍访问的格式。 此方法ENS

See all articles