topic Re: Hub Color Palette vs Experience Builder Color Palette in ArcGIS Experience Builder Questions

Hub Color Palette vs Experience Builder Color Palette

Ed_ — Wed, 28 Feb 2024 14:48:39 GMT

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.

Re: Hub Color Palette vs Experience Builder Color Palette

MErikReedAugusta — Wed, 28 Feb 2024 14:17:48 GMT

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?

Re: Hub Color Palette vs Experience Builder Color Palette

Ed_ — Wed, 28 Feb 2024 14:21:55 GMT

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.

Re: Hub Color Palette vs Experience Builder Color Palette

JenniferAcunto — Thu, 29 Feb 2024 12:25:25 GMT

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.

Re: Hub Color Palette vs Experience Builder Color Palette

Ed_ — Thu, 29 Feb 2024 13:09:33 GMT

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?

Re: Hub Color Palette vs Experience Builder Color Palette

JenniferAcunto — Thu, 29 Feb 2024 13:19:35 GMT

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.