开发者

Convert color to specified color type

I have color code 开发者_如何学运维like 0xff3a9bda, 0xff73bbf3. I really don't know about this color type as I know that these are NOT RGB, aRGB, HSB, or HEX.

As I am working on web application, my problem is, I can get color code with JavaScript in RGB and HTML color code for any color and I want to convert this color to above specified color type code.

Could anybody please give me an idea or soluton for this?


Are you sure this isn't RGBA ?

0xff3a9bda would be rgba(255,58,155,0.85) (RGBA) or rgba(58,155,218,1) (ARGB)

You can do the conversion like this:

var c = 0xff3a9bda;
var r = (c & (0xff << 24)) >>> 24;
var g = (c & (0xff << 16)) >>> 16;
var b = (c & (0xff << 8)) >>> 8;
var a = (c & 0xff) / 0xff;
var rgba = 'rgba(' + [r,g,b,a].join(',') + ')';

Or like this:

var c = 0xff3a9bda;
var a = ((c & (0xff << 24)) >>> 24) / 0xff;
var r = (c & (0xff << 16)) >>> 16;
var g = (c & (0xff << 8)) >>> 8;
var b = c & 0xff;
var rgba = 'rgba(' + [r,g,b,a].join(',') + ')';

Try here: http://jsfiddle.net/gX6ds/1/


Convert #RRGGBB to this format:

var rgb = 'AABBCC';
var c = 0xff000000 + parseInt(rgb, 16);
alert('0x' + c.toString(16));

Convert R, G, B values to this format:

var R = 0xAA, G = 0xBB, B = 0xCC;
var c = 0xff000000 + (R << 16) + (G << 8) + B;
alert('0x' + c.toString(16));


There's no need to overcomplicate the matter. You've got a 32-bit color value there, which almost certainly means you have 4 color components (R, G, B, A) at 8 bits per component. If the format is not ARGB then it is probably RGBA, but that will be up to you to figure out. It is certainly simple enough to do so via trial and error.

In any case once you know which bits represent which color components, all you need to do is extract out R, G, and B (see arnaud576875's answer) and then concatenate them together like #<R><G><B> to get your HTML color code.

Then you take your A component and set it as the opacity of whatever element you want to apply this color to. As in:

#coloredElem {
    color: #<R><G><B>;
    opacity: <A / 255.0>;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜