基本知识回顾:

计算机中的颜色Color,用RGB模式存储(用R、G、B三个分量表示颜色,每个分量的范围是0—255)。

而计算机中的颜色除了用RGB模式表示以外,常见的还有HSV模式(或者是HSB、HSL模式)

RGB模式:

用R、G、B三个分量表示颜色

R分量:红色(Red)分量,整数型,范围是[0,255]

G分量:绿色(Green)分量,整数型,范围是[0,255]

B分量:蓝色(Blue)分量,整数型,范围是[0,255]

HSV模式:

用H、S、V三个分量表示颜色

H分量:色相(Hue)分量,整数型,范围是[0,360)

S分量:饱和(Saturation)分量,浮点数型,范围是[0,1]

V分量:亮度(lightness Value)分量,浮点数型,范围是[0,1]

在现在很多的前端UI框架中,都利用了HSV模式。因为HSV模式可以很方便的得出相近的颜色(色相相同、饱和和亮度不同的颜色)

而这两个模式的快速转换公式如下:

RGB模式到HSV模式的转换

令MAX为R、G、B三个分量的最大值;MIN为三个分量的最小值

若MAX=MIN,则

H = 0

S = 0

V = MAX / 255

若MAX≠MIN

当G≥B时

H = (Max – R + G – Min + B – Min) / (Max – Min) × 60

S = 1 – MIN / MAX

V = MAX / 255

当G<B时

H = 360 – (Max – R + G – Min + B – Min) / (Max – Min) × 60

S = 1 – MIN / MAX

V = MAX / 255

HSV模式到RGB模式的转换

先定义一种运算: { V1 , V2}

若V1 < 0,则{ V1 , V2} = 0;若V1 > V2,则{ V1 , V2} = V2;否则,{ V1 , V2} = V1。

例如:{ -1 , 2} = 0;{ 1 , 2} = 1;{ 3 , 2} = 2

则转换公式如下:

R = ( { | H / 60 – 3 | – 1 , 1 } × S + 1 – S) × 255 × V

G = ( { 2 – | H / 60 – 2 | , 1 } × S + 1 – S) × 255 × V

B = ( { 2 – | H / 60 – 4 | , 1 } × S + 1 – S) × 255 × V

快速变换颜色的V分量

有时在实际运用的时候,我们需要快速调整颜色的V分量,比如调整颜色的V分量增大20%(或者减少20%)

颜色Color的三个分量R、G、B,现在要调整V的分量为原来的80%。如何快速的计算?

假定颜色Color的三个分量H、S、V,则R、G、B和H、S、V的三个分量的关系为

R = ( { | H / 60 – 3 | – 1 , 1 } × S + 1 – S) × 255 × V

G = ( { 2 – | H / 60 – 2 | , 1 } × S + 1 – S) × 255 × V

B = ( { 2 – | H / 60 – 4 | , 1 } × S + 1 – S) × 255 × V

新的颜色Color2的三个分量为H、S、V × 80%(新颜色的V分量是原颜色的80%),则新的颜色的R、G、B分量(用R2、G2、B2表示)

R2 = ( { | H / 60 – 3 | – 1 , 1 } × S + 1 – S) × 255 × V × 80% = R × 80%

G2 = ( { 2 – | H / 60 – 2 | , 1 } × S + 1 – S) × 255 × V × 80% = G × 80%

B2 = ( { 2 – | H / 60 – 4 | , 1 } × S + 1 – S) × 255 × V × 80% = B × 80%

由此可知,快速的调整V分量的比例,只要把颜色的R、G、B的分量乘上相应的比例

那如何调整颜色的V分量到指定的值(比方说调整到V2)呢?

先求出颜色的V分量(V = MAX / 255),再计算出V2和V的比值,按照上面的公式计算即可

R2 = ( { | H / 60 – 3 | – 1 , 1 } × S + 1 – S) × 255 × V2  = R × V2 / V

G2 = ( { 2 – | H / 60 – 2 | , 1 } × S + 1 – S) × 255 × V2  = G × V2 / V

B2 = ( { 2 – | H / 60 – 4 | , 1 } × S + 1 – S) × 255 × V2  = B × V2 / V

实际的运用

笔者在网上找寻Bootstrap的相关资料的时候,发现一个很有意思的网站

Beautiful Buttons for Twitter Bootstrappers

在这个网站里,你可以自己设定一个颜色,它给你生成由你设定颜色的按钮的CSS

在查看生成CSS的 JS代码 后,发现生成代码如下

function refreshSwatch() {
var hue = $("#hue").slider("value"),
saturation = $("#saturation").slider("value"),
lightness = $("#lightness").slider("value"),
delta = $("#delta").slider("value"),
highlight = lightness + delta,
lowlight = lightness - delta,
superLowlight = lightness - delta * 1.5,
gradientTop = "hsl("+hue+", "+saturation+"%, "+highlight+"%)",
gradientBottom = "hsl("+hue+", "+saturation+"%, "+lowlight+"%)",
borderBottom = "hsl("+hue+", "+saturation+"%, "+superLowlight+"%)",
hsl = "hsl("+hue+", "+saturation+"%, "+lightness+"%)",
highhex = hsl2Hex(hue, saturation, highlight),
lowhex = hsl2Hex(hue, saturation, lowlight),
text = getTextColor(lightness, delta),
css = generateHSLGradient(hsl, gradientTop, gradientBottom, borderBottom, text, highhex, lowhex),
embeddedCss = ".btn-custom {\n"+css+"}";
$("button.custom").not('.sample').attr('style', css);
$(".ui-slider-range").css("background", hsl);
$('#embedded_css').html(embeddedCss);
$('.ui-slider-handle').each(function(){
var v = $(this).parents('div').slider("value");
var i = $(this).parents('div').attr('id');
$("#"+i+"_value").text(v);
});
}

可以看到,在给定一个颜色后,自动生成相关的颜色(gradientTop、gradientBottom、borderBottom),这些颜色也仅仅是V分量的不同

我们完全可以利用上面的公式,对这些计算进行简化

基本色Color的三个分量H、S、V,得到R、G、B三个分量

那么

gradientTop颜色(V2 = V + delta)为

R2 = R × V2 / V = R × ( V + delta ) / V

G2 = G × V2 / V = G × ( V + delta ) / V

B2 = B × V2 / V = B × ( V + delta ) / V

gradientBottom颜色(V3 = V - delta)为

R3 = R × V2 / V = R × ( V - delta ) / V

G3 = G × V2 / V = G × ( V - delta ) / V

B3 = B × V2 / V = B × ( V - delta ) / V

superLowLight颜色(V4 = V - 1.5 × delta)为

R4 = R × V2 / V = R × ( V - 1.5 × delta ) / V

G4 = G × V2 / V = G × ( V - 1.5 × delta ) / V

B4 = B × V2 / V = B × ( V - 1.5 × delta ) / V

甚至,在预先计算出基本量后,可以快速计算各个分量

基本量

R0 = ( { | H / 60 – 3 | – 1 , 1 } × S + 1 – S) × 255

G0 = ( { 2 – | H / 60 – 2 | , 1 } × S + 1 – S) × 255

B0 = ( { 2 – | H / 60 – 4 | , 1 } × S + 1 – S) × 255

则基本色为

R = R0 × V

G = G0 × V

B = B0 × V

gradientTop颜色(V2 = V + delta)为

R2 = R0 × ( V + delta )

G2 = G0 × ( V + delta )

B2 = B0 × ( V + delta )

gradientBottom颜色(V3 = V - delta)为

R3 = R0 × ( V - delta )

G3 = G0 × ( V - delta )

B3 = B0 × ( V - delta )

superLowLight颜色(V4 = V - 1.5 × delta)为

R4 = R0 × ( V - 1.5 × delta )

G4 = G0 × ( V - 1.5 × delta )

B4 = B0 × ( V - 1.5 × delta )

下面是利用该网页生成的CSS得到的按钮,看看吧,效果还不错

Be Excellent To Each Other »

计算机中的颜色XIV——快速变换颜色的V分量的更多相关文章

  1. JS实现鼠标移入DIV随机变换颜色

    今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色,本质就是js的随机数运用. 代码如下: <!DOCTYPE html> <html> <head ...

  2. Flutter 实现“斑马纹”背景(需要变换颜色)

    Flutter 实现"斑马纹"背景 由于工作中项目需求,需要将H5转换为Flutter代码. 其中的斑马纹背景需要根据接口返回的颜色来渲染,所以不能只是图片形式,无法通过decor ...

  3. Android中Listview点击item不变颜色以及设置listselector 无效

    Android中Listview点击item不变颜色以及设置listselector 无效 这是同一个问题,Listview中点击item是会变颜色的,因为listview设置了默认的listsele ...

  4. iTween基础之Color(变换颜色)

    一.基础介绍:二.基础属性 原文地址: http://blog.csdn.net/dingkun520wy/article/details/51065275 一.基础介绍 ColorTo:从当前颜色变 ...

  5. Zend Studio 12.0.2正式版发布和破解方法,zend studio 12.0.1汉化,相式设置为Dreamweaver,空格缩进为4个, 代码默认不折叠的设置,Outline中使用的图形标志,代码颜色之eot设置。

    背景:zend studio 12.0.2 修复了一个12.0.1的:  Fixed problem with referenced variables marked as undefined,我都说 ...

  6. VB 中ListView 某一列的颜色添加不上去的解决方法

    做过VB,对添加某一行中的某一列的背景颜色 ,和文字颜色,来表明某种意义的时候,会有添加不上去的情况 abc = Nothing abc = New ListViewItem.ListViewSubI ...

  7. VC编程中如何设置对话框的背景颜色和静态文本颜色

    晚上编一个小程序,涉及到如何设置对话框的背景颜色和静态文本颜色.这在VC6.0中本来是一句话就搞定的事.在应用程序类中的InitInstance()函数添加: //设置对话框背景和文本颜色 SetDi ...

  8. 设置EditText控件中提示消息hint的字体颜色和大小

    设置EditText控件中提示消息hint的字体颜色和大小 1.设置字体大小 代码例: public void init(){ hint= (EditText) findViewById(R.id.i ...

  9. android中在java代码中设置Button按钮的背景颜色

    android中在java代码中设置Button按钮的背景颜色 1.设置背景图片,图片来源于drawable: flightInfoPanel.setBackgroundDrawable(getRes ...

随机推荐

  1. MSIL指令集

    名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add.Ovf.Un 将两个无符号整数值相加,执行溢出检查,并且 ...

  2. 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop

    [源码下载] 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop 作者:weba ...

  3. Fluent NHibernate other example

    测试用的当前最新版本: sql: --- CREATE TABLE Users ( UserID INT IDENTITY(1,1) PRIMARY KEY, [Name] VARCHAR(50) N ...

  4. 遇上了artTemplate做的东西

    js现在最牛的地方是 有了Node.js后,前后端的界限几乎都消失了,围绕着它,出现了一整套生态体系. 在生态方面,比php好太多了.

  5. php中的字符串常用函数(一) strpos() 子字符首次出现的位置

    strpos($str, $needle); 1.返回$needle在$str首次出现的位置.(大小写敏感). 2.从php5开始$needle支持多字符.php4只能用单个字符. 3.能找到$nee ...

  6. php学习笔记:文件的上传(包含设置文件的上传大小限制)

    今天写的是文件上传,前几天自学的正规则又忘记了,用了很笨的方法去判断格式,直接上代码: <?php /** * Created by PhpStorm. * User: Administrato ...

  7. ahjesus ubuntu10.4安装ruby2.1.1

    sudo apt-get install python-software-properties sudo apt-add-repository ppa:brightbox/ruby-ng sudo a ...

  8. 一个Chrome拓展——HttpPost

    周末花了点时间做了一个chrome拓展,叫HttpPost,顾名思义是用来测试http的post请求. 先直接看效果 插件与拓展 在说这个做的过程前,先说明什么是Chrome插件.Chrome拓展 1 ...

  9. Python基础(4)--字符串

    所有标准的序列操作对字符串都适用,但字符串是不可变的 本文地址:http://www.cnblogs.com/archimedes/p/python-string.html,转载请注明源地址. 字符串 ...

  10. IOS数组NSArray与NSMutableArray知识点

    此文是对数组NSArray与NSMutableArray知识点的总结,主要是一些常见的操作,别外一些操作见其相应的文档,下面的代码部分还运用的第三方插件BlocksKit相结合: a:Foundati ...