I have a logo with a blue background, I've picked the colour via Chrome inspector (matches Firefox colour picker as well), yet on mobile the logo stands out on the background.
What's going on/how can I prevent this?
Why you see another color on another display?
That logo has at least 5 colors in the background. That's the reason you can not match it.
Your monitor and mobile displays are not accurate, and it seems your contrast and brightness of the screen are not correct. In the professional photography and video editing, they call it color blind.
That's the reason professional designers do not use consumer monitors.
If you are a designer you need to have color accurate monitor and you need to calibrate it.
If you want to keep working on the current monitor at least change your monitor brightness, contrast and color settings, close to the natural settings.
What is the software solution?
Get the logo in SVG, PSD or PNG file from the designer. SVG files are better because they are vector files that you can open it with free software like Inkscape. Change whatever you like and export it to the PNG.
If your logo is a text like what you have here, Search font by image and recreate it with Inkscape. The logo you mentioned here seems to be two fonts. Clinica Pro and Sixta. and both of them are not free font.
You can remove the background using Gimp, Layer > Color to Transparency > Color to Alpha, and select background color.
Useful links:
Changing Background Color
Making the background of an image transparent in Gimp
Anyway, I did remove the background from that logo for you (Transparent Background):
Related
I have web App where a video is being played, the video and the web page have being set to the same background color however the video background appears different on different machines same browser. What I want to achieve is to have a video of a spinning triangle on a grey background color similar to the web page background color.This what I get on different machines instead from hp Probook 445 G7 from hp elitbook 8470. The images are from the same web App but the firsr image has a darker video background unlike the second one. What could be the cause and how to fix it.
Thanks
I've tried to solve a similar issue without success.
Went as far as saving out a transparent background in video which did not turn out to be a viable solution.
My thought is the white balance on your computers change the light gray/white color values slightly.
I've also noticed the exact same hex or color values exporting slightly different in video than with svg or png backgrounds. I've battled that by using a gradient of a background to soften the edges so it appears seamless.
I have a problem with my website background. In Firefox and other browsers the background is much whiter and brighter than in Chrome
This is the code for my background :
body {background:#ffffff url(../../images/background.jpg); direction:rtl; }
http://i.stack.imgur.com/inK3d.png
http://i.stack.imgur.com/KiqT4.png
One explanation for this may be that the JPEG image has an embedded color profile that the browsers are interpreting differently. To keep the colors uniform across browsers, the images should be exported with the sRGB color space.
If you're using Photoshop for instance, if you use the "Save for Web & Devices" option, it will automatically convert the image to the sRGB color space. Instructions for changing export color space will change depending on what image editor you are using, of course.
For more information on how color profiles can affect the way colors are displayed on the web, please see this css-tricks article.
This might not strictly be a coding question, but its related so i'll post it up anyway.
I built a website a year ago and never had any problems. I've recently moved to Mac and I've started noticing small colour related issues between my Macbook and my Pro.
In the header there's a background image aligned top right. The background colour of the header matches the image to show a smooth fade from image to background colour. On my Mac Pro it looks fine, on my Macbook Air the image is slightly darker.
I've attached a screenshot of the background image below. You should see a quite obvious swap from background color to background image.
In photoshop the Hex of the background color and image fade are exactly the same.
Does anyone know why this this happens?
Thanks!
http://i.stack.imgur.com/xZJ6B.png
This is likely to be more to do with your screen rather than a coding issue. You will find that all screens display images slightly differently. In fact, the image you have posted will look different to me now, than it does on either of your machines. Often the difference is slight. This can be to do with different display technologies (LCD, CRT etc) or just the slight differences in manufacture.
On this page, the <body> element has a background color of #77BFBC. The image (rv-banner.jpg) set as the background of the <header> element also has a background color of #77BFBC.
On windows (either FF or IE), the two colors blend perfectly. However on FF on the Mac, there is a noticeable difference between the background color of the image and that of the <body> element. How can I fix this?
Thanks,
Don
With the release of Firefox 3.5, colour-correction was turned on by default, but its effect depends on your system profile:
http://hacks.mozilla.org/2009/06/color-correction/
In practice, this means images saved with colour profiles are corrected and could show up mismatched to CSS colours.
It's possible to turn off colour-correction in Firefox, which fixes the problem for you, but that still leaves all the other potential visitors out there. Seems like removing the colour profile from the image is the way to go. There is a GIMP plugin that does this, see here for a discussion.
When images are displayed, they are converted from their color space to the color space of the screen.
To make your JPEG images display with the same color conversion as the rest of the elements, you should convert the images to the sRGB color space before saving them.
Browsers that doesn't support color profile information in images always uses the sRGB color space, so if you use sRGB for the images the color profile gets correct even for those browsers.
If there is no color profile in an image file, the sRGB color space is assumed. This means that you can save your images without a color profile to minimise the file size.
Try to save image as png not jpg. And if you are using photoshop, then choose "save for web and devices" not "save as".
This isn't due to your code but color profiles, I don't know if you can change this.
I have a website where the background has a light gradient (light gray from top to white on the bottom). When I place an image with a transparent background on the website, the background of the image picks the top color of the gradient. So instead of the image's background appearing to be a gradient as well and blending in with the site, the image's background color is just light gray.
I'm not sure if this is the way it's suppose to be (due to the way transparency works on websites). But I was wondering if anyone could provide a workaround
First of all welcome to StackOverflow :)
It depends. First of all, your website will be rendered differently on different browsers, and that's of vital importance to you, because unless you test it on different browsers, you can't be sure what some users will see.
If you've seen a partially transparent PNG that instead of transparency shows a grey background, chances are you're using Internet Explorer 6, a very old browser that you really shouldn't use. It's the one with the blue E, that E stands for Evil. Run.
On a more serious note, having a link to check would help, or a screenshot, because it's hard to tell just by guessing. PNGs should render fine against any background.