颜色选择器 rgb 与16进制 颜色转换
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>
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>
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进制 颜色转换的更多相关文章
- C# RGB与16进制颜色转换方法
http://www.cnblogs.com/goldarch/archive/2010/08/16/1801053.html #region [颜色:16进制转成RGB] /// &l ...
- JS实现rgb与16进制颜色相互转换
1.rgb转16进制 function to16 (a) {//RGB(204,204,024) //十六进制颜色值的正则表达式 var reg = /^#([0-9a-fA-f]{3}|[0-9a- ...
- RGB与16进制颜色转换的原理
Integer有进制转换的方法.也可以自己写进制转换的方法.
- iOS 16进制颜色和UIcolor的转换
各种颜色之间的转换,会陆续更新, 实现了 16进制颜色(HEX).RGBA.HSBA.UIColor之间的 相互转换 使用示例(加号方法,类名调用) //UIColor 转 RGB.HSB RGBA ...
- iOS 直接使用16进制颜色
在做iOS开发时,一般我们会吸色,就是产品给的图我们一般会吸色,但是最近吸色时候,老大说有较大的颜色偏差,所以要求我们直接使用UI给出的额16进制颜色,你也可以搜索<RGB颜色值转换成十六进制颜 ...
- swift - 16进制颜色扩展(1.支持# 2.支持不带# ， 3支持带0X)
/** * 设置16进制颜色: * 可识别类型 * 1:有# * 2:没有# * 3:含有0X */ extension UIColor{ class func hexadecimalColor(he ...
- C#中一个简单的匹配16进制颜色的正则测试
using System; using System.Text.RegularExpressions; namespace Test { class Program { //匹配16进制颜色代码的正则 ...
- C#颜色 Color.FromArgb ColorTranslator 16进制
//方法1: //引用命名空间 using System.Drawing; 16进制颜色代码转Color类型:ColorTranslator.FromHtml(color); Color类型转16进制 ...
- iOS开发中16进制颜色(html颜色值)字符串转为UIColor
//16进制颜色(html颜色值)字符串转为UIColor +(UIColor *) hexStringToColor: (NSString *) stringToConvert { NSString ...
随机推荐
- Docker学习笔记之保存和共享镜像
0x00 概述 让 Docker 引以为傲的是它能够实现相比于其他虚拟化软件更快的环境迁移和部署,在这件事情上,轻量级的容器和镜像结构的设计无疑发挥了巨大的作用.通过将容器打包成镜像,再利用体积远小于 ...
- Thinkphp5 分页带参数
原文链接:http://www.zhaisui.com/article/51.html
- [Errno 2] No such file or directory
Centos7.5 执行ansible命令报错 问题: [root@m01 ~]# ansible servers -a "hostname|grep web" -i ./host ...
- CentOS6.8下安装mysql
转自https://blog.csdn.net/jeffleo/article/details/53559712?utm_source=itdadao&utm_medium=referral ...
- Restful framework【第四篇】视图组件
基本使用 -view的封装过程有空可以看一下 -ViewSetMixin # ViewSetMixin 写在前面,先找ViewSetMixin的as_view方法 # 用了ViewSetMixin , ...
- 4698: Sdoi2008 Sandy的卡片
前言 总之这个东西说起来很麻烦就是了, 思路 差分合并+后缀数组+二分(dddl) 类似于那个bzoj1031的复制子串和那个poj1743的差分 来看个例子 3 5 1 2 3 4 5 4 1 1 ...
- p3792 由乃与大母神原型和偶像崇拜（思维+线段树）
要求 1.修改x位置的值为y 2.查询区间l,r是否可以重排为值域上连续的一段 可以,很lxl 然后一开始思考合并区间,但是发现可以重排序,GG 然后想了特殊性质,比如求和,但是显然可以被叉 这时候我 ...
- Component 初识组件
component组件是Vue学习的重点.重点.重点,重要的事情说三遍.所以你必须学好Vue component.其实组件就是制作自定义的标签,这些标签在HTML中是没有的.比如:<diy> ...
- 5、web站点架构模式简介及Nginx
LB Cluster: 提升系统容量的方式: scale up:向上扩展 scale out:向外扩展 LVS工作在内核中,本身的数量不受套接字数量限制,利用LVS做调度器,优化得当的话,并发数量可以 ...
- 【译】第38节---EF6-基于代码的配置
原文:http://www.entityframeworktutorial.net/entityframework6/code-based-configuration.aspx EF6引入了基于代码的 ...