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
关注
专栏目录
华为OD机试 - 最少数量线段覆盖（JavaScript） | 机试题+算法思路+考点+代码解析 【2023】
坚果的博客
03-15 5709
给定坐标轴上的一组线段，线段的起点和终点均为整数并且长度不小于 1，请你从中找到最少数量的线段，这些线段可以覆盖住所有线段。
华为OD机试 - 简易压缩算法（Python） | 机试题算法思路 【2023】
梦想橡皮擦，专栏100例写作模式先行者，现象级专栏 《Python 爬虫 100 例》作者、《滚雪球学 Python 专栏》原创者
02-18 3897
简易压缩算法 题目 有一种简易压缩算法：针对全部为小写英文字母组成的字符串，将其中连续超过两个相同字母的部分压缩为连续个数加该字母 其他部分保持原样不变，例如字符串aaabbccccd 经过压缩变成字符串 3abb4cd 请您编写解压函数,根据输入的字符串, 判断其是否为合法压缩过的字符串 若输入合法则输出解压缩后的字符串 否则输出字符串 !error 来报告错误
Js之canvas获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件
11-17
Js之canvas获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件。
Js获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件。
热门推荐
qq_41076441的博客
11-19 1万+
Js获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件。 **应用场景：**在很多时候，前端开发过程中需要动态的获取图片的主要的颜色值，并根据主色调去调整主题样式的颜色或者模拟出一套配色方案，如图 根据png图片颜色，动态设置背景颜色或者文字颜色，使其提高对比度提高内容的可读性。 根据图片，模拟出一套主题配色方案。 实现及原理：以canvas的getImageData(...
js 中RGB十六进制码补色算法及实现 by shawl.qiu
星☆空 | 对生活要知足,学习要不知足,为人处事要知不足. 卍 ♂ | ♀ 卐 - 科技以人为本.
06-16 6889
js 中RGB十六进制码补色算法及实现 by shawl.qiu说明: 首先要明白, 什么是 RGB,  RGB 分别是Red, Green, Blue 的英文缩写. 希望更深入了解请查阅相关资料. Web 中 RGB 分别是 0-255 的值所表示的. RGB = (0-255)(0-255)(0-255), 单独表示: R = 255 0 0 G = 0 255 0  B = 0 0 25
JS rgba颜色转16进制
平平无奇小码农的博客
02-25 2968
例子： 值为：rgba(194, 7, 15, 1) ，转化16进制为： #c2070f //转化颜色 function getHexColor(color) { var values = color .replace(/rgba?\(/, '') .replace(/\)/, '') .replace(/[\s+]/g, '') .split(',') var a = parseFloat(values[3] || 1), r = Math.floor(a
通过js获取主要颜色
06-26
最近写了个js，可以用来获取图片的主要颜色 只需要引入js，然后在js中用以下方法引用。 Maincolor.getmaincolor(图片，{sucess:function(p(任意参数){p.maincolor//主要颜色//可以进行各种操作}，是否忽略黑色（默认是忽略，可以填null），色阶)
js获取主要颜色
LINBINGYING的博客
07-02 2838
这个就是我封装好js库，获取一张图片主要的颜色，下载在我的资源那里，可以下载
JavaScript常用基础算法
玖尘的博客
02-18 4348
一、字符串 1.字符串中出现最多次数的字符 function findMaxDuplicateChar(str) { var cnt = {}, // 用来记录所有的字符的出现频次 c = ""; // 用来记录最大频次的字符 for (var i = 0; i < str.length; i++) { var ci = str[i]; if (!cnt[ci]) {
【JavaScript算法实践】最短路径算法
tmc1655337354的博客
12-08 2512
目录前言一、Dijkstra算法算法实现二、Floyd-Warshall 算法算法实现 前言 最短路问题是图问题中的经典问题，这类问题在生活中非常常见，我们（特别是生活在大城市的人）出门在外，无论是驾车还是乘坐公共交通工具，甚至步行，都会求助于高德地图、百度地图等定位和导航程序。我们可能会有其他的考虑：例如如何乘车、换乘？如何避开拥堵路段？但根本的问题仍然是：哪条路径最短？ 在图问题中，这一问题对应的算法被称为最短路径算法。本文介绍其中两种非常著名算法的JavaScript实现： Dijkstra算法和F
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 359
这并不是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实现RGB,HSL,HSB相互转换
magic-zhu
08-12 5380
前言 最近呢，在写色彩选择器小插件的时候需要用到RGB,HSL,HSB相互转换的一些东西，就想着好好整理一下这方面的内容，顺便用js实现一下三者之间的转换，通过对色彩转换的学习，对平时整整ps，摄影也是有一定的基础帮助的,恩！ 色彩模型 关于色彩模型的相关知识，主要是整理了别人的分享主要参考了色彩模型介绍和HSL,HSV维基百科上的内容，这里简单做下整理 RGB模型 RGB模型也称为加色法混色模型，以RGB三色光互相叠加来实现混色的方法。 它是一种以硬件为导向的色彩模型，它描述了显示器的电子枪打在Red红、
探索色彩的艺术：iro.js —— 轻量级JavaScript调色板组件
最新发布
gitblog_00098的博客
05-14 551
探索色彩的艺术：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 项目介绍 在网页设计和应用开发中，色彩选择是...
WEB-互补色与对比色的计算与获取 (实用、赞）
chelen_jak的专栏
09-10 8630
原文出处：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生成随机颜色_代码与艺术(0)—随机中的秩序
weixin_30972459的博客
12-25 459
一、随机颜色 随机和秩序普遍存在于自然界中，但是自然界中往往没有纯粹的随机与纯粹的秩序。纯粹的随机混乱而无序，纯粹的秩序重复而枯燥，美也许存在于随机与秩序之间的某个平衡点。如下图，RGB通道同时随机，特点是色彩种类多，明暗和饱和度不一，不协调RBG随机换成HSB模型，饱和度和高亮为1，色调随机，如下图。特点是色彩种类多，比较鲜艳，让人眼花缭乱，非常不协调。HSB随机限制色调，统一为蓝色，...
利用js对颜色取反
qq_43121828的博客
06-10 3630
//颜色取反方法 function ColorReverse(OldColorValue){ var OldColorValue = “0x”+OldColorValue.replace(/#/g,""); var str=“000000”+(0xFFFFFF-OldColorValue).toString(16); return ‘#’ + str.substring(str.length-6,...
JavaScript 16进制色值获取反色色值
jason_renyu的博客
04-16 4386
JavaScript 16进制色值获取反色色值 这个为js获取16进制色值的反色色值的方法 /** * 16进制色值获取反色设置方法 * @param {String} oldColor 为16进制色值的字符串（例：'#000000'） * @return {String} 返回反色的色值（例：'#ffffff'） */ const colorReverse = (oldColor) => { oldColor = '0x' + oldColor.replace(/#/g, ''
使用JavaScript创建RGB网页颜色取色器
这个JS实现的RGB网页颜色在线取色器实例涵盖了JavaScript基础、CSS样式应用、DOM操作以及颜色处理的相关知识，是学习网页交互和颜色处理的一个很好的实践案例。开发者可以通过分析和扩展这个实例，学习如何在网页上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值