PSD.js Font Colour Codes Make No Sense

Question

I know this question has been asked here already but there hasn't been any answer that make sense and the developer is a nightmare to get hold of.

Using PSD.js the colours for text characters don't match RGB, RGBA or CMYK, there are 5 numbers in the a colour arrays, they don't even match the text colour in the Photoshop file if you try to compare any of the numbers to the RBG or CMYK values.

An example what PSD.js is showing for colours of a particular part of text shows this array:

[3] => Array
(
    [0] => 27
    [1] => 185
    [2] => 116
    [3] => 0
    [4] => 255
)

You can clearly see these have no relevance to any colour codes I have seen before. These numbers are supposedly representing this colour: #db6971 - but none of the numbers match anything, the RGB for that is 219,105,113 and CMYK is 11%,72%,46%,0%

So does anyone have a clue what is going on here? I am trying to render this text to html but I can't set the colour without actually knowing what these numbers are supposed to mean.

If you multiply your CMYK percentages with 255 (the max value of a byte), you get pretty close to the values you see in your array (28, 184, 117, 0). The last value is probably the alpha (transparency) component, 255 meaning all opaque. So, I'd say this is CMYK+A. — Harald K, Feb 26 '18 at 12:52
Ehh.. Yes it does, but you need to do it the other way around. That's quite simple math. If you need the CMYK value in percentages, it's just an equation you need to solve. Ie. for the C value in percent, it's 255 * C / 100 = 27, which gives you C = 27 * 100 / 255 = 10.58 (~= 11 %). M = 185 * 100 / 255 = 72.54 (~= 73 %), etc. (Y ~= 45 %, K = 0%, A = 100%). — Harald K, Feb 27 '18 at 11:27
yeh I didn't think before I spoke lol one of those mornings! Don't suppose you know how to convert CMYK to RGB? — Glen Elkins, Feb 27 '18 at 11:29
Well.. You can find some simple algorithms for that on the web, but CMYK to RGB conversion is best done using ICC profiles. — Harald K, Feb 27 '18 at 11:31
Here's one [such simple algorithm](https://www.rapidtables.com/convert/color/cmyk-to-rgb.html). It will work, just don't expect it to look like the conversion done by Photoshop. — Harald K, Feb 27 '18 at 11:38
see that's the problem it needs to be the same colour as photoshop. The CMYK is perfect but because the code is going from PSD to CSS need it to be in RGB but the algorithm like you say gets it wrong. — Glen Elkins, Feb 27 '18 at 11:46

score 1 · Accepted Answer · answered Feb 23 '18 at 17:12

1

As explained in the post on the official GitHub page of PSD.js repo - https://github.com/meltingice/psd.js/issues/119#issuecomment-346899211

...to transform the array you could do something like this.

const colorArray = [ [ 102, 0, 255, 0, 255 ], [ 102, 0, 255, 0, 255 ]]
const RGB = colorArray.map(([r,g,b]) => [r,g,b]) //[[102,0,255],[102,0,255]]

answered Feb 23 '18 at 17:12

stobasan

323
1
3
9

thanks for that will have a look, couldn't find anything on the official page. – Glen Elkins Feb 23 '18 at 17:41
Sorry I just realised I marked this as the right answer when it's not. What that code you showed is doing is just skipping a number in each array. Look at my example of PSD.js giving 27,185,116,0,255 - if you skip one you get 27,185,0 - that's not the same as the actual RGB in the PSD which is 219,105,113 – Glen Elkins Feb 27 '18 at 11:11

score 0 · Answer 2 · answered Feb 27 '18 at 11:48

If you multiply your CMYK percentages with 255 (the max value of a byte), you get pretty close to the values you see in your array (28, 184, 117, 0). The last value is probably the alpha (transparency) component, 255 meaning all opaque. So, I'd say this is CMYK+A

Given your array:

[3] => Array
(
    [0] => 27
    [1] => 185
    [2] => 116
    [3] => 0
    [4] => 255
)

If you need the CMYK value in percentages, it's just an equation you need to solve.

Ie. for the C value in percent, it's

255 * C / 100 = 27

which gives you

C = 27 * 100 / 255 = 10.58 (~= 11%)
M = 185 * 100 / 255 = 72.54 (~= 73%)

etc.

Y ~= 45%, K = 0%, A = 100%

Which is pretty close to the CMYK (11%, 72%, 46%, 0%) you expected.

Now, if you want the values in RGB, CMYK to RGB conversion is best done using ICC profiles (from one specific input CMYK input profile to a specific RGB output, like sRGB).

You can also use one of the simplified algorithms you find on the web. It will work, just don't expect it to look like the conversion done by Photoshop.

PSD.js Font Colour Codes Make No Sense

2 Answers2