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.
Related
I know that I can modify my Terminal Preview json with acrylicOpacity, but when I have some stuff that is white/bright on the background, then it's hard to see console output.
I wonder, is it possible to somehow create the relation of the amount of transparency from acrylicOpacity based on the "background situation"?
Now it looks like this (you can see the dark background of the Stack Overflow):
but (here, you can see the white background of notepad++):
I'd like to have a feature to make the background of Windows Terminal Preview dark when a window under the WTP window is bright/white. In other words: I want to see the similar darkness on WTP (like on the picture n. one) with a lower layer which is bright/white.
Is there any easy way to do it?
Last thing: I like the level of transparency on the "dark surfaces", so it's not a matter of lower of transparency - it's not my point.
You can not make the terminal detect when things behind it are bright and adapt at all.
You can add a dark background image with its own transparency so that when things are bright they aren't super bright.
Or pick a background colour or a different colour scheme that improves visibility in bright areas without taking away from how it looks in the dark.
There aren't really any options that can help you.
If you are asking for a feature you are probably better off opening an issue on Github and discussing it there.
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.
http://i.stack.imgur.com/xmtfc.png
I set the same color in photoshop and then in css. In photoshop (left) is just green but in css (right) is green, blue, red, etc...
The color is same (##6a6635). How can I set in css the colors like in photoshop?
thats not a problem it is the same color, just the graphic engine of the browser built it lil bit different from the engine of the photoshop, also u may be interesting read this:
http://usabilitypost.com/2008/07/30/photoshop-color-profiles-for-web-images/
What you are seeing is a kind of sub-pixel antialiasing that allows for sharper, clearer text. You can't disable it, that's how it's supposed to work. You're not supposed to take a screenshot and then scale it up - if you zoom into the webpage, the antialiasing is recalculated accordingly.
To translate your PS colors more accurately to CSS, why not try a tool like Project Parfait that Adobe recently put out? https://projectparfait.adobe.com/ You upload a PSD and can then select elements of your PSD to find its CSS or extract your assets. It's sometimes hard to get the exact color or gradient info in a comp from PS (especially for those of us who don't work in PS every day) and Project Parfait will go and grab that information for you.
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.