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 上的样式还挺不错的

颜色选择器 rgb 与16进制 颜色转换的更多相关文章

  1. C# RGB与16进制颜色转换方法

    http://www.cnblogs.com/goldarch/archive/2010/08/16/1801053.html #region [颜色:16进制转成RGB]        /// &l ...

  2. JS实现rgb与16进制颜色相互转换

    1.rgb转16进制 function to16 (a) {//RGB(204,204,024) //十六进制颜色值的正则表达式 var reg = /^#([0-9a-fA-f]{3}|[0-9a- ...

  3. RGB与16进制颜色转换的原理

    Integer有进制转换的方法.也可以自己写进制转换的方法.

  4. iOS 16进制颜色和UIcolor的转换

    各种颜色之间的转换,会陆续更新, 实现了 16进制颜色(HEX).RGBA.HSBA.UIColor之间的  相互转换 使用示例(加号方法,类名调用) //UIColor 转 RGB.HSB RGBA ...

  5. iOS 直接使用16进制颜色

    在做iOS开发时,一般我们会吸色,就是产品给的图我们一般会吸色,但是最近吸色时候,老大说有较大的颜色偏差,所以要求我们直接使用UI给出的额16进制颜色,你也可以搜索<RGB颜色值转换成十六进制颜 ...

  6. swift - 16进制颜色扩展(1.支持# 2.支持不带# ， 3支持带0X)

    /** * 设置16进制颜色: * 可识别类型 * 1:有# * 2:没有# * 3:含有0X */ extension UIColor{ class func hexadecimalColor(he ...

  7. C#中一个简单的匹配16进制颜色的正则测试

    using System; using System.Text.RegularExpressions; namespace Test { class Program { //匹配16进制颜色代码的正则 ...

  8. C#颜色 Color.FromArgb ColorTranslator 16进制

    //方法1: //引用命名空间 using System.Drawing; 16进制颜色代码转Color类型:ColorTranslator.FromHtml(color); Color类型转16进制 ...

  9. iOS开发中16进制颜色(html颜色值)字符串转为UIColor

    //16进制颜色(html颜色值)字符串转为UIColor +(UIColor *) hexStringToColor: (NSString *) stringToConvert { NSString ...

随机推荐

  1. Centos 7系统虚拟机桥接模式 固定ip

    前言 本文主要给大家介绍了关于Centos 7系统虚拟机桥接模式的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 主机ping不通虚拟机centos7系统的ip大多有以下原 ...

  2. Linux维护常用命令

    1.查看Linux占用内存/CPU最多的进程 可以使用以下命令查使用内存最多的10个进程 #ps -aux | sort -k4nr | head -n 10可以使用以下命令查使用CPU最多的10个进 ...

  3. bzoj 2936 [Poi 1999] 降水 - 并查集

    题目传送门 需要root权限的传送门 题目大意 有一个$n\times m$的网格图,每一格都有一个高度.一次降雨过后问最多能积多少水. 考虑算每一高度能储存的水的量. 如果小于等于这个高度的格子和边 ...

  4. NOIP 车站分级 (luogu 1983 & codevs 3294 & vijos 1851) - 拓扑排序 - bitset

    描述 一条单向的铁路线上,依次有编号为 1, 2, ..., n 的 n 个火车站.每个火车站都有一个级别,最低为 1 级.现有若干趟车次在这条线路上行驶,每一趟都满足如下要求:如果这趟车次停靠了火车 ...

  5. 动态规划之139 Word Break

    题目链接:https://leetcode-cn.com/problems/word-break/ 参考链接:https://blog.csdn.net/c_flybird/article/detai ...

  6. Jbarcode 条形码生成工具

    一.准备jar包 https://sourceforge.net/projects/jbcode/?source=typ_redirect 二.编写工具类 package com.example.de ...

  7. Android系统更新防互刷功能实现与分析【转】

    本文转载自:https://blog.csdn.net/huangyabin001/article/details/44465145 版权声明:本文为博主原创文章,未经博主允许不得转载.    htt ...

  8. linux内核中宏likely和unlikely到底做了些什么？

    1. 先看看它们长啥样吧!(它们有两种定义,第一种是使能了程序trace功能的宏定义,第二种是普通的宏定义,咱们分析普通宏定义吧) # define likely(x) __builtin_expec ...

  9. CodeTyphon跨平台交叉编译的配置

    CodeTyphon和Lazarus的关系相当于就是ubuntu和linux的关系 不过CodeTyphon提供了很多一键配置即可使用的交叉编译配置,而Lazarus就比较麻烦了,我也没用Lazaru ...

  10. hihoCoder week11 树中的最长路

    题目链接: https://hihocoder.com/contest/hiho11/problem/1 求树中节点对 距离最远的长度 #include <bits/stdc++.h> u ...