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?
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
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 want to be able to take my kingdom of loathing signature that has this code:
<img src="http://sigs.kingdomofloathing.com/player_2192849/mode_bigsig/l1_clan/l2_clantitle/s1_level/s2_class/playerfeed_2192849_bigsig.gif" border="0" />
I want to take the white background of the image and make it transparent. The reason why I can't do this in an image editor is because these signatures update every once in awhile according to what you have been doing in the game.
The simple answer is that you can't do this with CSS and HTML.
Adding transparency to the element with CSS like Frank Tudor stated (via opacity) will affect the entire image.
So really you have three options:
Edit the image using design software like Photoshop, removing the
white bg and saving it out as a trans gif or png.
Utilize CSS opacity, but this will make the entire object transparent. If you're okay with that then this is probably the easiest solution.
Use a scripting language. As others stated you can technically edit images using certain scripting languages like PHP. This will be the most time-consuming/technical way to perform this task (depending on your coding skills).
Hopefully this helps.
If the images are being updated, then it's up to whatever code you are using to dynamically create those images. You should certainly be able to use transparency when creating the images, regardless of how they are made.
I recommend PNG rather than GIF, but either would work.
Post the code of however you generate the signature images, and someone can help you update it to use a transparent background.
There are advanced manipulation functions javascript in one case I remember opacity being used for transparency and in most server-side programming languages you can find image functions.
The problem you face (without an image editor) is that transparency is parameter of the image as it is saved out (and some image types look better than others when it comes to transparency).
You could try this...
Try adding an ID or Class to your IMG tag and this bit of code.
#IDgifThing {
opacity: 0.5; /* 50% transparent */
}
I have not tested it, but I hope it helps you or at least puts your mind in the right direction.
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'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