js生成相近色颜色RGB代码

分享一个自己写的小工具，输入一个颜色代码可以得到三个相近色颜色代码

<!--* @Description: * @Author: Zhaihanneng* @Date: 2021-11-18 10:03:45* @Last Modified by: Zhaihanneng* @LastEditors: Zhaihanneng* @LastEditTime: 2021-11-18 11:55:22
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {/* width: 1200px; */margin: 0 auto;}.header{width: 1200px;margin: 0 auto;}.top{width: 100%;height: 50px;line-height: 50px;padding: 0 30px;background-color: rgba(24, 143, 190, 0.788);color: #fff;font-weight: 700;}.color-box {display: flex;justify-content: space-between;align-items: center;}.box {width: 200px;height: 200px;display: flex;justify-content: center;align-items: center;background-color: rgb(226, 226, 226);margin: 30px;}.basic-input-box {margin-top: 30px;}</style>
</head><body><div class="top"><span>获取近似色</span></div><div class="header"><div class="basic-input-box"><span><label style="font-size:12px;margin-right:10px" for="name">请输入颜色值</label><input class="basic-input"id="colorText" onchange="changeInput(this.value)" type="text" placeholder="R,G,B" /></span><input type="color" name="color" id="color" onchange="changeColor()" /><span id="colorInfo"></span></div><div class="color-box"><div id="base" class="box"> 基础色 </div><div id="base1" class="box"> </div><div id="base2" class="box"> </div><div id="base3" class="box"> </div></div></div>
</body></html>
<script>var base = document.getElementById('base')var base1 = document.getElementById('base1')var base2 = document.getElementById('base2')var base3 = document.getElementById('base3')base.style.backgroundColor = '#ccc'function colorChange(R, G, B) {//找到最大的色值let maxColorObject = findMaxRGB(R, G, B)//生成相近色let shallowColorArray = getShallowRGB(maxColorObject, R, G, B)base1.style.backgroundColor = `rgb(${shallowColorArray[0].toString()})`base1.innerText = `rgb(${shallowColorArray[0].toString()})`base2.style.backgroundColor = `rgb(${shallowColorArray[1].toString()})`base2.innerText = `rgb(${shallowColorArray[1].toString()})`base3.style.backgroundColor = `rgb(${shallowColorArray[2].toString()})`base3.innerText = `rgb(${shallowColorArray[2].toString()})`}function getShallowRGB(maxColorObject, R, G, B) {let threshold = 40//色阶偏差值let offset = 10//色深偏差值let result = []for (var d in maxColorObject) {if (d == 'R') {result = [[R - offset, G + threshold, B + threshold],[R - offset, G + threshold+20, B + threshold+20],[R - offset, G + threshold+40, B + threshold+40]]} else if (d == 'G') {result = [[R + threshold, G - offset, B + threshold],[R + threshold+20, G - offset, B + threshold+20],[R + 60, G - offset, B + 60]]} else if (d == 'B') {result = [[R + threshold, G + threshold, B - offset],[R + threshold+20, G + threshold+20, B - offset],[R + threshold+40, G + threshold+40, B - offset]]}}return result}//找到最大的RGBfunction findMaxRGB(R, G, B) {let maxlet indexif (R >= G && R >= B) {max = Rindex = 'R'}if (G >= R && G >= B) {max = Gindex = 'G'}if (B >= R && B >= G) {max = Bindex = 'B'}return {[index]: max}}//输入框改变事件function changeInput(param) {var arr = param.split(",");if (arr.length == 3) {console.log(arr);base.style.backgroundColor = `rgb(${param})`colorChange(parseInt(arr[0]), parseInt(arr[1]), parseInt(arr[2]))}}var color = document.getElementById("color"); //通过使用 getElementById() 来访问 <color> 元素var colorInfo = document.getElementById("colorInfo");colorInfo.style.color = color.value; //给<span>的字体加颜色colorInfo.innerHTML = color.value; //给<span>加内容(<color>的值)//颜色选择器改变事件function changeColor() { //改变颜色的事件var colorText = document.getElementById('colorText')colorInfo.style.color = color.value;colorInfo.innerHTML = color.value;console.log('颜色改变了', color.value);let colorRGB = foramgeRGB(color.value)var arr = colorRGB.split(",");if (arr.length == 3) {console.log(arr);colorText.value = colorRGBbase.style.backgroundColor = `rgb(${colorRGB})`colorChange(parseInt(arr[0]), parseInt(arr[1]), parseInt(arr[2]))}}//16进制转RGBfunction foramgeRGB(color) {// 16进制颜色值的正则var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;// 把颜色值变成小写color = color.toLowerCase();if (reg.test(color)) {// 如果只有三位的值，需变成六位，如：#fff => #ffffffif (color.length === 4) {var colorNew = "#";for (var i = 1; i < 4; i += 1) {colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));}color = colorNew;}// 处理六位的颜色值，转为RGBvar colorChange = [];for (var i = 1; i < 7; i += 2) {colorChange.push(parseInt("0x" + color.slice(i, i + 2)));}return colorChange.join(",");} else {return color;}};
</script>

js生成相近色颜色RGB代码相关推荐

js中的颜色对应代码
颜色对照表:
pyecharts 数据可视化 Bar柱状图生成和颜色优化
python pyecharts包之柱形图基本的柱形图通过循环将数据添加y轴上 Jscode包对pyecharts包中使用js代码的集成,对于会js的,可太友好了,也很实用原始图..配置项中使 ...
element table row-style 实现列颜色区分以及 js生成随机色，避免相近色
实现仓库看板需求遇到的问题 table 显示的不同订单生产编码同时下线字体用不同颜色区分随机生成颜色,不能过于相似,避免灰颜与过暗步骤需要实现不同的订单号展示不同的颜色.之前有使用 " ...
D3.js绘制颜色:RGB、HSL和插值 (V3版本)
转载地址:D3.js绘制颜色:RGB.HSL和插值 (V3版本) 如果要计算介于两个颜色之间的颜色,需要用到插值(Interpolation).D3提供了d3.intrerpolateRgb()来处 ...
JS 处理十六进制颜色渐变算法-输入颜色，输出渐变rgb数组
html颜色有几种表示方式: 英文单词颜色值:background-color:Blue: 十六进制颜色值:background-color:#FFFFFF: RGB颜色值三元数字:backgrou ...
js中的颜色对应的常量代码code
颜色的对照表颜色英文代码形像颜色 HEX格式 RGB格式 LightPink 浅粉红 #FFB6C1 255,182,193 Pink 粉红 #FFC0CB 255,192,203 ...
各种颜色的英文表述，以及RGB代码
颜色英文代码形像颜色 HEX格式 RGB格式 LightPink 浅粉红 #FFB6C1 255,182,193 Pink 粉红 #FFC0CB 255,192,203 Crimson 猩红 #D ...
用JS生成MIDI文件（附代码）
用JS生成MIDI文件大家好,近期我们的课程需要我们做一个应用,我的的小组打算做一个在线的伴奏制作平台,这意味着我们需要知道如何在线制作音乐以及如何用浏览器播放. 小编我这一节就跟大家讲解下如何用J ...
自动生成表格html,js实现自动生成表格功能的代码实例
js实现自动生成表格功能的代码实例发布时间:2020-07-18 17:45:52 来源:亿速云阅读:115 作者:小猪这篇文章主要讲解了js实现自动生成表格功能的代码实例,内容清晰明了,对此有 ...

js生成相近色颜色RGB代码

js生成相近色颜色RGB代码相关推荐

最新文章

热门文章