I have a mobile website which uses the #0096D6 shade of blue for some buttons. My problem is that the colour shows up differently on certain pages on the same device even though the colour is set as the same.I was wondering if anyone knows what could be causing this?
Here is how I have declared the colour of the button:
.button {
background-color: #0096D6;
}
Here are the two colours which show up:
Expected colour across all pages:
Displayed colour on some pages:
As you can see there is not a huge difference in the two colours but I was wondering if anyone knows why this is happening? Thanks.
The devices don't interpret the color different. Its the build-in screen who causes the problem.
In fact its impossible to guarantee that all devices show exact the same color!
There are (hardware)tools to calibrate displays to a standard but with tons of different devices not under your control you can't ensure they show all the same color!
Even if you use images the colors could be slightly different!
if hex representation is the same, then colours are the same and problem lies in LCD display.
It may depend on brightness of your device that is different than your other device.
Related
I have an issue where color is shown differently in FireFox, compared to Chrome and IE. And i have no idea how come.
What would you do in my situation to get the same color displayed in all the browsers?
See http://www.inoplay.dk/
The top v-sign background is another blue (in FireFox), compared to the rest of the header, even though i selected exact same color in photoshop.
I have limited possibilities to edit the theme/template in PrestaShop, so simple CSS solution all i can do.
Any suggestions is greatly appreciated.
There are a few things that affect how these images render against HTML hex color codes.
It could vary whether or not each browser is using hardware acceleration which would affect how colors are rendered
The compression of the JPEG can sometimes cause color shifting
Make sure all your web images are in RGB color space/profile
SUGGESTION: the easiest way to get around this is to create your menu element as .PNG - PNG allows you to have a transparent background. This way you won't need to try to match the blue with code. It will just be transparent.
https://en.wikipedia.org/wiki/Portable_Network_Graphics
Try saving the image in jpg format. i hope it should solve the issue
I'm not really that new to website programming but have come across a weird bug I have not seen before.
The test concept site is www.nomadcss.com.au/test
The issue i'm having is the menu bar (green up the top) when you hover over it is meant to change to a nice blue gradient, it does this fine in all my tests.
I had a friend over and he looked on his laptop and the color is more of a purple than it is a blue???
We are both using laptops, both using Chrome (same version and both up to date), the only difference is screen res and my laptop being Win7 and his Win8.
Why would this happen? its a Hex value color so should it not be standard?
Colours can look different on different screens. That's nothing new.
But for what it's worth, #5C5CE6 is indeed blue, but it's kind of a slightly pale blue which can very easily look purple on some displays. It looks purple on mine, for example!
Try lowering the amount of red and green in this colour, and it should start looking bluer.
I see it as a bit purple too..
It can be a different color profile applied, or different color settings on the monitor.
You are delving into the realm of what color something is when its represented on some screen.
First off, you've got color adjustments in the various displays that change what a color is. The menus that show up such as:
And with these tools, one can adjust the tint and colors of the screen.
Then you've got different calibrations for each monitor. I've got two different types of monitors on my system. When I look at the color profile for each, they are different.
You will see that there are other profiles that I can use on each other than the recommended one if I wanted to get a specific profile.
You and your friend may also wish to look at calibrating your display: http://windows.microsoft.com/en-us/windows7/calibrate-your-display and http://www.pcmag.com/article2/0,2817,2414252,00.asp could be good resources for this.
Only after you have calibrated the displays can you say "that is what it looks like" and be reasonably sure that it will look the same on the other monitor.
Is there a possibility to make image colors exactly the same as HTML colors?
I have a rounded corners box, the corners are images and the background color is HTML, on my laptop it looks flawless, but on good monitors a difference in colors is noticeable.
Is it true that it isn't possible to have HTML generated colors exactly match image colors?
edit: I am using Photoshop and am using the exact hex equivalent of the RGB colors.
Another potential solution: you're seeing a color shift caused by color profiles.
These could be due to how those other monitors are configured (you can update your machine to use a specific profile; folks like designers will do this to make sure colors are accurate in photography or print design) or due to how your images are saved when exporting them from your favorite image editing tool (I'm looking at you, Photoshop). These issues can and will occur regardless of whether or not your hex colors are spot on and are ridiculously frustrating.
Give that link a shot; if you're dealing with an embedded color profile issue, that might get you going in the right direction.
Edit: That you're exporting from Photoshop makes me think this is the likely culprit.
If you use the same colors, e.g. #E1E1E1 in your CSS and your image (a tool like 'GIMP' will assist you with a color picker where you can directly enter these hex values) the colors will be identical.
My guess is your problem is most likely compression (by saving as .jpg and the artifacts it introduces). Use other formats (like the lossless PNG format) or save your JPG in a lossless way (with the quality slider up to 100 in most tools).
Browsers / monitors can look a tiny bit different for some colors. Matching up certain colors may prove to be a difficult task even if you are matching an image with the same hex value as the one you are using in your css. (this will work for most cases but not always) My recommendation is to use web safe colors where possible, these colors tend to render the same on multiple displays.
i ran across something i have never seen before. the page has a top div and a footer div. both with an image as background. mirrored the image as well via photoshop.
now the weird thing is, it shows a different color. see http://www.hp-consultants.nl
when i tilt my screen towards me the colors become the same. even in photoshop i notice the difference. does anyone know what is wrong?
ive tried using regular CSS colors instead of a background image, to no effect. even the same image shows a difference
thanks!
There's nothing wrong with your page. Using Photohop's colour picker confirms that the colours are both indeed exactly the same.
The effect probably happens because you're sitting in front of a TFT monitor, whose display is sensitive to the angle you look at it from.
Some useful background information:
LCD Test: Viewing angle
Wikipedia on TFT LCDs:
TN displays suffer from limited viewing angles, especially in the vertical direction. Colors will shift when viewed off-perpendicular. In the vertical direction, colors will shift so much that they will invert past a certain angle.
The colours are exactly the same a quick check with any image editor will tell you that. TFT Monitors can do strange things to colours depending on the viewing angle.
Also our eyes and brains are really not as good at determining colour as we think. Have you ever seen this optical illusion.
The Squares Labeled A & B are the same colour
may be is the orientation of the led, that brights differently. have you tried to get the browser windows to the bottom of the screen so you see the header where the footer is.
Try this:
open 2 browser instances
resize the window of each to view only the header or the footer (one for each)
place the footer window at the top and the header window at the top
switch window places
in my case I see the bottom one always more clear.
Hope this helps you
Is it still relevant to consider these? I don't do much work on the graphics side of things, but recently I set the background colour of a webpage (using CSS) to the same background colour used within images on the page. #312F32. it looked fine on different machines in the office, but at home on my shinny new mac (and a few others since) there was definitely a noticeable difference between the two.
can someone give me a web colour 101 reminder course? :>
Reference:
For an e.g. this site indicates if a chosen colour is web safe or not.
personally I feel that it's not really of that much of importance, since nowadays modern browsers can render colours properly. What is important is that your background image colour should be the same as the background colour.
different of colour between monitors might just be that the monitor settings are different. so you don't have to worry that much.
what's really important for web designs is that your design have to be appealing.
is it still relevant to consider these?
No. To be honest there was never a truly ‘web-safe’ palette, in that many systems had different colour depths and palettes even in the days when a Windows machine running in 8-bit colour was the norm.
Today there's very little still running an 8-bit palette, and those things that do aren't necessarily using the same one.
it looked fine on different machines in the office, but at home on my shinny new mac (and a few others since) there was definitely a noticable difference between the two.
A shiny new Mac will definitely be running in full colour like everyone else, so it's not a palette problem.
Was the image a PNG? If so, you've probably got a gamma problem causing colour shifts on different platforms. PNGs for the web should be saved without a gAMA chunk to avoid this issue.
Easiest way to remember it for me: Multiples of 0x33 at each byte. E.g. 0x333333, 0x330099, 0xFFFFFF, etc.
The web-safe palette hasn't been relevant for at least five years, IMO. What you're seeing is probably color profile correction in PNGs with embedded color profiles. Some browsers (Firefox 3+, and probably Safari?) read these profiles and attempt to display the image as it was originally created (i.e. as if you were looking at it on the image creator's monitor). This can result in a visual mismatch between "pure" colors in a PNG and rendered HTML colors (e.g. via CSS style)
This is awesome for graphic designers who need to precisely match colors between multiple devices like monitors, scanners and high-end printers. It kinda sorta sucks for everyone else.
The easiest way to prevent this happening (in most cases) is to turn off color correction in your image editor and don't export PNGs (or JPGs) with embedded color profiles. Let the user's monitor guess how to display the image -- usually at the same color profile as everything else on the page.
To ensure that what you see on your screen approximates the most common color settings, use a common color correction profile like sRGB or sRGB IEC61966, and keep a relatively "steep" gamma, between 2.0 and 2.3. (Most PCs have a gamma of ~2.2). Don't calibrate your monitor unless you're sending graphic files between devices.
Extra credit reading:
Color correction for images in Firefox 3.5
PNG color test
The Sad Story of PNG Gamma "correction."
The reason you are seeing differences between your Shiny New Mac and the monitors at work (or many other places) is a difference in monitor color gamut:
The Mac, and higher-end monitors have better color gamut than typical consumer-grade monitors. In my research, a typical Acer or similar monitor had a color gamut of 78%, while a higher-end monitor covers 96% of the Adobe RGB color space. I have a nice NEC with 96% color gamut monitor right next to an Acer X223W (78% color gamut), and the difference is simply amazing as I slide an image or website across from one to the other. Colors appear where there were none, and the image is simply more vibrant and alive.
1) #312F32 is not a 'web safe colour' to start with. Web safe colours are in multiples of 33's such as #333333, #003366, #ff3300 (f=15).
2) The difference in monitors and how they display colours: I had a PC and Mac side by side trying to match the colour in an image with a webpage navbar. I ran into the same problem as you. Even though the colour picker on each computer agreed with what colour was in the image, neither monitor looked exactly right once I updated the navbar colour.
3) Suggestion: sometimes you have to find a happy medium or work with darker shades where you do not notice the colour differences.