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

时间：2023-03-08 16:10:25

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>

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>

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;

}

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)"

备注：

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

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

相关文章