5+最好的javascript和jQuery颜色选择器插件

本文概述

  • 5. Tinycolorpicker
  • 4. Spectrum (Maintained 2020)
  • 3. Pick-a-Color
  • 2. Eyecon拾色器
  • 1. Farbtastic
  • Huebee
应用程序中的颜色工具, 颜色选择器或颜色选择器是通常但不一定在图形应用程序中找到的实用程序。它们用于选择颜色或创建配色方案。通常, 它们使你可以选择其RGB-A, HEX或HSL-A表示形式的颜色。
在此顶部, 我们将与你分享5个最无礼, 最有用且最易于实现的Web应用程序颜色选择器插件。
5. Tinycolorpicker Github
Tiny Colorpicker是一个跨浏览器库, 它创建一个颜色选择器(窗体)输入。这是一种向表单或用户界面添加颜色选择器的简便方法。
  • iOS, Android和Windows Phone支持。
  • 作为jQuery插件和普通Javascript microlib提供。
  • AMD, Node, requirejs和commonjs支持。
  • 易于定制
  • 可以在表格内部或外部使用
  • 轻巧的
  • 允许你从预定义的图像中选择颜色
5+最好的javascript和jQuery颜色选择器插件

文章图片
4. Spectrum (Maintained 2020) Github
作为开发人员, 你可能已经在某个地方看到了此插件, 即Google Chrome的旧颜色选择器!该插件是最知名的Web浏览器的一部分。它非常易于使用且轻巧。
5+最好的javascript和jQuery颜色选择器插件

文章图片
3. Pick-a-Color Github
Pick-a-Color是用于Twitter Bootstrap的易于使用的jQuery颜色选择器。它允许用户操纵饱和度, 光谱和色相以获取任何颜色, 并且适合移动设备和台式机使用。
5+最好的javascript和jQuery颜色选择器插件

文章图片
2. Eyecon拾色器 该插件是一个简单的组件, 可以像在Adobe Photoshop中选择颜色一样选择颜色。它是可定制的, 并具有以下功能:
  • 平面模式-作为页面中的元素
  • 强大的色彩选择控件
  • 通过更改一些图像轻松自定义外观
  • 适合视口(半响应)
5+最好的javascript和jQuery颜色选择器插件

文章图片
1. Farbtastic Farbtastic是一个jQuery插件, 可以通过JavaScript将一个或多个颜色选择器小部件添加到页面中。然后将每个小部件链接到现有元素(例如文本字段), 并在选择颜色时更新该元素的值。
5+最好的javascript和jQuery颜色选择器插件

文章图片
Huebee Github
5+最好的javascript和jQuery颜色选择器插件

文章图片
Huebee是一个JavaScript库, 用于创建以用户为中心的颜色选择器。 Huebee显示有限的颜色集, 因此用户可以一目了然地查看所有颜色, 做出清晰的决定, 然后单击即可选择颜色。如果要在与GNU GPL许可证v3兼容的许可证下创建开源应用程序, 则可以根据GPLv3的条款使用Huebee。阅读有关Huebee开源许可的更多信息。
Colpick
5+最好的javascript和jQuery颜色选择器插件

文章图片
Colpick是一个轻量级的jQuery颜色选择器插件, 具有RGB, HSB和HEX字段, 几种外观和布局。
  • 没有图片!只是一个JS和一个CSS文件
  • 非常直观的类似Photoshop的界面
  • 易于定制的浅色和深色CSS3外观
  • 浏览器总共加载28 KB
  • 即使在IE7上也可以正常工作
  • 极易实现
此顶部的存储库是原始colpicker插件的分支, 因为不再维护原始存储库。此版本具有以下改进:
  • Polyfill:新选项” polyfill” 可用于本机颜色输入字段
  • 自动颜色:使用jQuery函数.val()从元素的” 值” 属性获取默认颜色
  • 自定义父级:新选项’ appendTo’ 指定将选择器附加到哪个元素(PR#44)
  • CSS样式:新选项” 样式” 用于指定要在选择器上设置的其他样式(PR#44)
  • UMD兼容性:使用UMD样式闭包可与AMD加载程序(require.js)或CommonJS一起加载
  • 3个字符的十六进制支持:增加了对输入三个字符的十六进制代码的支持, 如CSS 2.1规范(PR#43)所述
  • 已修复的问题:#16, #17, PR#58
Color picker
Github
5+最好的javascript和jQuery颜色选择器插件

文章图片
Color picker是使用纯JavaScript编写的简单拾色器插件, 适用于现代浏览器, 并支持触摸事件。
Iro.js
Github
5+最好的javascript和jQuery颜色选择器插件

文章图片
【5+最好的javascript和jQuery颜色选择器插件】Iro.js是一个零依赖的基于SVG的JavaScript颜色选择器库。它提供:
  • 可自定义的基于SVG的UI
  • 在RGB, HSV, HSL和十六进制RGB之间转换颜色
  • 所选颜色更改时动态更新CSS样式
  • 轻量级, 最小约13KB(或最小约5KB +压缩)
  • 零依赖性(甚至不是jQuery或其他样式表/图像)
Colorjoe
Github
5+最好的javascript和jQuery颜色选择器插件

文章图片
Colorjoe是可扩展的颜色选择器。 Colorjoe在某种程度上受到ColorJack和RightJS Colorpicker的启发。与那些不同, 它实际上可以很好地扩展。本质上, 这意味着你可以使用一些CSS来定义其实际尺寸和布局。这样, 小部件就可以很好地适应响应式布局。另外, 由于它提供了简单的API, 实现缺少的功能(RGB字段, 什么都没有)相对容易。
Spectrum (未维护)
Github
作为开发人员, 你可能已经在某个地方看到了此插件, 即Google Chrome的旧颜色选择器!该插件是最知名的Web浏览器的一部分。它非常易于使用且轻巧。
5+最好的javascript和jQuery颜色选择器插件

文章图片
你知道其他漂亮又有用的拾色器吗?不要害羞, 并在评论框中与社区分享。

    推荐阅读