Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Macs not displaying HTML Color properly

Featured Replies

Probably a remedial question, but I'm a newbie - I'm doing a web build (I'm not the designer) - the background of the site is a simple HTML color that matches some images on the site. The color doesn't seem to deploy properly on Macs. This happens across browsers (but not in Photoshop - I checked the original PSBs and they look fine) but it's not a display/monitor issue - I checked with the Color Meter (as well as Pixie on a corresponding PC) and it seems as if the Mac is changing the color values to something it can handle.

 

Anyone have any experience with this and/or a workaround you might share? I'd hate to change the entire color (since it matches all the previously created images and I'm not a designer) but this is driving folks crazy over here...

 

Thanks!

Why do you say that the background color is not correct? Are you sure it is not the pictures that are not displaying correctly (giving the illusion that it is the background color)?

 

What program were the images created in? Were they exported using sRGB instead of RGB?

  • Author
Why do you say that the background color is not correct? Are you sure it is not the pictures that are not displaying correctly (giving the illusion that it is the background color)?

 

What program were the images created in? Were they exported using sRGB instead of RGB?

 

 

I don't think I explained the problem very well - the source code uses an HTML color of 0e2f49 which matches the color used in the images. On the deployed page, neither the image nor the background displays correctly - they match each other perfectly, they just don't match the color values of the source code or the source image, which I can check using the color meter. (By contrast, the original PSD mock-up displays fine, and everything displays fine on PCs.) The images are from Photoshop with an RGB color space. Thanks!

It sounds to me like two things are happening. One - the display profile has not been configured correctly in system preferences (you may be checking it with your color meter, but if the display has not been set up correctly using said color meter then it won't make any difference)... Two - Photoshop is applying its own color space to your image which is altering the way it is being displayed in that application only.

 

Take a look at this post. It might help?

 

"Color profiles define how Photoshop interprets the raw color data in your files. That's right: That means they change how you see the colors. This kind of precision is great for photography and print design, but it's got to go if we're making a website"

 

http://www.viget.com/inspire/the-mysteriou...eb-color-shift/

  • Author
It sounds to me like two things are happening. One - the display profile has not been configured correctly in system preferences (you may be checking it with your color meter, but if the display has not been set up correctly using said color meter then it won't make any difference)... Two - Photoshop is applying its own color space to your image which is altering the way it is being displayed in that application only.

 

Take a look at this post. It might help?

 

"Color profiles define how Photoshop interprets the raw color data in your files. That's right: That means they change how you see the colors. This kind of precision is great for photography and print design, but it's got to go if we're making a website"

 

http://www.viget.com/inspire/the-mysteriou...eb-color-shift/

 

Thanks! I'll take a look through the article.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.