CSS颜色模式转换器的实现_html/css_WEB-ITnose
前面的话
在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 = 0 && RegExp.$2 = 0 && RegExp.$3
【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://*.com/questions/2353211/hsl-to-rgb-color-conversionfunction hslToRgb(str){ var r, g, b; var h, s, l; if(/^hsl\((\d+)\,(\d+)%\,(\d+)%\)$/.test(str)){ if( RegExp.$1 >= 0 && RegExp.$1 = 0 && RegExp.$2 = 0 && RegExp.$3 1) t -= 1; if(t
【4】RGB -> HSL
//参考http://*.com/questions/2353211/hsl-to-rgb-color-conversionfunction rgbToHsl(str){ var r,g,b; if(/^rgb\((\d+)\,(\d+)\,(\d+)\)$/.test(str)){ if( RegExp.$1 >= 0 && RegExp.$1 = 0 && RegExp.$2 = 0 && RegExp.$3 0.5 ? d / (2 - max - min) : d / (max + min); switch(max){ case r: h = (g - b) / d + (g
DEMO实现
简易拾色器
16进制颜色转换器
RGB颜色转换器
HSL颜色转换器
上一篇: Android请求接口Post,Get
推荐阅读
-
一款纯css3实现的响应式导航_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
css基准线研究:垂直对齐的实现-好的、差的和丑陋的_html/css_WEB-ITnose
-
简单的单级下拉菜单实现_html/css_WEB-ITnose
-
ajax实现的点击数目加1代码实例_html/css_WEB-ITnose
-
jQuery实现的全选、反选和不选功能_html/css_WEB-ITnose
-
纯CSS3实现漂亮的价格表样式代码_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
请教一个CSS的问题,怎么样才能实现小字体也能抗锯齿啊?象DELL网站就完全没锯齿_html/css_WEB-ITnose