js生成相近色颜色RGB代码

最新推荐文章于 2023-08-22 11:22:50 发布

翟同学

最新推荐文章于 2023-08-22 11:22:50 发布

阅读量2k

点赞数 2

文章标签：前端 javascript html5 css

本文链接：https://blog.csdn.net/weixin_44364001/article/details/121398844

版权

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

<!--
 * @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
    }
    //找到最大的RGB
    function findMaxRGB(R, G, B) {
        let max
        let index
        if (R >= G && R >= B) {
            max = R
            index = 'R'
        }
        if (G >= R && G >= B) {
            max = G
            index = 'G'
        }
        if (B >= R && B >= G) {
            max = B
            index = '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 = colorRGB
            base.style.backgroundColor = `rgb(${colorRGB})`
            colorChange(parseInt(arr[0]), parseInt(arr[1]), parseInt(arr[2]))
        }

    }
    //16进制转RGB
    function foramgeRGB(color) {
        // 16进制颜色值的正则
        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        // 把颜色值变成小写
        color = color.toLowerCase();
        if (reg.test(color)) {
            // 如果只有三位的值，需变成六位，如：#fff => #ffffff
            if (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;
            }
            // 处理六位的颜色值，转为RGB
            var 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>

在这里插入图片描述

翟同学

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
js生成相近色颜色RGB代码

分享一个自己写的小工具，输入一个颜色代码可以得到三个相近色颜色代码<!DOCTYPE html><html lan
复制链接

扫一扫