RGB色彩说明和转换算法

最新推荐文章于 2024-10-08 17:17:36 发布

rootcn

最新推荐文章于 2024-10-08 17:17:36 发布

阅读量1.3w

点赞数

分类专栏：脚本语言文章标签：算法 function javascript hex null string

本文链接：https://blog.csdn.net/rootcn/article/details/106272

版权

脚本语言专栏收录该内容

13 篇文章 0 订阅

订阅专栏

RGB数值换算

      图片处理时，经常用到 RBG 的数值，它可以用十进制(0-255)或十六进制(00-FF)来表示。一斤等于十六两，就是十六进制。
      十进制的数是利用 0 到 9 十个数码来表示。十六进制是利用 0 到 9 十个数码，再加上 A,B,C,D,E,F 六个拉丁字母来表示。即 A 表示十，F 表示十五。按照这个规定，换算起来就方便了。
      比如将十进制的 245 换算为十六进制的模式，
            245 / 16 = 15 ... 余数 5
因此十进制的 245，用十六进制的模式表示，就是 F5 。
      又比如将十六进制的 EA 换算为十进制的模式，E为14, A为10, 则
            14 x 16 + 10 = 234。
因此十六进制的 EA，用十进制的模式表示，就是 234 。
      当然用计算器直接换算就更方便了。WINDOWS 就带有这样的计算器。在'开始/程序/附件'里。

-------------------------------------

十六进制数在像素中的实现
　　在大多数的程序语言中，甚至HTML，都使用到RGB色彩模式，其利用红、绿、蓝三种颜色组合成某种颜色组成一个像素点。一个RGB色彩，在我们的认识中，是3个字节（byte），每一个字节是RGB色彩中的一个组成部分。注意1　byte = 8 bits，而RGB色彩是24位色彩系统，每一位单独的字节代表十进制数0-255中的某一个值，用十六进制表示就是0－FF。在HTML中，你可以看到象这样的标签，< font color="#FF0000" >，那么这个值在RGB色彩中就代表了红色。注意它用六位数字来表示，RGB色彩不可以用超过六位数字的长度来表示，因为它只有三个字节。在RGB色彩中，“#FF12AC”，第一第二个数字“FF”，该像素表示为为纯红色，这是最高数了，因为在字节中没有再超过FF的数值了；接下来的两个数字“12”，表现为某种很亮的绿色，这个数值相当的低，最后两位数字“AC”，在该像素中表现为很强亮度的蓝色，这个数值比较高。最后，这个像素的组合色彩显示为粉红色。
　　请注意绝大多数的编程语言，包括JavaScript，十六进制必须用“0x”来表示，这可以使计算机不至于把十进制和十六进制混淆起来。因此早先在JavaScript中使用RGB色彩时，上面的数值应写成0xFF12AC，举个例子，我们可以在JavaScript中定义背景颜色为那种粉红色：
document.bgColor = 0xFF12AC;
　　使用RGB色彩的红、绿、蓝各自的256种深浅变化来组合调变颜色，我们可以实现16万种色彩！
　　色彩渐变
　　现在我们明白了色彩和像素是如何来工作的，我们就要说上正题，倒底字符的渐变怎么来实现呢？
　　渐变是指两种不同的颜色，分别作为起始色和终结色，找出它们需要多少步色彩增量变化才可从起始颜色变成最终颜色。它可用以下公式来表示：
(secondcolor - firstcolor) / number_of_steps;
　　 “secondcolor”即指最终指定颜色，“firstcolor”就是起始的颜色。变量“number_of_steps”指所要渐变字符的长度，我们用这个变量来确定像素中的每个字符有多少增量变化，如果我们能知道字符间增量的话，下面这行语句就是我们所需要的：
(secondcolor - firstcolor) / string.length;
　　开始渐变
　　虽然上面的概念很简单，但我们需要把它用到实际中去。我们需要在由红、绿、蓝所组成的各种颜色中实现渐变，如果我们仅仅只是减去红和蓝并使用某些数值来划分它们，那么色彩渐变是不会正确的依照色谱的物理原理来工作的。我们需要某种漂亮的过渡结果。那么，我们必须从RGB颜色中分开红、绿、蓝三种原色，并单独的对某一种主色调进行计算。
　　你可能会疑惑你倒底怎么去做这件事！这中间包含了一种更先进的方法－位屏蔽。位屏蔽将艺术化的取走我们不再需要的某些色块。

---------------------------------------------------

以上皆为引文,输入相应的值直接进行计算：

十六进制（Hex）:
十进制（Dec）:
百分比（Per）:

<script language="javascript" type="text/javascript"> function hexToDec() { var value = document.getElementById("rgb_hex").value; if (typeof(value) != "string" || value == "" || value.length != 7 || value.indexOf("#") != 0) { return; } var num = value.substring(1, 7); var r = num.substring(0, 2); var g = num.substring(2, 4); var b = num.substring(4, 6); r = parseInt(r, 16); g = parseInt(g, 16); b = parseInt(b, 16); var result = r + "," + g + "," + b; document.getElementById("rgb_dec").value = result; var pR = (r / (r + g + b)).toFixed(5); var pG = (g / (r + g + b)).toFixed(5); var pB = (b / (r + g + b)).toFixed(5); var pResult = pR + "," + pG + "," + pB; document.getElementById("rgb_per").value = pResult; } function decToHex() { var value = document.getElementById("rgb_dec").value; if (value == null || value.split(",").length != 3) { return; } var values = value.split(","); var r = parseInt(values[0], 10); var g = parseInt(values[1], 10); var b = parseInt(values[2], 10); var pR = (r / (r + g + b)).toFixed(5); var pG = (g / (r + g + b)).toFixed(5); var pB = (b / (r + g + b)).toFixed(5); r = toHex(r); g = toHex(g); b = toHex(b); var result = "#" + r + g + b; var pResult = pR + "," + pG + "," + pB; document.getElementById("rgb_hex").value = result; document.getElementById("rgb_per").value = pResult; } function toHex(dec) { var hexChars = "0123456789ABCDEF"; //if (dec &amp;amp;amp;amp;gt; 255) { // return (null); //} var i = dec % 16; var j = (dec - i) / 16; var result = ""; // "0x"; result += hexChars.charAt(j); result += hexChars.charAt(i); return (result); } </script>