Issue with background colours

I have an issue with the colours on my site.
On my laptop i design it and publish it and its the correct colour. However on a different computer and on my mobile the colours then look different. Its purple on my laptop but then changes to a much more pink colour on both computer and mobile. Is this normal, and how do i stop this?

read only:

Here is my public share link: LINK
(how to access public share link)

It may be a color profile thing but I think here it’s because you’re trying to define a subtle color on a laptop screen and it’s nearly impossible to do. Some laptop screens are terrible, terrible at color.

Especially Dell laptops, I find. It’s fine for most colors but as soon as you go on subtle grays and other subtle colors, it ends up being very bright and not what you chose on every other screens.

Some tones are particularly difficult to work with:

  • subtle grays with a brownish tone, will render green-gray or yellow-gray, very colored
  • subtle grays with red in it
  • pale yellows, pale red, pale everything
  • purples with more red than blue maybe yours, rendering vibrant pink
  • yellowish oranges

Chose your color elsewhere and see how it renders on your laptop.

Also maybe your laptop is set on a different profile/gamut than AdobeRGB. if you’re on a windows laptop with a nvidia card, possibilities are endless and the driver panel can have dozens of tabs. I’ve been stuck on strange settings at times.

Thank you for that @vincent!
That’s really annoying that it does that.
But I think you’re right about the purples with more red than blue. I’ve gone for a more blue infused and darker purple and its working better now across devices. And may actually be a better colour scheme anyway! But to note, it is still different on different devices, albeit less obvious.

Thanks again


1 Like

Well laptops do that for years. But today, some laptops are better at colors. Macbooks don’t suffer the subtle color issue. Sony has better screens for laptops for years too. I guess it’s a matter of price :confused: When I had a Dell laptop, I was relying on palettes I kew were working.

Here are color tools I use, if that can help you:


Wow that’s great thank you for that. I’ll take a look through those now. I love tools that help give a bit of inspiration to the design process.

On a seperate issue with this site, I wonder if you could help. When I load up this site on a large screen like my work computer, the div block that contains the heading and enquire now boxes, shifts down and then overlaps with the next section.
This isn’t an issue on my laptop or mobile. Do you know how I fix it?

Indeed. Also I’m quite not good at chosing/pairing colors. I never studied it so I have no process, don’t know where to start. Even when I follow a gorgeous reference/inspiration, I can end up with something ugly…

Colors :slight_smile:

For your issue, as far as my 27 inches screen goes, I see no shift in the header

Wow its even worse on your screen. Can you see, the h1 header and enquire boxes have shifted right down to below the block of text that talks about “custome websites”

Can you see that?

Aaaah I was only looking at the header, let me have another look.

I have this bug at every size…

OK I got it.

Your div overlay is set to absolute, bottom, to be displayed ion the bottom of the header. But you’re breaking one rule. If you want the header to be the positioning reference of the overlay, the header MUST be positioned. So like position Relative.

then up it a notch

Until now, the overlay was taking the BODY as a reference, hence varying its position when the viewport was changing.

Wrote a guide for you :wink:


That’s awesome thanks for that. got it sorted!

I haven’t come across your blog before now either so ill have a look through that too :slight_smile:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.