Hub Color Palette vs Experience Builder Color Palette

[Ed_]

I have been trying to match the color palette of a Hub site with an Experience Builder app. As shown below in Hub the Body Background Color is #1c2a48

However when I set the same color in Experience Builder, it appears different, why is that so? How can this be fixed?

As shown below the colors don't match even though the same hex code is being used. I am referring to the two blue shades in the background. The dark one with those two thumbnails is from experience builder embedded in a Hub site.

[MErikReedAugusta]

That almost looks like the two are in different color spaces, as if one of them were converting to CMYK on the fly, or something similar.

Then again, it also could just be an optical illusion.  Have you tried taking a screenshot and dropping it into an image editor to check?  You could pull an eyedropper sample of each blue and see if they return the same hex value.

EDIT:

I assumed you meant the blue in the icons, but now I'm not sure.  Are we talking the two blue shades in the background?

[Ed_]

Hi @MErikReedAugusta thank you for the quick response, yes talking about the two blue shades in the background. The dark one with those two thumbnails is from experience builder embedded in a Hub site.

[JenniferAcunto]

When you add a color to a theme in Experience Builder, it uses various shades of that color. It appears that it uses one of the darker versions for the default page background color.

You can see how it compares to a text box with the background set explicitly to the color you want.

In the page settings, you can change the background color to the exact shade you want.

[Ed_]

Hi @JenniferAcunto thank you for your response, but I was using the same hex code in both the products. So a hex code can also have different shades?

[JenniferAcunto · Accepted solution]

If you look at the theme builder - the first row are the colors you specified via hex. Underneath are the colors that are used based on the colors specified. So the first column, are the colors based on your #1c2a48 hex code. They are probably converting the hex into rgb or some other format to determine the values, but as I'm not a developer, I don't know for certain. The point is, when you add a color to the 'theme', you are not specifying that that exact color will be used at all times, for exact control of colors of various elements you should specify it for each element.