颜色选择器 rgb 与16进制颜色转换

justSmile2 2021-08-26 原文

1. h5

<!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">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    input{
      display: block;
      width: 200px;
      height: 50px;
    }
  </style>
</head>

<body>
    <p>    
        <input type="color" id="txtColor" value="#3289c7">
        <input type="text" id="txtStyle" value="#3289c7">
           </p>
  <script src="jquery-1.9.1.min.js"></script>
  <script>
    
    $(\'#txtColor\').on(\'change\', function (e) {
      var color = this.value;
      $("#txtStyle").val(color);
    });
    $(\'#txtStyle\').on(\'change\', function (e) {
      var color = this.value;
      $("#txtColor").val(color);
    });
  </script>
</body>

</html>

View Code

HTML DOM Color 对象

2. colorpicker 插件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://farbelous.io/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css" rel="stylesheet">
</head>
<body>
  <div class="jumbotron">
      <h1>Bootstrap Colorpicker Demo</h1>
      <input id="demo" type="text" class="form-control" value="rgb(255, 128, 0)" />
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
  <script src="https://farbelous.io/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js"></script>
  <script>
    $(function () {
      // Basic instantiation:
      $(\'#demo\').colorpicker();

      // Example using an event, to change the color of the .jumbotron background:
      $(\'#demo\').on(\'colorpickerChange\', function(event) {
        $(\'.jumbotron\').css(\'background-color\', event.color.toString());
      });
    });
  </script>
</body>

View Code

Bootstrap Colorpicker

3. rgb 转 16 方法

// rgb to 16
function colorRGB2Hex(color) {
    var rgb = color.split(\',\');
    var r = parseInt(rgb[0].split(\'(\')[1]);
    var g = parseInt(rgb[1]);
    var b = parseInt(rgb[2].split(\')\')[0]);

    var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    return hex;
}

View Code

4. 16进制转 rgb

function getRGB(hex){
    var rgb=[0,0,0];
    if(/#(..)(..)(..)/g.test(hex)){
        rgb=[parseInt(RegExp.$1,16),parseInt(RegExp.$2,16),parseInt(RegExp.$3,16)];
    };
    return "rgb("+rgb.join(",")+")";
}
getRGB(\'#00ff00\');  //"rgb(0,255,0)"

View Code

备注：

h5 自带的编辑工具要填充默认颜色，不然有 bug

ie 不兼容，edge 倒是可以，而且 h5 上的样式还挺不错的