Hub Color Palette vs Experience Builder Color Palette

227
5
Jump to solution
02-28-2024 05:35 AM
Labels (1)
Ed_
by MVP Regular Contributor
MVP Regular Contributor

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

Ed__0-1709127273494.png

 

 

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

Ed__0-1709131713544.png

 

 

 

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.

Ed__0-1709130315731.png

 

 

0 Kudos
1 Solution

Accepted Solutions
JenniferAcunto
Esri Regular Contributor

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. 

JenniferAcunto_0-1709212494137.png

 

- Jen

View solution in original post

5 Replies
MErikReedAugusta
Occasional Contributor III

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?

0 Kudos
Ed_
by MVP Regular Contributor
MVP Regular Contributor

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.

0 Kudos
JenniferAcunto
Esri Regular Contributor

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.

JenniferAcunto_1-1709209269735.png

 

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

JenniferAcunto_3-1709209467933.png

 

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

JenniferAcunto_2-1709209415492.png

 

- Jen
0 Kudos
Ed_
by MVP Regular Contributor
MVP Regular Contributor

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?

0 Kudos
JenniferAcunto
Esri Regular Contributor

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. 

JenniferAcunto_0-1709212494137.png

 

- Jen