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?
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.
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 When I had a Dell laptop, I was relying on palettes I kew were working.
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
For your issue, as far as my 27 inches screen goes, I see no shift in the header
@vincent
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”
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.