6

The graphic designer sent me the colors in RGB, I know I can convert to hex easily, but last time I tried to do that, RGBA to HEX on another website I noticed a slight difference so I ended up using the exact same RGB.

For example, if you convert rgba(154, 130, 139, 0.77) to hex using a hex converter such as this one or any other converter you'll notice that the hex is darker #9a828b

So when you convert between RGB or RGB or CMYK, is there a loss of quality?

  • Comments are not for extended discussion; this conversation has been moved to chat. – curious Aug 10 at 16:20
13

As Billy Kerr wrote, Hex is not a colour space, but a numerical system such as the decimal system, but with base 16. The differences you notice are probably caused by different RGB colour spaces (such as sRGB vs. AdobeRGB), i. e. the RGB numbers from your graphic designer describe another colour than the mentioned online tool.

  • Okay so is there a way that guarantees that anytime you convert from rgb or rgba to hex both colors will look the same? – Lynob Aug 7 at 20:44
  • 8
    @Lynob You have asked several times in comments is there a waterproof conversion between HEX and RGBA. The conversion is number system conversion which is equivalence and one to one to both directions. You must know how alpha is assumed to be inputted in hex in the software you use. Your linked RGBA to HEX converter doesn't output alpha at all, it gives only R, G and B. Transparency is removed. Forget that site - it's crap - and make the conversion by yourself. – user287001 Aug 7 at 21:00
  • 1
    @user287001 - you took the words out of my mouth "crap". LOL! It's ignoring the alpha! – Billy Kerr Aug 7 at 21:05
  • That tool might be crap but I have not yet found a tool online that isn't crap, which means auto converting rgba to hex might be faulty unless you're going to calculate it manually. So as a programmer, I cannot take any rgba and put it in a converter and use it, I have either to calculate it manually or find one that is accurate – Lynob Aug 7 at 21:46
  • 1
    @Lynob theres nothing that guarantees people see same color on different monitors so the aim is a bit nonsensical. Question to you what do you compare the color against? – joojaa Aug 8 at 4:39
11

I will only complement the other answers.

  • RGB to HEX will give you the same exact color.

  • RGBA to HEX, will not because we do not even know what is beneath the color. If you put another color the overall color will change... that is the whole point of transparency.

So you have three options.

  1. Convert the RGB values to HEX (without the alpha value) and add after that an opacity CSS property. Opacity, the same as the alpha value will have a decimal notation.

  2. Take a standalone color picker to measure the computed values of the color you have on the background you also have. https://www.google.com/search?q=freeware+color+picker

  3. Leave the values as RGBA. In my opinion, this is the most flexible notation for colors. There is no real advantage of using HEX values. Get used to different color notations... This is just me.


I need to complement a bit regarding CMYK. For web design, you should not use CMYK color mode on images, except in my opinion, in one case. Where you need to match a printed material to an electronic version.

Basically, a CMYK image has a duller look, because it is simulating the smaller gamut of a print. If you have not any printed material, and you still need a duller look, you can simply tweak the file.

If someone sent you a file on that color mode, and you need to match the electronic version of the color, you should use the option 2 I described. Take a standalone picker, but it is important that you open the file on a program that accurately sows the color. For example, if you have a PDF file as a sample, open it in Adobe Reader and measure the color from there.

If you have a CMYK JPG, PSD or TIFF file, open it and view it on Ps or another program like PhotoPaint that have good color management. This also depends on the color profiles used.

If you are not sure... ask the designer to send an RGB file.

  • The advantage of using hex is that the Porto theme for Magento and Divi theme for WordPress and all advanced cms systems and backends, have fields where you can put hex values without editing CSS, but they only accept hex, not rgba, makes working on these systems a tiny bit faster – Lynob Aug 8 at 9:04
  • Ok, there can be some specific cases. Thanks for the note. – Rafael Aug 9 at 14:42
7

No. There is no loss converting decimal RGB or RGBa colours to hexadecimal.

Forget online converters

In RGBa images, colours require 4 decimal or hexadecimal numbers, one for each channel. Each should be an integer from 0 to 255 (or 00 to FF). The alpha channel, like the other channels, should really be an integer between 0 and 255, and not a decimal fraction. You can fix this by multiplying the fraction by 255.

In RGB images, colours require only 3 decimal or hexadecimal numbers, one for each channel.

The sites you listed are ignoring the alpha channel entirely. They are no good. Don't use them.

Work it out yourself, or type formulas into a spreadsheet to convert it for you.

Here's my spreadsheet showing the formula. This is in LibreOffice Calc, but also works in Excel.

enter image description here

CMYK is a completely different kettle of fish. There are RGB colours which have no equivalent in CMYK, because RGB has a larger gamut than CMYK. There are other answers on GDSE which discuss the problem.

  • « The alpha channel, like the other channels, should really be an integer between 0 and 255, and not a decimal fraction. » — Where are you getting this from? The CSS3 spec plainly states that “Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range”, which means that almost any value arrived at by multiplying the decimal by 255 would result in complete opacity. – Janus Bahs Jacquet Aug 11 at 16:42
  • I'm not talking about CSS, but RGBa in image formats, the alpha is a value between 0 and 255 . RGBa is 8 bits per channel, and there are 4 channels. Alpha is one of those channels. – Billy Kerr Aug 11 at 17:05
  • Oh, I see. You should perhaps clarify that, since CSS does require the alpha channel in an RGBa colour to be expressed as a decimal and the question is clearly about RGBa as used in CSS, rather than ‘pure’ RGBa. – Janus Bahs Jacquet Aug 11 at 17:07
  • @JanusBahsJacquet - I've clarified that I was talking about images. In any case I don't actually think my answer is what the OP really wants to know. Rather it seems to be how to take an RGBa colour and convert to an RGB colour which is equivalent. Of course this can't really be done since it would depend on the background that the colour is placed over, and the amount of transparency of the original RGBa colour. – Billy Kerr Aug 11 at 17:50
3

There is no such thing as HEX color. Its just a indication that the numbers are stored in hexadecimal. Which is a nifty way of keeping databytes aligned with the underlying computer memory,and thus always use the same width.

There is no conversion from 8 bit per channel color so there is no data loss. For any other bit depth loss is the same as changing to 8 bit which is the best most browsers can do anyway.

Now HTML color inputs are restrivcted to RGB color (only). This means that there is no loss to conversion between RGB and html "hex" values

because no conversion is happening the numbers are the same. Sure they look different because you changed base from 10 to 16 but the numbers are the same (this simply because the definition of a number doesent care how its represented).

Conversion from RGBA to RGB can not be done with the information you have presented, one needs more info. At simplest you need to know what the background color behind your color is to do the conversion.

Although, that is if one is incredibly naive, there is no guarantee that the conversion you do is same on a different computer/ different browser than yours as it isn't specified anywhere in what color space the alpha blending should take place. So the only person who can do the conversion right is you, but not for all possible systems.

2

RGBA to hex and backwards conversions have no losses except rounding errors, if the numbers are scaled. See for example Inkscape's coloring dialog (to use it you must have a dummy shape to be colored, I drew a rectangle):

enter image description here

Inkscape has scale 0...255 for R, G , B and Alpha. I had R=128, G=129, B=130, A=131. The hex version of those RGBA numbers is 80818283 as you should well know if you say you are a programmer.

Some software can have decimal RGBA numbers in scale 0....1 or 0...100% and the format can be mixed like it was in your example. If A=0.7 in one system, it should be 0.7*255 in Inkscape, but rounded to the nearest integer.The rounding error is the only error.

CMYK to RGB and backwards conversions aren't unique nor lossless, because often the numbers are used in different devices which have different color spaces (=different sets of possible colors).

In Inkscape and GIMP RGB and CMYK color spaces are assumed to be equal. Black ink (=K)is totally redundant, all possible RGB colors are possible with C, M and Y. K can be zero. One can increase K and keep the color still same by adjusting C, M and Y as long as the numbers can be 0....100%. That scaling is reflected from the meaning of those numbers in printing. They are percentages of max amount of ink that the paper can hold.

In CMYK printing aware software (not GIMP, Inkscape nor Microsoft Office) CMYK <-> RGB conversions are made by applying device color profiles. They are used either to show what the numbers will give or to give the same apparent color as exactly as possible in different devices for ex on the screen and printed onto paper.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.