JavaScript调色器以及取互补色的算法思路

最新推荐文章于 2024-05-14 09:51:45 发布
最新推荐文章于 2024-05-14 09:51:45 发布
阅读量8k 收藏 2
点赞数
分类专栏： javascript 文章标签： javascript 算法 function prototype 框架 dojo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lenel/article/details/2029334
版权
本文介绍了使用JavaScript制作调色器的过程中，如何实现HSB（HSL）与RGB色彩模式之间的转换算法，以及找到颜色的互补色。通过探讨色调、饱和度和亮度的概念，提出了在HSL色彩模式下计算互补色的方法，并分享了JavaScript代码实现。
摘要由CSDN通过智能技术生成
id="alimamaifrm" border="0" name="alimamaifrm" marginwidth="0" marginheight="0" src="http://p.alimama.com/code.php?t=2&i=mm_10003521_106784_109301&w=760&h=90&sz=11&bgc=FFFACD&bdc=FFFFFF&tc=000080&lc=000000&dc=000000" scrolling="no" width="760" frameborder="0" height="90">

最近用js做了个调色器, 功能和xp自带的调色器一样.

似乎CSDN博客不能跑JS,就发个干巴图上来,可以去alimama发布个广告位看看:).

做这个的过程我主要的工作就是上网查寻了色彩模式HSB(有的地方叫HSL)和RGB的转换算法

最终我找到了颜色方面的算法大全

最低0.47元/天 解锁文章
lenel
关注
专栏目录
HSL_Color_Picker：用于草图的HSL拾色器（不再维护）
02-06
HSL拾色器 由于Sketch 53支持HSL，因此该项目不再需要维护。 安装 从搜索“ HSL颜色选择器”。 下载 ，解压缩，然后双击“ HSL_Color_Picker.sketchplugin”。 执照 麻省理工学院 捐 或通过PayPal捐赠 。
WEB-互补色与对比色的计算与获取 (实用、赞）
chelen_jak的专栏
09-10 8824
原文出处：http://blog.ipodmp.com/2014/03/web-and-calculation-of-complementary-and-contrasting-colors-to-obtain.html WEB-互补色与对比色的计算与获取 2014/03/18 ChinaBUG％1 $ S 今天在做界面设计是需要互补色凸显一下效果，发现手上没有工具啦，好吧，找一下计算方式吧，起码没有应手的工具之前，可以先应付一下。 互补色 摘自：互补色简单计算法 这个是色相色谱，位于180度
Js获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件。
热门推荐
qq_41076441的博客
11-19 1万+
Js获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件。 **应用场景：**在很多时候，前端开发过程中需要动态的获取图片的主要的颜色值，并根据主色调去调整主题样式的颜色或者模拟出一套配色方案，如图 根据png图片颜色，动态设置背景颜色或者文字颜色，使其提高对比度提高内容的可读性。 根据图片，模拟出一套主题配色方案。 实现及原理：以canvas的getImageData(...
JS实现RGB,HSL,HSB相互转换
magic-zhu
08-12 5482
前言 最近呢，在写色彩选择器小插件的时候需要用到RGB,HSL,HSB相互转换的一些东西，就想着好好整理一下这方面的内容，顺便用js实现一下三者之间的转换，通过对色彩转换的学习，对平时整整ps，摄影也是有一定的基础帮助的,恩！ 色彩模型 关于色彩模型的相关知识，主要是整理了别人的分享主要参考了色彩模型介绍和HSL,HSV维基百科上的内容，这里简单做下整理 RGB模型 RGB模型也称为加色法混色模型，以RGB三色光互相叠加来实现混色的方法。 它是一种以硬件为导向的色彩模型，它描述了显示器的电子枪打在Red红、
html中的hsl颜色表示法
鞠培中的专栏
09-29 3593
在html中用的最多的莫过于rgb了，不过有的时候我们
银行家算法-javascript实现.zip
01-08
银行家算法-javascript实现.zip 银行家算法-javascript实现.zip银行家算法-javascript实现.zip银行家算法-javascript实现.zip银行家算法-javascript实现.zip银行家算法-javascript实现.zip银行家算法-javascript实现...
JavaScript前端算法.zip
最新发布
06-12
本压缩包包含了一系列与JavaScript算法相关的学习资料和代码示例，主要涉及了数据结构如链表、树，以及排序算法等主题。 1. **链表**：在"2链表.js"中，你可以找到关于链表操作的实现，如插入、删除、遍历等。链表...
JavaScript-使用javascript开发的排序算法-sorting.zip
02-25
在这个"JavaScript-使用javascript开发的排序算法-sorting.zip"压缩包中，很可能是包含了各种常见的排序算法实现，比如冒泡排序、插入排序、选择排序、快速排序、归并排序以及堆排序等。 1. **冒泡排序**：冒泡排序...
基于JavaScript 实现的KMP 算法
04-24
总结，JavaScript实现KMP算法涉及到的主要知识点包括：部分匹配表的概念和生成方法，以及如何利用部分匹配表进行字符串匹配。通过理解这些概念，你可以有效地在JavaScript环境中实现高效的字符串搜索算法，提高代码...
JavaScript ColorPicker 网页取色器代码.rar
07-09
JavaScript ColorPicker 网页取色器，记得以前有一个和这个外表一模一样，不过代码就有些大不相同了，因为以前的使用了Jquery，貌似这个仅依靠JavaScript就实现了，所以还是发上来，大家不要误以为是重复的，好好...
Js之canvas获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件
11-17
Js之canvas获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件。
通过js获取主要颜色
06-26
最近写了个js，可以用来获取图片的主要颜色 只需要引入js，然后在js中用以下方法引用。 Maincolor.getmaincolor(图片，{sucess:function(p(任意参数){p.maincolor//主要颜色//可以进行各种操作}，是否忽略黑色（默认是忽略，可以填null），色阶)
JavaScript实现HSL拾色器
10-15
主要为大家详细介绍了JavaScript实现HSL拾色器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript HSL拾色器
司马懿的西山居
01-16 3867
HSL 和 HSV 在数学上定义为在 RGB 空间中的颜色的 R, G 和 B 的坐标的变换。从 RGB 到 HSL 或 HSV 的转换设 (r, g, b) 分别是一个颜色的红、绿和蓝坐标，它们的值是在 0 到 1 之间的实数。设 max 等价于 r, g 和 b 中的最大者。设 min 等于这些值中的最小者。要找到在 HSL 空间中的 (h, s, l) 值，这里的 h ∈ [0, 360）是角
探索色彩的艺术：iro.js —— 轻量级JavaScript调色板组件
gitblog_00098的博客
05-14 590
探索色彩的艺术：iro.js —— 轻量级JavaScript调色板组件 iro.js???? Modular color picker widget for JavaScript, with support for a bunch of color formats项目地址:https://gitcode.com/gh_mirrors/ir/iro.js 项目介绍 在网页设计和应用开发中，色彩选择是...
js生成随机颜色_代码与艺术(0)—随机中的秩序
weixin_30972459的博客
12-25 472
一、随机颜色 随机和秩序普遍存在于自然界中，但是自然界中往往没有纯粹的随机与纯粹的秩序。纯粹的随机混乱而无序，纯粹的秩序重复而枯燥，美也许存在于随机与秩序之间的某个平衡点。如下图，RGB通道同时随机，特点是色彩种类多，明暗和饱和度不一，不协调RBG随机换成HSB模型，饱和度和高亮为1，色调随机，如下图。特点是色彩种类多，比较鲜艳，让人眼花缭乱，非常不协调。HSB随机限制色调，统一为蓝色，...
HSB(HSV) 转 RGB 颜色 （js转换公式）
loushengyue
01-17 1万+
HSB(HSV)概念 HSB又称HSV，表示一种颜色模式：在HSB模式中，H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度HSB模式对应的媒介是人眼。 HSB模式中S和B呈现的数值越高，饱和度明度越高，页面色彩强烈艳丽，对视觉刺激是迅速的，醒目的效果，但不益于长时间的观看。 色相（H,hue）：在0~360°的标准色轮上，色相是按位置度量的。在...
Color.js 方便修改颜色值
weixin_30650039的博客
02-19 375
这并不是npm上比较活跃的clolr包的中文文档，不过它在最后提到了： The API was inspired by color-js. Manipulation functions by CSS tools like Sass, LESS, and Stylus. 嗯，就是那个color-js。虽然大体功能一致，新的color库使用更简洁。 Color.js是一个能加强前端开发中对颜色...
利用js对颜色取反
qq_43121828的博客
06-10 3685
//颜色取反方法 function ColorReverse(OldColorValue){ var OldColorValue = “0x”+OldColorValue.replace(/#/g,""); var str=“000000”+(0xFFFFFF-OldColorValue).toString(16); return ‘#’ + str.substring(str.length-6,...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值