Web前端最全WEB前端工具推荐丨分享6个热门颜色选择器组件，初面蚂蚁金服

最新推荐文章于 2026-05-09 09:43:11 发布

原创最新推荐文章于 2026-05-09 09:43:11 发布 · 804 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #面试 #学习

程序员专栏收录该内容

217 篇文章

订阅专栏

自学几个月前端，为什么感觉什么都没学到？？

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。

使用 npm 安装：npm install huebee

使用 Bower 安装：bower install huebee --save

在您的站点中包含 Huebee.css和.js文件。


<link rel="stylesheet" href="/path/to/huebee.css" media="screen">

<script src="/path/to/huebee.pkgd.min.js"></script>

Huebee 在锚元素上工作。


<!-- use inputs so users can set colors with text -->

<input class="color-input" value="#F80" />





<!-- anchors can be buttons -->

<button class="color-button">Select color</button>





<!-- anchors can be any element -->

<span class="current-color">Current color</span>

四、React Color

React Color 提供了 13 种不同的颜色选择器，可以模拟流行网站和应用程序（如 GitHub、Photoshop、Chrome 和 Twitter）的 UI。不仅如此，还可以使用不同的组件来创建自定义颜色选择器。

项目地址：https://github.com/casesandberg/react-color

安装和使用


npm install react-color --save

包含组件


import React from 'react'

import { SketchPicker } from 'react-color'





class Component extends React.Component {





  render() {

    return <SketchPicker />

  }

}

可以分别导入：AlphaPicker BlockPicker ChromePicker CirclePicker CompactPicker GithubPicker HuePicker MaterialPicker PhotoshopPicker SketchPicker SliderPicker SwatchesPicker TwitterPicker。

通过ReactCSS 实现100% 内联样式

五、Vue Color

Vue Color 是一个适用于 Sketch、Photoshop、Chrome 等的 Vue (Vue2.0)颜色选择器。

项目地址：https://github.com/xiaokaike/vue-color

安装

NPM


$ npm install vue-color

CommonJS


var Photoshop = require('vue-color/src/Photoshop.vue');





new Vue({

  components: {

    'Photoshop': Photoshop

  }

})

ES6


import { Photoshop } from 'vue-color'





new Vue({

  components: {

    'photoshop-picker': Photoshop

  }

})

浏览器全局变量

该dist文件夹包含对象vue-color.js中vue-color.min.js导出的所有组件。window.VueColor这些包也可用于 NPM 包。


<script src="path/to/vue.js"></script>

<script src="path/to/vue-color.min.js"></script>

<script>

  var Photoshop = VueColor.Photoshop

</script>

本地设置


npm install

npm run dev

六、iro.js

iro.js 是一个用于 JavaScript 的模块化、注重设计的颜色颜色选择器组件 - 支持多种颜色格式。所有 iro.js 都可以从单个脚本运行 - 不需要额外的 CSS、图像或第三方库！

项目地址：https://github.com/jaames/iro.js

安装

使用 NPM 安装


npm install @jaames/iro --save

如果您使用的是 Webpack 或 Rollup 之类的模块打包器，请将 iro.js 导入您的项目：


// Using ES6 module syntax

import iro from '@jaames/iro';





// Using CommonJS modules

const iro = require('@jaames/iro');

使用 jsDelivr CDN


<script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>

当您像这样手动包含库时，iro.js 将在 window.iro 上全局可用。

下载并托管自己


< html > 

  < head > 

    <!-- ... --> 

    < script  src =" ./path/to/ iro.min.js " > </ script > 

  </ head > 



### 最后

![前15.PNG](https://img-blog.csdnimg.cn/img_convert/e310f635e3acdb4c1593cb6d403ca490.webp?x-oss-process=image/format,png)

![前16.PNG](https://img-blog.csdnimg.cn/img_convert/0cf08e78bd0ab8ec3f990ccf3a9ca135.webp?x-oss-process=image/format,png)

>由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容
>
>**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**



自己

< html >

< head >

<!-- ... --> 

< script  src =" ./path/to/ iro.min.js " > </ script >

</ head >

最后

[外链图片转存中…(img-6lyNLYy3-1715241783670)]

[外链图片转存中…(img-6n9APdgE-1715241783670)]

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】