Hex hsl 转换 php,HEX和RGB和HSL颜色数值在线转换工具
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
//http://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion/9493060#9493060
function rgb2hsl(rgb) {
// arguments: [r,g,b] or r,g,b
// return [H, S, L];
if (rgb instanceof Array) {
r = rgb[0] / 255;
g = rgb[1] / 255;
b = rgb[2] / 255;
} else {
r = arguments[0] / 255;
g = arguments[1] / 255;
b = arguments[2] / 255;
}
//r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b),
min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0; // achromatic
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
var H = h * 360;
var S = s * 100;
var L = l * 100;
return [H, S, L];
} // arguments: [r,g,b] or r,g,b
function hsl2rgb(HSL) {
// arguments: [H,S,L] or H,S,L
//return [r, g, b];
if (HSL instanceof Array) {
h = Number(HSL[0]) / 360;
s = Number(HSL[1]) / 100;
l = Number(HSL[2]) / 100;
} else {
h = Number(arguments[0]) / 360;
s = Number(arguments[1]) / 100;
l = Number(arguments[2]) / 100;
}
// var h = H/360;
//var s = S/100;
//var l = L/100;
var r, g, b;
if (s == 0) {
r = g = b = l; // achromatic
} else {
var hue2rgb = function hue2rgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
} // arguments: [H,S,L] or H,S,L
function rgb2hex(rgb) {
if (rgb instanceof Array) {
r = Number(rgb[0]);
g = Number(rgb[1]);
b = Number(rgb[2]);
} else {
r = Number(arguments[0]);
g = Number(arguments[1]);
b = Number(arguments[2]);
}
var hexR = r.toString(16);
if (hexR.length == 1) {
hexR = "0" + hexR;
};
var hexG = g.toString(16);
if (hexG.length == 1) {
hexG = "0" + hexG;
};
var hexB = b.toString(16);
if (hexB.length == 1) {
hexB = "0" + hexB;
};
return [hexR, hexG, hexB];
} // arguments: array [r,g,b] or 3 values: r,g,b
function hex2rgb(hex) {
// arguments: array [r,g,b] or 3 values: r,g,b
var rgbRy = [];
if (hex instanceof Array) {
for (var i = 0; i < hex.length; i++) {
rgbRy[i] = parseInt(hex[i], 16);
}
} else {
for (var i = 0; i < arguments.length; i++) {
rgbRy[i] = parseInt(arguments[i], 16);
}
}
return rgbRy;
} // arguments: array [r,g,b] or 3 values: r,g,b
function hsl2hex(HSL) { // arguments: [H,S,L]!!!
var rgb = hsl2rgb(HSL);
console.log(rgb)
return rgb2hex(rgb);
} // arguments: [H,S,L]!!!
function hex2hsl(HEX) { // arguments: [R,G,B]!!!
var rgb = hex2rgb(HEX);
return rgb2hsl(rgb);
} // arguments: [R,G,B]!!!
function hex2ry(hex) {
if (hex.charAt(0) == "#") {
hex = hex.substr(1);
}
var hexRy = ["ff", "ff", "ff"];
if (hex.length == 6) {
hexRy[0] = hex.slice(0, 2);
hexRy[1] = hex.slice(2, 4);
hexRy[2] = hex.slice(4, 6);
} else if (hex.length == 3) {
var r = hex.slice(0, 1);
var g = hex.slice(1, 2);
var b = hex.slice(2, 3);
hexRy[0] = r + r;
hexRy[1] = g + g;
hexRy[2] = b + b;
}
return hexRy;
} // argument: "#123456" || "#123" || "123456" || "123"
function rgb2ry(rgb) {
// "rgb(255,100,178)"
// "255,100,178"
// ["255", "100", "178"]
var ry = rgb.split(/(\(|\))/)[2].split(",");
for (var i = 0; i < ry.length; i++) {
if (ry[i] < 0 || ry[i] > 255) return [255, 255, 255];
}
return ry;
} // argument: "rgb(255,100,178)"
function hsl2ry(hsl) {
// "hsl(255,100%,50%)"
// "255,100%,50%"
// ["255", "100", "178"]
var hslry = [0, 0, 100];
var ry = hsl.split(/(\(|\))/)[2].split(",");
for (var i = 0; i < ry.length; i++) {
hslry[i] = Number(ry[i].replace("%", "")) //.trim();
if (i > 0 && hslry[i] > 100) return [0, 0, 100];
}
return hslry;
} // argument: "hsl(255,100%,50%)"
function validateHex(hex) {
return /(^#?[0-9A-F]{6}$)|(^#?[0-9A-F]{3}$)/i.test(hex);
}
function validateRgb(rgb) {
return /^rgb\((\s*\d{1,3}\s*),(\s*\d{1,3}\s*),(\s*\d{1,3}\s*)\)$/.test(rgb);
}
function validateHsl(HSL) {
return /^hsl\((\s*\d{1,3}\s*),(\s*\d{1,3}%\s*),(\s*\d{1,3}%\s*)\)$/.test(HSL);
}
function display_hex(ry) {
return "#" + ry[0] + ry[1] + ry[2];
}
function display_rgb(ry) {
return "rgb(" + Math.round(ry[0]) + "," + Math.round(ry[1]) + "," + Math.round(ry[2]) + ")";
}
function display_hsl(ry) {
return "hsl(" + Math.round(ry[0]) + "," + Math.round(ry[1]) + "%," + Math.round(ry[2]) + "%)";
}
function hex2hex(hex) {
if (validateHex(hex)) {
return hex2ry(hex);
} else {
return ["ff", "ff", "ff"];
}
}
function rgb2rgb(rgb) {
if (validateRgb(rgb)) {
return rgb2ry(rgb);
} else {
return ["255", "255", "255"];
}
}
function hsl2hsl(hsl) {
if (validateHsl(hsl)) {
return hsl2ry(hsl);
} else {
return ["0", "0", "100"];
}
}
var names = ["hex", "rgb", "hsl"];
function searchAndRemove(ry, toBeRemoved) {
var newRy = [];
for (var i = 0; i < ry.length; i++) {
if (ry[i] != toBeRemoved) {
newRy.push(ry[i]);
}
}
return newRy;
}
function Article(name) {
this.name = name;
this.names = searchAndRemove(names, this.name);
this.input = document.querySelector("#" + this.name + "_ input");
this.submit = document.querySelector("#" + this.name + "_ [type = 'submit']");
this.output_value = document.querySelector("#" + this.name + "_ .output .value");
this.output_color = document.querySelector("#" + this.name + "_ .output .color");
this.otherElements = [];
for (var i = 0; i < this.names.length; i++) {
var element = {}
element.output_value = document.querySelector("#" + this.names[i] + "_ .output .value");
element.output_color = document.querySelector("#" + this.names[i] + "_ .output .color");
element.input = document.querySelector("#" + this.names[i] + "_ .input");
this.otherElements.push(element);
}
this.update = function() {
var ry = window[this.name + "2" + this.name](this.input.value);
var colorCode = window["display_" + this.name](ry);
this.output_value.innerHTML = colorCode;
this.output_color.style.backgroundColor = colorCode;
this.input.value = colorCode;
for (var i = 0; i < this.names.length; i++) {
var ry_ = window[this.name + "2" + this.names[i]](ry);
var colorCode_ = window["display_" + this.names[i]](ry_);
this.otherElements[i].output_value.innerHTML = colorCode_;
this.otherElements[i].output_color.style.backgroundColor = colorCode_;
this.otherElements[i].input.value = colorCode_;
}
}
}
var elements = [];
var eHex = new Article("hex");
elements.push(eHex);
var eRgb = new Article("rgb");
elements.push(eRgb);
var eHsl = new Article("hsl");
elements.push(eHsl);
for (i = 0; i < names.length; i++) {
(function(i) {
document.querySelector("#" + names[i] + "_ .submit").addEventListener("click", function(e) {
elements[i].update();
}, false);
})(i);
}
Hex hsl 转换 php,HEX和RGB和HSL颜色数值在线转换工具相关推荐
- 颜色转换,rgb与int颜色数值之间相互转换
项目中碰到需要将js页面获取的背景颜色转换成int类型的数值,然后存入数据库,百度了一些,发现没有合适的,所以就自己写了一个,需要的可以参考 // int转rgb function converArg ...
- Atitit 从 RGB 到 HSL 或 HSV 的转换
Atitit 从 RGB 到 HSL 或 HSV 的转换 1.1. 从 RGB 到 HSL 或 HSV 的转换公式与原理1 1.2. public static HSV RGB2HSV(Color ...
- 前端需要了解的颜色模型,RGB、HSL和HSV
目录 RGB模型 RGB颜色值 rgb 转 hex hex 转 rgb HSL模型 HSV(B)模型 RGB 与 HSL 的转换 rgb 转 hsl hsl 转 rgb 颜色模型,是用来表示颜色的数学 ...
- matlab 数值格式转换,Matlab字符串转换及数值格式转换
Matlab字符串转换及数值格式转换 字符串转换函数 abs 字符串到ASCII转换 dec2hex 十进制数到十六进制字符串转换 fprintf 把格式化的文本写到文件中或显示屏上 hex2dec ...
- gbk编码在线转换工具_珍藏的4个PDF格式转换网站「在线工具,无需下载,还免费哦。」...
PDF文件相信大家并不陌生,我们经常在工作中都会收到客户.同事.老板发来这种PDF文件,这些文件往往都会记录着一些产品的详细介绍与说明.但是PDF并不是那么好编辑的,我们通常都会将PDF转换成Offi ...
- cad版本怎么在线转换?软件操作更高效
如果你需要将一个CAD文件从一个版本转换为另一个版本,但是你没有安装需要的CAD软件,你可以尝试在线CAD转换.以下是一些步骤来帮助你在线转换CAD文件. 一些可以在线转换CAD文件版本的工具包括 C ...
- CAD转JPG图片,在线转换成高质量彩色图片
为了更好地绘制图纸,需要对CAD图形格式进行转换.CAD转JPG是常见的转换操作之一.有时候工作很忙,用CAD转换软件转换可能会很麻烦.事实上,CAD可以在线转换成JPG,不用任何CAD转换器都可以完 ...
- pdf转换器在线转换详细教程
pdf转换器在线转换详细教程 手头上恰好有一些PDF商务资料需要及时处理,将PDF转换成Word可以使得后期的编辑资料显得更加方便,但如果单纯从网上下载PDF转换软件,从下载到安装软件很麻烦也不能提高 ...
- 永中文档在线转换预览双活实现方案
永中文档在线转换预览双活实现方案 永中文档在线转换预览服务 是永中软件股份有限公司基于十多年核心技术积累.面向移动互联领域推出的 一款文档处理软件.永中采用自主可控核心技术,具备快速技术和服务响应能力 ...
最新文章
- vue.use无非就是为Vue对象注入新的方法和属性
- 神经网络训练集最少可以是多少个?
- C#之foreach语句
- USB鼠标失灵的解决办法
- 如何用android studio测试用例,Android Studio上使用Appium创建测试用例基本步骤
- 【Wordpress】分享500多款国外WordPress经典主题 其之三
- python vars() 函数用法及实例
- java装箱_Java 装箱 拆箱
- Java学习笔记1.1.1 搭建Java开发环境 - Java概述
- php去掉字符串的最后一个字符的方法
- linux su,sudo命令
- G-05 校验ISBN-10编码 (10 分)
- html中vid中的id,VID/DID/SVID/SSID
- ERP是什么管理系统?
- 2020年最全最好用的在线文档盘点,建议收藏
- 戴尔 Inspiron灵越 14 7447(游匣7000)酷睿 i7 4代全新机回收价格
- 这个时间戒夜奶很合适, 错过了不仅宝宝会受伤害, 妈妈也会很累
- 计算机无法打开压缩包,电脑打不开zip文件怎么打开
- 帮助 help 命令
- Eclipse Maven 依赖包找不到源代码及javadoc
热门文章
- C#中的JSON序列化方法
- 2016ATF阿里巴巴技术论坛
- Taro组件库的奇妙bug之旅
- linux查询内存、CPU、硬盘等系统信息的命令
- MATLAB图像处理1——曝光、直方图均衡化、平滑滤波
- OAuth 2.0 MAC Tokens
- getch()与_getch()、不能将const char*类型的值分配到const* 类型的实体
- eclipse项目导入到idea
- 零基础搭建微服务框架/Spring Boot + Dubbo + Docker + Jenkins
- 《嵌入式入门学习第一阶段——C语言》