Help us understand the problem. What is going on with this article?

昔、WEBのカラーコードを調べる時によくこういうモノで調べてました。

体内リズムが崩れてしまった、taokaです😆。
昔、WEBのカラーコードを調べる時によくこういうモノで調べてました。
今ではプラグインやデベロッパーツールで簡単にカラーコードが分かってしまいます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Description" content="Enter your description here" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
    <title>color/#Hexadecimal</title>
    <style>
        body {
            background-color: rgb(4, 6, 38);
            color: rgb(109, 135, 145);
        }
        h1{
            background-color: aliceblue;
        }
    </style>
</head>
<body onload="crgb(1)">
    <h1 class="h1 mt-5 mb-5"><a href="../">home</a></h1>
    <div class="form-group">
        <label for="myinput1">
            <h1 class="h1" style="color:red"></h1>
        </label>
        <input id="myinput1" class="form-control-range" type="range" name="" onchange="crgb()" value="4" min="0"
            max="255" step="1">
    </div>
    <div class="form-group">
        <label for="myinput2">
            <h1 class="h1" style="color: green;"></h1>
        </label>
        <input id="myinput2" class="form-control-range" type="range" onchange="crgb()" name="" value="6" min="0"
            max="255" step="1">
    </div>
    <div class="form-group">
        <label for="myinput3">
            <h1 class="h1" style="color: blue;"></h1>
        </label>
        <input id="myinput3" class="form-control-range" type="range" onchange="crgb()" name="" value="38" min="0"
            max="255" step="1">
    </div>
    <h1 class="h1" id="view">
    </h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <script>
        function crgb(off){
            // http://www-creators.com/archives/4463
            let getParam = function (name, url) {
                if (!url) url = window.location.href;
                name = name.replace(/[\[\]]/g, "\\$&");
                var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                    results = regex.exec(url);
                if (!results) return false;
                if (!results[2]) return false;
                return parseInt(decodeURIComponent(results[2].replace(/\+/g, " ")));
            };
            // https://taoka-toshiaki.com 
            if(off){
                document.getElementById("myinput1").value = getParam("r")!==false?getParam("r"):document.getElementById("myinput1").value;
                document.getElementById("myinput2").value = getParam("g")!==false?getParam("g"):document.getElementById("myinput2").value;
                document.getElementById("myinput3").value = getParam("b")!==false?getParam("b"):document.getElementById("myinput3").value;
            }
            document.body.style.backgroundColor = "rgb(" + document.getElementById("myinput1").value + "," + document.getElementById("myinput2").value + "," + document.getElementById("myinput3").value + ")";
            // https://lab.syncer.jp/Web/JavaScript/Snippet/60/
            let rgb2hex = function (rgb) {
                return "background-color:#" + rgb.map(function (value) {
                    return ("0" + parseInt(value).toString(16)).slice(-2);
                }).join("");
            };
            // https://taoka-toshiaki.com 
            document.getElementById("view").innerHTML = rgb2hex([document.getElementById("myinput1").value, document.getElementById("myinput2").value, document.getElementById("myinput3").value]);
            history.pushState(null, null, "?r=" + document.getElementById("myinput1").value + "&g=" + document.getElementById("myinput2").value + "&b=" + document.getElementById("myinput3").value);
        }
    </script>
</body>
</html>

question909
アイディアや個人用として使用しています。
https://taoka-toshiaki.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away