前面的话

  在CSS中,颜色的表示方式主要包括关键字、16进制、RGB模式、RGBA模式、HSL模式、HSLA模式。关于颜色模式的详细信息移步至此。本文就16进制、RGB模式及HSL模式的互相转换进行实现。

模式转换

【1】16进制 -> RGB

  16进制是设置颜色值的常用方式,将三个介于00-FF的十六进制数连接起来,若16进制的3组数各自成对,则可简写为3位。

  16进制与RGB模式的对应关系为:16进制的前两位对应RGB的red部分;16进制的中间两位对应RGB的green部分;16进制的后两位对应RGB的blue部分。而16进制使用的16进制的数字格式,而RGB使用的10进制的数字格式。所以还需要数字进制的变换

function sixteenToRgb(str){
var r,g,b,rgb;
if(str.length == 7){
r = parseInt(str.substr(1,2),16);
g = parseInt(str.substr(3,2),16);
b = parseInt(str.substr(5,2),16);
}else if(str.length == 4){
r = parseInt('' + str.substr(1,1) + str.substr(1,1),16);
g = parseInt('' + str.substr(2,1) + str.substr(2,1),16);
b = parseInt('' + str.substr(3,1) + str.substr(3,1),16);
}else{
return 'false'
}
rgb = 'rgb(' + r +',' + g +','+b +')';
return rgb;
}
console.log(sixteenToRgb('#123456'));//rgb(18,52,86)
console.log(sixteenToRgb('#123'));//rgb(17,34,51)
console.log(sixteenToRgb('#1234'));//false

【2】RGB -> 16进制

  通过组合不同的红色、绿色、蓝色分量创造出的颜色成为RGB模式的颜色。显示器是由一个个像素构成,利用电子束来表现色彩。像素把光的三原色:红色(R)、绿色(G)、蓝色(B)组合起来。每像素包含8位元色彩的信息量,有0-255的256个单元,其中0是完全无光状态,255是最亮状态

  在RGB模式转换为16进制模式要注意的是,转换的成R、G、B三个分量的16进制值如果是一位数,则需要在前一位补0

function rgbToSixteen(str){
var r16,g16,b16,sixteen;
if(/^rgb\((\d+)\,(\d+)\,(\d+)\)$/.test(str)){
if( RegExp.$1 >= 0 && RegExp.$1 <=255 || RegExp.$2 >= 0 && RegExp.$2 <=255 || RegExp.$3 >= 0 && RegExp.$3 <=255){
r16 = addZero(Number(RegExp.$1).toString(16));
g16 = addZero(Number(RegExp.$2).toString(16));
b16 = addZero(Number(RegExp.$3).toString(16));
  sixteen = '#' + r16 + g16 + b16 ;
  return sixteen;
}else{
return 'false';
}
}else{
return 'false';
}
}
function addZero(str){
if(str.length == 1){
return '0' + str;
}else{
return str;
}
}
console.log(rgbToSixteen('rgb(10,44,3)'));//#0a2c03
console.log(rgbToSixteen('rgb(-10,44,3)'));//false
console.log(rgbToSixteen('rgb(123)'));//false

【3】HSL -> RGB

  HSL模式是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互的叠加得到各式各样的颜色。HSL标准几乎可以包括人类视力所能感知的所有颜色

  h:色调(hue)可以为任意整数。0(或360或-360)表示红色,60表示黄色,120表示绿色,180表示青色,240表示蓝色,300表示洋红(当h值大于360时,实际的值等于该值模360后的值)

  s:饱和度(saturation),就是指颜色的深浅度和鲜艳程度。取0-100%范围的值,其中0表示灰度(没有该颜色),100%表示饱和度最高(颜色最鲜艳)

  l:亮度(lightness),取0-100%范围的值,其中0表示最暗(黑色),100%表示最亮(白色)

//参考http://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
function hslToRgb(str){
var r, g, b;
var h, s, l;
if(/^hsl\((\d+)\,(\d+)%\,(\d+)%\)$/.test(str)){
if( RegExp.$1 >= 0 && RegExp.$1 <=360 && RegExp.$2 >= 0 && RegExp.$2 <=100 && RegExp.$3 >= 0 && RegExp.$3 <=100){
h = RegExp.$1/360;
s = RegExp.$2/100;
l = RegExp.$3/100;
if(s == 0){
r = g = b = l;
}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 'rgb(' + Math.round(r * 255) + ','+ Math.round(g * 255)+ ',' + Math.round(b * 255) + ')';
}else{
return 'false';
}
}else{
return 'false';
}
}
console.log(hslToRgb('hsl(248,64%,39%)'));//rgb(53,36,163)
console.log(hslToRgb('hsl(-248,64%,39%)'));//false
console.log(hslToRgb('hsl(300,40%,50%)'));//rgb(179,77,178)

【4】RGB -> HSL

//参考http://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
function rgbToHsl(str){
var r,g,b;
if(/^rgb\((\d+)\,(\d+)\,(\d+)\)$/.test(str)){
if( RegExp.$1 >= 0 && RegExp.$1 <=255 && RegExp.$2 >= 0 && RegExp.$2 <=255 && RegExp.$3 >= 0 && RegExp.$3 <=255){
r = RegExp.$1/255, g = RegExp.$2/255, b = RegExp.$3/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;
}
return 'hsl(' + Math.round(h*360) + ',' + Math.round(s*100) + '%,' + Math.round(l*100) + '%)';
}else{
return 'false';
}
}else{
return 'false';
}
}
console.log(rgbToHsl('rgb(53,36,163)'));//hsl(248,64%,39%)
console.log(rgbToHsl('rgb(179,77,178)'));//hsl(301,40%,50%)
console.log(rgbToHsl('rgb(300,1,1)'));//false

DEMO实现

简易拾色器

16进制颜色转换器

RGB颜色转换器

HSL颜色转换器

CSS颜色模式转换器的实现的更多相关文章

  1. css颜色模式hsla和rgba

    在CSS3中可以使用RGBA和HSLA两种色彩模式,这两个都可以用来设置颜色以及指定透明度. rgba指的是:红色.绿色.蓝色.Alpha透明度(Red-Green-Blue-Alpha)前三个值取值 ...

  2. 深入理解CSS六种颜色模式

    前面的话 赏心悦目的颜色搭配让人感到舒服,修改元素颜色的功能让人趋之若鹜.但颜色规划不当,会让网站用户无所适从.颜色从<font color="">发展至今,保留了很多 ...

  3. CSS学习(十六)-HSLA颜色模式

    一.理论: 1.HSLA颜色模式 a.HSLA在HSL基础上添加了不透明度,值越大透明度越低 b.HSLA颜色模式的浏览器兼容性和HSL一样,仅仅有较新版本号的主流浏览器才支持 2.RGBA和HSLA ...

  4. 【CSS进阶】CSS 颜色体系详解

    说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家. 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容. 接下来的行文内容大概会按照 ...

  5. 学习笔记 css3--选择器&新增颜色模式&文本相关

    Css3 选择器 --属性选择器 E[attr]只使用属性名,但没有确定任何属性值,E[attr="value"]指定属性名,并指定了该属性的属性值E[attr~="va ...

  6. 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. IT兄弟连 HTML5教程 CSS3属性特效 新增颜色模式

    对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分.网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.随着CSS3的出现以及越来越多的浏览器对它的 ...

  8. 代码自动补全插件CodeMix全新发布CI 2019.7.15|改进CSS颜色辅助

    CodeMix是Eclipse的一款插件,它解锁了VS Code和Code OSS附加扩展的各种技术,支持各种语言. 作为Eclipse开发人员,您再也不必觉得自己已被排除在朋友使用Visual St ...

  9. CSS颜色代码

    颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十六进制 00).最高值是 255(十六进制 FF).从 0 到 25 ...

随机推荐

  1. C#的对象赋值

    例如 Class A {       int x = 0;       int y = 0; }   public void test() {       A test1 = new A( );   ...

  2. <<你最喜欢做什么--兴趣问题清单>>总结

    二.测试作业 你最喜欢做什么--兴趣问题清单 •根据迄今为止已有的经历,你真正喜欢从事的工作是什么?   目前还没有接触工作,就工作而言,凭自己所学的本领和技术去工作,我认为我会喜欢我所做的工作 •休 ...

  3. C++学习心得

    从大一的学习中,我了解到C++是兼容C的面向过程和面向对象的程序设计语言.其中,面向对象程序设计方法是以对象为模板的结构化程序设计方法,是对结构化程序设计方法的继承和发展.刚开始的学习让我觉得特别吃力 ...

  4. WP7推送通知服务

    原文地址http://www.cnblogs.com/Joetao/articles/2214482.html (一)为什么使用推送通知服务(1)Windows Phone执行模型决定只有一个第三方的 ...

  5. xml note

          10. 两种不同的XML分析模型: DOM:所有数据位于内存 SAX:流程性分析,不必把所有数据Load到内存中,可分析大型的XML文件,常用于Servlet-side的XML-xhtml ...

  6. 【设计模式之装饰者模式InJava】

    需求:定义一个操作系统OS接口,安装Windows10操作系统,在上面安装虚拟机VMWare,虚拟机里装Linux; 然后在Linux中安装虚拟机VMware,再在虚拟机里安装MacOS操作系统. 实 ...

  7. ABP框架详解(一)ABPBootstrapper

    在ABP框架的AbpBootstrapper主要用于框架的基本配置的注册和初始化,在Web应用启动阶段实例化一个AbpBootstrapper并调用Initialize方法初始化,该类主要包含两个公有 ...

  8. JavaScript知识总结<一>

    JavaScript核心基础语法: 1.什么是JavaScript? 我们知道在Web标准中网页由:结构.形式.行为三部分组成:结构由标准形式XHTML.形式又标准形式CSS,那么行为的表现就由Jav ...

  9. T4模版基础例子

    <#@ template debug="false" hostspecific="true" language="C#" #> ...

  10. 设计模式之美:Type Object(类型对象)

    索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):Type Object 的经典介绍. 实现方式(二):Type Object 在游戏设计中的使用. 意图 允许在运行时动态灵活的 ...