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.
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 want to use non-web-safe colors in several places on my website, including for the background. But I am concerned about visitors with older computers.
Is there any code I can use that will change the color from the non-web-safe color to the nearest web-safe color if the visitor cannot see non-web-safe colors?
As this question cannot, to my knowledge, be answered with simple HTML, I'm posting this JavaScript solution to offer an alternative means:
It's possible to use screen.colorDepth to return the color depth, in bits, of the user's screen. With the exception of a faulty/erroneous implementation in Firefox 3.x and 4.1 (beta).
var theImg = document.getElementsByTagName('img')[0];
if (screen.colorDepth < 32) {
theImg.src = 'http://davidrhysthomas.co.uk/img/the_shat.png';
}
else {
theImg.src = 'http://davidrhysthomas.co.uk/img/terry_thomas.png';
}
alert(screen.colorDepth);
Addenda with respect to PPK, Chromium 11/Ubuntu 11.04 also returns 24 rather than 32, so Firefox may have been correct.
JS Fiddle demo.
Reference:
W3C DOM compatibility - CSS Object Model View, PPK, Quirksmode.org.
I may be mistaken here, but the point of web-safe colours was so that your images will look the same on a monitor with a lower colour depth (eg. 8-bit colour) as they would on one with a higher color depth (16/24-bit colour). Which would happen because all of those colours should (theoretically) be able to be displayed in all colour formats.
If you have an image that is not "web-safe", and you view it on a system with 8-bit colour, all of the colours that don't fit within the display's colour capabilities, should automatically be displayed as the closest colour that fits. Basically, you don't have to "convert" it. The bit depth of the colour doesn't allow it to display any OTHER colours and so it'll have to sub something in, which should be the next closest display colour.
That said, web-safe colours are from the time when displays only used 8-bit colour. I don't think that this is something you really have to worry about now unless you know that your audience is using very, very, old technology.
The browser will automatically do this if your using hex/color codes and not images. And with images they will just dither, graceful degrading their experience with no work.
http://www.limov.com/colour/when-to-use-the-web-safe-palette.lml
I know this seems like a simple question, but I'm really stuck. I am developing a website and Firefox is altering the image colors for the site. The issue is stemming from Firefox's use of ICC color profiles (I think).
I've done tons of research on the topic, and most of it boils down to sRGB when saving in Photoshop, but the color profiles are already set to sRGB.
These are the color settings I use when I save:
http://i.stack.imgur.com/jLJ5g.png
http://i.stack.imgur.com/OAx88.png - How it looks in Firefox 3, Chrome, and IE
http://i.stack.imgur.com/B7bcC.png - How it looks in Firefox 4
I can disable Firefox 4's color management through
about:config / gfx.color_management.enabled = 0,
but that is not a correct solution.
Wat do?
URL: http://development.smgwebdesign.com/riley
Thanks guys.
Well to help keep the colours correct, don't use an image to create the background.
As it is only one colour just set the background colour using css.
It accepts hexidecimal values.
eg #15253c would be your colour.
You can find different ones in photoshop by going to the colour selector tool.
It shows what the colour is in lots of different ways.
Then make the background of the logo transparent so there are no colour issues there.
I can't see how you're colouring the nav menu, but if you can use css and background colours directly,
as apposed to images, it will work better.
Use css wherever you can, it will work better and your website will load faster.
Check out http://www.w3schools.com/css/default.asp for help with CSS.
Also, for the images you do have to use, try the 'save for web' option in photoshop.
This is a bit out of my depth because I haven't been a Photoshop user for a long time, but the general solution to this is not to embed a ICC colour profile in the first place.
You should have a check box for that in your export dialog. Is that already turned off?
I'm coding a website with:
background-color:#070707;
That color should be a very dark gray, just the way I see it in photoshop.
Now when I launch this in my browser (the background-color is set on the body using CSS, so it's not an exported image), the color is darker than in Photoshop.
I know there can be differences when exporting images due to color profiling, but when setting the color code, how can this be different from photoshop?
Photoshop might be rendering the colors using its built-in color matching/proofing engine while the browser probably does not use one.
Try getting Photoshop's color settings right (CTRL+SHIFT+K) and change proof setup (View > Proof Setup) to match that of a typical monitor.
I think it depends which color model are you using in photoshop:
RGB
CMYK
LAB
Here is a good tutorial about the exact usage and differences of each of them:
http://www.deke.com/content/photoshop-top-40-feature-6-rgb-cmyk-and-lab
Could you be defining it in photoshop as something other than a hex number? IIRC, there's Hue/Sat/something that can also give a 6-digit output. You're not viewing it on different monitors or something?
#070707 is not dark gray. It is almost black. Are you sure that the color palette in photoshop does not include alpha. Else try 'Choose Copy Color As HTML' option in color palette.
Saving a file for the web is best done with "save for web" or ctrl/shift/alt (on the pc). This gives you many options for color output - ones that shouldn't change. However, if you choose a color out of the web gambut, it may be "correcting" it for the web. I agree with Glasnt's response - Check it under different monitors.
Gifs always make guesses to color combinations. Jpgs are given a range of accuracy. Pings are the most correct to color exports out of the series. Make sure you are saving RGB instead of any other format (LAB, CMYK, etc.).
Are you using mac or pc?
bam
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.