RGB色彩说明和转换算法

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）:
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;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); }

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 > 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);
}