Why is my checkout page color appearing darker than the website background?

On my checkout page, the color code is #FBFBF5, the exact same color code as the background on the website, however it is appearing darker. The checkout banner was also created using the background colour, and it appears correctly. The problem now, is that everything under the banner is a different shade, as if it had a grey filter over it or something. I have checked and all color codes are the same. Can someone help me fix this, for consistency. Site is www.reneleblanc login is client1

See attached image.

1 Like

@RENE_6

oh sorry for that issue can check your theme setting >> checkout option its allow basic setting no more if you need more customization allow only shopify plus

Hi Rene,

As far as I can see, the difference is incredibly subtle and likely won’t even be noticable across various customers screens. You’ll have users viewing the page from various browsers, computers, tablets and phone and they will all vary in screen resolution. Even if the white color appears seamless to you, it might appear as a different shade to someone else depending on their screens.

@KetanKumar is correct that only Shopify Plus allows for access into the checkout code for more in depth editing.

I do completely understand your concern, however the consistency is definitely there and the difference is truly unnoticable. You may also feel better after learning more about whitespace in web design and how it’s utilized for user experience. Here’s a great article on the topic.

Happy to assist with any further concerns!

1 Like

The problem is that the checkout page is a different color than every other page on the website. Even different that the logo background, even though it is the exact same color code. For a website this detailed, this is a major problem, everything must be consistent. Unfortunately, I can’t have a color that is just “close enough”. Any idea how to solve this? Is there some sort of filter over the checkout page that alters the background color? Thanks

1 Like

@RENE_6

yes please check theme customization checkout setting its allow basic color setting.

The colors are already exactly the same, which is why I posted here. They are the same color, but show differently on the screen only on CHECKOUT.

@RENE_6

sorry but no more setting allow

Hi @RENE_6

As mentioned, in depth Shopify Checkout customization is an option, though it requires an upgrade to a Plus plan. You can read more about Plus here to see if it’s right for you.

I noticed the recurring color scheme on your website includes black. Have you considered changing your checkout background page to black? There are still some standard changes you can make to ensure your brand and color scheme stay seamless and relevant.

Try playing around with a contrasting background color, a relevant image or even your logo in a repeating branded pattern as in the examples below for Vans:

You could design it to be more subtle and transparent in the background while still adhering to a form of consistency. If you require some help designing an image like the above, you can utilize free tools like Canva online, (this third-party resource explains how to create your own branded pattern).

I hope that helps! I’d love to see what you come up with.