在Javascript和PHP中将十进制转换为RGB

Question

我将尝试将十进制值转换回RGB值。

假设这是编译十进制值的公式。

c = r*(255*255)+g*255+b

（例如 rgb(16,120,78) 加起来为 1071078）

如何在没有“溢出”的情况下解决 r、g 和 b 呢？

先行感谢！

- Walt Wonderwolk

---

r = x，g = ff 始终与 r = x + 1，g = 0 编码方式相同。 - Millie Smith

同样地，如果 b 是 255，则将其设置为 0 并将 1 添加到 g 可以获得相同的编码。请使用 256。 - Millie Smith

Answer 1

使用除法、取模运算符 (%) 和向下取整函数。

var r = Math.floor(c / (256*256));
var g = Math.floor(c / 256) % 256;
var b = c % 256;

编辑：

halex注意到了代码中255和256的差异。正如Millie Smith所指出的那样，当您将这些组件放在一起时，应该使用256而不是255：

var c = r * (256*256) + g * 256 + b;

颜色组件的值可以从0到255，因此您需要乘以256来防止下一个组件与上一个组件重叠。

- Guffa

---

我认为你想要除以255而不是256。假设原始颜色是rgb（20,0,0），那么它将成为c = 1300500，而使用您的公式，您将得到r = 19而不是20。但 OP 应该在计算中使用256，因此你间接地是正确的 :) - halex

@halex OP 需要调整他们的公式以使用 256。现在，多个 RGB 值可以编码为相同的值。 - Millie Smith

谢谢@halex，我也注意到了这一点，使用那个公式得到的结果非常奇怪。只要我纠正我的小数公式，这个解决方案就相当不错。 - Walt Wonderwolk

@halex：感谢您发现了这个差异，我没有仔细检查OP的代码就使用了256。然而，正如Millie Smith指出的那样，256是正确的值，如果我看到它，我当然应该添加一个注释来说明这一点。 - Guffa

Answer 2

这个Github链接对我很有帮助，但是我使用以下代码编辑了它以解决我的一个问题:

// convert three r,g,b integers (each 0-255) to a single decimal integer (something 
between 0 and ~16m)
function colourToNumber(r, g, b) {
 return (r << 16) + (g << 8) + (b);
}

// convert it back again (to a string)
function numberToColour(number) {
 const r = (number & 0xff0000) >> 16;
 const g = (number & 0x00ff00) >> 8;
 const b = (number & 0x0000ff);

 //return [b, g, r];
 return `rgb(${b},${g},${r})`;
}

我的编辑代码使RGB正确返回，就像我设置的颜色一样

我的例子：

十进制颜色是：11665407 这是黄色

十进制颜色是：11665329 这是绿色

请使用此示例测试两个代码： stackblitz示例

- Ahmed El Damasy

Answer 3

首先，您计算十进制值的公式似乎有误。 255不是16（甚至2）的幂; 如果您想向左移动一个十六进制数字，就像在十进制下乘以10的任意幂一样，您需要乘以16 ^ n，其中n是要向左移动的位数。

这是我们的新RGB转十进制公式：

c = r * 16^4 + g * 16^2 + b

假设我们有一个RGB颜色代码的十进制表示 c ，我们解出r，g，b：

b = c % 256
g_0 = (c % 65536 - b)
r_0 = c - g_0 - b
g = g_0 / 256
r = r_0 / 65536

这些都是整数操作，所以它们应该很快，但我不能保证解释器会以这种方式处理它们。作为一个函数：

function c_to_rgb(c) {
    var b = c % 256,
        g_0 = (c % 65536 - b),
        r_0 = c - g_0 - b,
        g = g_0 / 256,
        r = r_0 / 65536;

    return [r, g, b];
}

- SaadRhoulam

Answer 4

I managed to solve it that way

getRGBFromDecimal(number) {
    var b = Math.floor(number / (256*256));
    var g = Math.floor(number / 256) % 256;
    var r = number % 256;

    return `RGB(${r},${g},${b})`;
}

- Samuel Urel

---

请考虑解释一下这段代码的工作原理，因为这可能对其他人有所帮助。 - rodorgas

“red”被编码在最后的有效位中吗？ - zkoza

虽然这段代码片段可能解决了问题，但它并没有解释为什么或者如何回答这个问题。请在你的代码中包含一个解释，因为这真的有助于提高你的帖子质量。记住，你正在为未来的读者回答问题，而那些人可能不知道你的代码建议的原因。 - Luca Kiebel