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

Recommended Posts

I'm working on a web design, and I am trying to make a custom navbar menu icon to use in my navbar. The color I am using is CSS3 SteelBlue RGB(70,130,180). I used the sliders to set my color, but on export to jpeg (using Lanczos 3 (non-separable)) my color turns into RGB(84,129,176) and no longer matches my navbar. What settings do I need to use to keep my RGB values consistent. And for those wondering, I am using Photo and not a different program.

Nav_Icon.png

Link to comment
Share on other sites

I have exported as a JPG using Lanczos 3 (non separable) and it exported with the correct colour.

How do you have your document set up?

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

At the top left of the window it has:

RGBA/16 - SRGB IEC61966-2.1

My color layer is a fill layer, and the white bars are a pixel layer on top. The white bars actually come out the same color.

I've been checking it with the Apple Color Meter inside of Affinity. Even the layer inside affinity has the wrong color. I set the sliders to the value I want, but it comes out wrong. I even tried making a pixel layer of the blue and using the pixel tool to put it down, but it still shows wrong.

Link to comment
Share on other sites

The Apple color meter measures — as most of these tools — the values provided via your monitor profile, which normally differ from the sRGB values in the image. If this wasn‘t the case, a monitor profile would be not necessary: It is there to reflect and compensate the monitor‘s colour deviations.

Link to comment
Share on other sites

So How do I get my colors to match? Change the document to my monitor profile?

I tried changing the color profile to Apple P3. It was closer but still not correct.

And as an aside, when I view the color in Firefox with the color meter, It does show me the correct values.

Link to comment
Share on other sites

So I found something that worked. I changed the Apple Color Meter setting to sRGB and then got the number of the color from the browser (RGB 45,131,184). I put those numbers into Photo and exported to .jpeg. I reloaded my web browser and set the color meter to the default setting. It was really close (RGB 80,129,180). I had read something in this process that .png was more accurate than .jpeg (https://frontify.com/blog/are-you-using-correct-color-codes) so I exported as .png and checked it in the browser. The colors now match. Thanks for the help.

Link to comment
Share on other sites

Yes, I am definitely a novice. I will look into it. I did some research into color meters which led me to my eventual solution.

The initial RGB values I got came from w3schools.com. I figured there was a setting I was missing when I first asked the question. Thanks again.

Link to comment
Share on other sites

I know I've been lampooned on this one for something that should have been easy, but I'm curious if any of you have tried making a new file using the sRGB profile, setting the RGB sliders to the numbers given for a color name, exporting the image and using it in an html document with the color name to see if it matches? (that's what I did on the image I posted)

Link to comment
Share on other sites

Just Google for „Firefox colour management“ and you will see, that former versions of Firefox don‘t support color management and in later versions you have to activate it. It is switched off as default. (These information is second hand. I don‘t use Firefox.)

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.