不到50行代码，HTML+CSS+JS创建一个简单的色轮

最新推荐文章于 2024-08-09 08:16:58 发布
最新推荐文章于 2024-08-09 08:16:58 发布
阅读量530 收藏 2
点赞数 2
分类专栏： 前端学习 文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mancuojie/article/details/120879500
版权
本文介绍如何利用HTML、CSS和JavaScript结合iro.js库，不到50行代码快速创建一个简单的色轮。提供了一个CDN导入库的方法，并展示了一个基本的使用样例。
摘要由CSDN通过智能技术生成

GIF.gif

简单，其实就是调库！

文档在这里 Get Started | iro.js

我也写了一个简单的样例在下面可以参考一下😉

使用

  1. 通过CDN导入：

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

  2. 在HTML中添加一个div：

    <div id="picker"></div>

  3. 最后在JS中创建：

    var colorPicker = new iro.ColorPicker("#picker", {
     
  // 初始宽度
  width: 320
最低0.47元/天 解锁文章
Mancuoj
关注
专栏目录
html css绘制24色环图,HTML5 色环钟表
weixin_36423062的博客
06-17 876
JavaScript语言：JaveScriptBabelCoffeeScript确定function clock(startAngle){var now = new Date(),canvas = document.getElementById('canvas'),ctx = canvas.getContext('2d'),cw = canvas.width,ch = canvas.height,...
使用 JavaScript 控制 CSS 中的颜色
clhq71932的博客
06-01 873
背景知识：颜色模型 点开这篇文章的你，肯定是想要学习怎样控制颜色的——我们后面就会讲具体操作。但首先，我们需要对 CSS 如何标记颜色有一个基本的认识。CSS 使用的是两种颜色模型：RGB 和 HSL，我们先简单了...
iro.js 开源项目教程
最新发布
gitblog_00895的博客
08-09 411
iro.js 开源项目教程 iro.js???? Modular color picker widget for JavaScript, with support for a bunch of color formats项目地址:https://gitcode.com/gh_mirrors/ir/iro.js 项目介绍 iro.js 是一个模块化的颜色选择器小部件，适用于 JavaScript，支持...
huewheel:HTML5 浏览器的 HUE 色轮
06-23
用于 JavaScript 的色相轮 色调演示的快照。 HueWheel 是一个 HSL/HSV HTML5 色轮控件。 支持 HSL/HSV <-> RGB 值，具有许多外观和功能选项。 该控件可以通过鼠标和触摸/笔进行控制。 特征： 旋转旋钮实时更改值。 HSL/HSV 色彩空间，内置 RGB、HSL 和 HSV 之间的色彩空间转换。 色相、饱和度、亮度/亮度（取决于所选的色彩空间模式）可以通过控件或以编程方式单独控制。 支持鼠标和触摸/笔 支持无障碍按键（当控制处于活动状态时） 高度可配置（可见控件、大小、起始值、转换后的 RGB <-> HSL/HSV、颜色等） 现场演示 请参阅此页面以获取现场演示： 例子 已激活所有可见功能 色点禁用 在 onchange 事件中，您仍会收到 RGB、HSL/HSV 形式的颜色值。 如果您想以自定义方式呈现当前颜色，这将非常有用。
color-circle:一个纯Javascript圆形颜色选择器
05-12
色环 纯JavaScript，圆形颜色选择器。
实用色轮图（赞、实用）
chelen_jak的专栏
07-11 2873
原文出处：https://www.jb51.net/photoshop/228718_2.html
HTML5设置filter图片滤镜代码.zip
11-18
同时，为了确保在不支持filter属性的老式浏览器中也能正常显示，我们通常需要提供一个备选方案，例如使用CSS渐变或图片替换。 总结起来，"HTML5设置filter图片滤镜代码.zip"中的代码示例将帮助你掌握如何在网页上...
使用 CSS 构建调色板：3 种方法
分享身边生活经验blog
04-04 1353
为网站确定调色板是一项艰巨的工作。这个过程在很大程度上依赖于设计、色彩理论和对比度方面的知识。在全面的网页设计过程开始之前，我们通常会从 Figma 这样的设计工具开始。使用这个设计工具，我们可以精心制作我们的设计，如何在 Windows 11/10 上重新安装 DirectX尝试不同的配色方案，并最终决定最终产品的外观。然后可以使用 CSS 和 HTML 的不同架构方法将完成的设计转化为工作原型。本教程主要关注用于设置配色方案并在设计实现过程中应用它们的 CSS 技术。
将 CSS 过滤器与 SVG 一起使用的完整指南
分享身边生活经验blog
09-25 889
SVG 或 Scalable Vector Graphics 是一种基于 XML 的矢量图像格式，用于显示二维图形。XML 是另一个花哨的首字母缩写词，代表可扩展标记语言。XML 用于存储和传输数据，并定义您的标签。回到 SVG。SVG 兼作图像和文档格式。JPEG 和 PNG 等常规图像格式由放大时通常会丢失质量的像素组成。SVG 的不同之处在于，无论您放大多少，它们都能保持质量。这是可能的，因为它们是由数学公式组成的。让我们看看 SVG 的底层是什么。首先，在代码编辑器中打开 SVG 图像。
ColorWheel:用p5.js制作的小彩色动画
05-08
色轮 使用p5.js制作的色轮动画
【JavaScript】canvas画色彩轮
zbxinsheng的博客
03-30 273
1、利用arc画色彩轮。2、利用直线画色彩轮。
Delphi实现RGB色环的代码绘制
03-23
Delphi实现RGB色环的代码绘制 Delphi实现RGB色环的代码绘制
JS颜色选择器，2个例子
09-12
JS颜色选择器 调用系统颜色选择器 颜色选择器 兼容IE 火狐 和谷歌等浏览器 程序开发时非常方便的一个颜色选择权
强大的js拾色器
11-27
强大的 js 拾色器，可以嵌套在页面中，能够精确地进行颜色拾取
最强的颜色选择器(JS)
01-26
最强的颜色选择器(JS)，可以用于后台中对标题颜色的控制等
iro.js:for适用于JavaScript的模块化颜色选择器小部件，支持多种颜色格式
04-30
适用于JavaScript的模块化，注重设计的拾色器小部件-支持多种颜色格式| | | | | | | 论坛 特征 通过一个简单，无摩擦的API处理十六进制，RGB，HSV和HSL格式的颜色（加上开尔文温度！） 将多种颜色添加到同一个颜色选择器中，以选择颜色和声和主题 通过选择预构建的UI组件创建完美的颜色选择器 所有iro.js都可以从单个脚本运行-无需额外CSS，图像或第三方库！ 缩小并压缩约9kb 根据MPL 2.0许可-100％免费用于个人和商业用途 Codepen演示 基本介绍 多色的 组件/替代布局 定制手柄SVG 安装 使用NPM安装 $ npm install @jaames/iro --save 如果您使用的是诸如Webpack或Rollup之类的模块捆绑器，请将iro.js导入到您的项目中： // Using ES6 module syntax
jQuery色轮插件 Farbtastic v1.3
時陨星的博客
10-14 579
到官网下载了一个，看到插件说明了可以供自己修改，就想到自己来升级一次版本，现在已升级到1.3版本。 （本插件基于jQuery框架，需引入后再使用） 下载链接：【提取码：7vnt】 http://pan.baidu.com/s/1Yj_Bl6bbfiFJZ1d_6xRQKg 使用方法： 1. 在HTML内引入js文件，顺序必须是 jquery 先 farbtastic 后： <sc...
HTML5颜色选择器（画布）
cukengwei3786的博客
08-05 1692
HTML5 Color Picker (canvas) In our new tutorial we are going to create an easy, but effective color picker using HTML5. I think that you have already seen different jQuery versions of colorpicker, our...
web前端-写给大家看的设计书-笔记-颜色运用-色轮使用
lamanchas的博客
08-11 590
RGB CMYK 色轮使用原理
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mancuoj

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值