Jump to content
You must now use your email address to sign in [click for more info] ×

HEX color values slightly incorrect


Recommended Posts

I have an SVG file that was not created in an Affinity app. There is only one color used in the file and its RGB value is slightly off when the file is opened in Affinity Designer or Photo. The color in the SVG code is fill="rgb(78.819275%, 35.289001%, 51.368713%)", which equates to HEX #C95A83. When the file is opened in Illustrator or a web browser, the color is correct. When I open the file in Affinity Designer or Photo, the color is #C85982.

I've had this issue when opening Photoshop files in Affinity Photo as well ... all colors are slightly off.

Screenshot of my AD color settings attached.

Any ideas what the issue is?

AD Color Settings.png

Link to comment
Share on other sites

It's probably a color value rounding problem during conversion, since if you use fill="rgb(79%,35%,51%)" instead of fill="rgb(78.819275%, 35.289001%, 51.368713%)", aka ...

Quote

Hex colour:  #C95A83
RGB colour: 201,90,131
                     (201,90,131)
                     rgb(201,90,131)
                     rgb(79%,35%,51%)

... versus ...

Hex colour:  #C85982
RGB colour: 200,89,130
                     (200,89,130)
                     rgb(200,89,130)
                     rgb(78%,35%,51%)

... it will equate to HEX #C95A83.

 

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

@v_kyr That what I'm thinking the issue may be as well. Although, I don't know why I have the same issue opening Photoshop files in Affinity apps. In any case, I hope it's something Serif can look into — every time I receive a graphic file from another designer, I have to review all the colors and correct them if they're off.

Link to comment
Share on other sites

9 minutes ago, Brian_J said:

... every time I receive a graphic file from another designer, I have to review all the colors and correct them if they're off.

Does this only happen with RGB percentage values with longer decimal places like rgb(78.819275%, 35.289001%, 51.368713%), or with other color value representations too?

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

Possibly other applications are simply rounding up to an integer percentage, and Affinity is using the full specified value? 

-- Walt
Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases
PC:
    Desktop:  Windows 11 Pro, version 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 

    Laptop:  Windows 11 Pro, version 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU.
iPad:  iPad Pro M1, 12.9": iPadOS 17.4.1, Apple Pencil 2, Magic Keyboard 
Mac:  2023 M2 MacBook Air 15", 16GB memory, macOS Sonoma 14.4.1

Link to comment
Share on other sites

The SVG color spec tells ...

Quote
...
Five syntactical forms are specified for SVG Color, and all of them must be supported in a conforming Color-managed User Agent:
...
Three digit hex — #rgb
Each hexadecimal digit, in the range 0 to F, represents one sRGB color component in the order red, green and blue. The digits A to F may be in either uppercase or lowercase. The value of the color component is obtained by replicating digits, so 0 become 00, 1 becomes 11, F becomes FF. This compact syntactical form can represent only 4096 colors. Examples: #000 (i.e. black) #fff (i.e. white) #6CF (i.e. #66CCFF, rgb(102, 204, 255)).
Six digit hex — #rrggbb
Each pair of hexadecimal digits, in the range 0 to F, represents one sRGB color component in the order red, green and blue. The digits A to F may be in either uppercase or lowercase.This syntactical form, originally introduced by HTML, can represent 16777216 colors. Examples: #9400D3 (i.e. a dark violet), #FFD700 (i.e. a golden color).
Integer functional — rgb(rrr, ggg, bbb)
Each integer represents one sRGB color component in the order red, green and blue, separated by a comma and optionally by white space. Each integer is in the range 0 to 255. This syntactical form can represent 16777216 colors. Examples: rgb(233, 150, 122) (i.e. a salmon pink), rgb(255, 165, 0) (i.e. an orange).
Float functional — rgb(R%, G%, B%)
Each percentage value represents one sRGB color component in the order red, green and blue, separated by a comma and optionally by white space. For colors inside the sRGB gamut, the range of each component is 0.0% to 100.0% and an arbitrary number of decimal places may be supplied. Scientific notation is not supported. This syntactical form can represent an arbitrary range of colors, completely covering the sRGB gamut. Color values where one or more components are below 0.0% or above 100.0% represent colors outside the sRGB gamut. Examples: rgb(12.375%, 34.286%, 28.97%).
Color keyword
Originally implemented in HTML browsers and eventually standardized in SVG 1.1, the full list of color keywords and their corresponding sRGB values are given in the SVG 1.1 specification. SVG Tiny 1.2 required only a subset of these, sixteen color keywords. SVG Color requires the full set to be supported.
...
...
All the SVG 1.1 syntactic forms for an sRGB color, including the full set of color keywords, shall be supported by a Color-managed User Agent, regardless of the base language profile of SVG.
...
When an sRGB color is used - because it is the sole color specification, or in a permitted fallback situation - a conformant Color-managed User Agent shall render it in conformance with the ICC profile for sRGB to obtain the desired color appearance.

 

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

@v_kyr This is the first time I've been given an SVG file, so I was able to look at the file's code. All the other times I've had the issue has been with Photoshop and Illustrator files that I created ... and I entered normal HEX codes or RGB values with hole numbers in those files.

Link to comment
Share on other sites

Are you certain the actual colour representation is off? Is it rounding the values to generate the colour, or simply rounding the display values for the hex?

As for the files from Adobe, are you using the exact same profiles in Affinity?

Link to comment
Share on other sites

There also seems to be a bug related to reading percentage color values (whether having fractions or not). The color itself is shown correctly (and the color picker shows it correctly), but the Color panel fails to update its color values when an SVG file with percentage color values is placed on a document and the object is selected (this applies to both Windows and macOS versions). The visual outlook of the object also cannot be changed (not by using the Color panel, and not by using any swatch of any palette), though internally the color value changes.  

If the same file os opened (instead of placed), the color values are shown correctly and the object behaves normally.

color_121_121_184.svg

PS. As for the issue of the thread, the rounding itself seems to happen correctly with arbitrary number of decimals, and the color values converted to 8-bit values happens similarly as e.g. in Illustrator (not rounding off first a fractional percentage value but converting first and rounding off to nearest integer last).

Link to comment
Share on other sites

3 minutes ago, Brian_J said:

Yes, the color profiles in Adobe and Affinity aps are the same.

The difference in color offsets might be partly due to the color engines and the respective app specific color value handling used for those (aka how they treat color values, how they do parse those and perform value conversions & roundings etc. internally). - Adobe has it's own custom CMS, where Affinity in contrast reuses a third party one, namely LittleCMS.

So if the same color profiles and color gamuts are used here, but in Affinity the shown colors and their values are offset in contrast to those shown by Adobe in an Adobe specific document/file format, then it's probably an color value parsing and handling issue/bug on the Affinity side.

 

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.