X
Tap here to go to the mobile version of the site.

Support Forum

How do I reduce excessive website color saturation?

Posted

Hi folks, On my new MacBook Pro the color saturation of websites appears excessive. I've attached a screenshot comparing the color reproduction of Firefox (on left) vs. Safari (on right). If you compare the "3-D Cease Fire" and "Beauty and the Beast" blu-ray case images, you'll easily see that the color saturation on Firefox is excessive. Similarly, the "Best Blu-ray Movie Deals" button is too saturated. I notice the phenomenon on almost all websites.

I've tried playing around with the various gfx.color options to no avail so far. Maybe I haven't hit the right combination.

Thank you!

Best, Joel

Hi folks, On my new MacBook Pro the color saturation of websites appears excessive. I've attached a screenshot comparing the color reproduction of Firefox (on left) vs. Safari (on right). If you compare the "3-D Cease Fire" and "Beauty and the Beast" blu-ray case images, you'll easily see that the color saturation on Firefox is excessive. Similarly, the "Best Blu-ray Movie Deals" button is too saturated. I notice the phenomenon on almost all websites. I've tried playing around with the various gfx.color options to no avail so far. Maybe I haven't hit the right combination. Thank you! Best, Joel

Additional System Details

Application

  • Firefox 59.0.2
  • User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:59.0) Gecko/20100101 Firefox/59.0
  • Support URL: https://support.mozilla.org/1/firefox/59.0.2/Darwin/en-US/

Extensions

  • AdBlock 3.9.0 (jid1-NIfFY2CA8fy1tg@jetpack)

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription:
  • adapterDeviceID: 0x5926
  • adapterDrivers:
  • adapterRAM:
  • adapterVendorID: 0x8086
  • crashGuards: []
  • driverDate:
  • driverVersion:
  • featureLog: {u'fallbacks': [], u'features': [{u'status': u'available', u'description': u'Compositing', u'log': [{u'status': u'available', u'type': u'default'}], u'name': u'HW_COMPOSITING'}, {u'status': u'available', u'description': u'OpenGL Compositing', u'log': [{u'status': u'available', u'type': u'default'}], u'name': u'OPENGL_COMPOSITING'}, {u'status': u'unavailable', u'description': u'WebRender', u'log': [{u'status': u'opt-in', u'message': u'WebRender is an opt-in feature', u'type': u'default'}, {u'status': u'unavailable', u'message': u"Build doesn't include WebRender", u'type': u'runtime'}], u'name': u'WEBRENDER'}, {u'status': u'available', u'description': u'Off Main Thread Painting', u'log': [{u'status': u'available', u'type': u'default'}], u'name': u'OMTP'}]}
  • info: {u'TileHeight': 1024, u'ApzWheelInput': 1, u'ApzDragInput': 1, u'ApzKeyboardInput': 1, u'ApzAutoscrollInput': 1, u'AzureFallbackCanvasBackend': u'none', u'TileWidth': 1024, u'AzureCanvasAccelerated': 1, u'AzureCanvasBackend': u'skia', u'AzureContentBackend': u'skia'}
  • numAcceleratedWindows: 1
  • numTotalWindows: 1
  • offMainThreadPaintEnabled: True
  • webgl1DriverExtensions: GL_ARB_blend_func_extended GL_ARB_draw_buffers_blend GL_ARB_draw_indirect GL_ARB_ES2_compatibility GL_ARB_explicit_attrib_location GL_ARB_gpu_shader_fp64 GL_ARB_gpu_shader5 GL_ARB_instanced_arrays GL_ARB_internalformat_query GL_ARB_occlusion_query2 GL_ARB_sample_shading GL_ARB_sampler_objects GL_ARB_separate_shader_objects GL_ARB_shader_bit_encoding GL_ARB_shader_subroutine GL_ARB_shading_language_include GL_ARB_tessellation_shader GL_ARB_texture_buffer_object_rgb32 GL_ARB_texture_cube_map_array GL_ARB_texture_gather GL_ARB_texture_query_lod GL_ARB_texture_rgb10_a2ui GL_ARB_texture_storage GL_ARB_texture_swizzle GL_ARB_timer_query GL_ARB_transform_feedback2 GL_ARB_transform_feedback3 GL_ARB_vertex_attrib_64bit GL_ARB_vertex_type_2_10_10_10_rev GL_ARB_viewport_array GL_EXT_debug_label GL_EXT_debug_marker GL_EXT_framebuffer_multisample_blit_scaled GL_EXT_texture_compression_s3tc GL_EXT_texture_filter_anisotropic GL_EXT_texture_sRGB_decode GL_APPLE_client_storage GL_APPLE_container_object_shareable GL_APPLE_flush_render GL_APPLE_object_purgeable GL_APPLE_rgb_422 GL_APPLE_row_bytes GL_APPLE_texture_range GL_ATI_texture_mirror_once GL_NV_texture_barrier
  • webgl1Extensions: ANGLE_instanced_arrays EXT_blend_minmax EXT_color_buffer_half_float EXT_frag_depth EXT_sRGB EXT_shader_texture_lod EXT_texture_filter_anisotropic EXT_disjoint_timer_query OES_element_index_uint OES_standard_derivatives OES_texture_float OES_texture_float_linear OES_texture_half_float OES_texture_half_float_linear OES_vertex_array_object WEBGL_color_buffer_float WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_depth_texture WEBGL_draw_buffers WEBGL_lose_context
  • webgl1Renderer: Intel Inc. -- Intel(R) Iris(TM) Plus Graphics 640
  • webgl1Version: 4.1 INTEL-10.30.14
  • webgl1WSIInfo: CGL
  • webgl2DriverExtensions: GL_ARB_blend_func_extended GL_ARB_draw_buffers_blend GL_ARB_draw_indirect GL_ARB_ES2_compatibility GL_ARB_explicit_attrib_location GL_ARB_gpu_shader_fp64 GL_ARB_gpu_shader5 GL_ARB_instanced_arrays GL_ARB_internalformat_query GL_ARB_occlusion_query2 GL_ARB_sample_shading GL_ARB_sampler_objects GL_ARB_separate_shader_objects GL_ARB_shader_bit_encoding GL_ARB_shader_subroutine GL_ARB_shading_language_include GL_ARB_tessellation_shader GL_ARB_texture_buffer_object_rgb32 GL_ARB_texture_cube_map_array GL_ARB_texture_gather GL_ARB_texture_query_lod GL_ARB_texture_rgb10_a2ui GL_ARB_texture_storage GL_ARB_texture_swizzle GL_ARB_timer_query GL_ARB_transform_feedback2 GL_ARB_transform_feedback3 GL_ARB_vertex_attrib_64bit GL_ARB_vertex_type_2_10_10_10_rev GL_ARB_viewport_array GL_EXT_debug_label GL_EXT_debug_marker GL_EXT_framebuffer_multisample_blit_scaled GL_EXT_texture_compression_s3tc GL_EXT_texture_filter_anisotropic GL_EXT_texture_sRGB_decode GL_APPLE_client_storage GL_APPLE_container_object_shareable GL_APPLE_flush_render GL_APPLE_object_purgeable GL_APPLE_rgb_422 GL_APPLE_row_bytes GL_APPLE_texture_range GL_ATI_texture_mirror_once GL_NV_texture_barrier
  • webgl2Extensions: EXT_color_buffer_float EXT_texture_filter_anisotropic EXT_disjoint_timer_query OES_texture_float_linear WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context
  • webgl2Renderer: Intel Inc. -- Intel(R) Iris(TM) Plus Graphics 640
  • webgl2Version: 4.1 INTEL-10.30.14
  • webgl2WSIInfo: CGL
  • windowLayerManagerRemote: True
  • windowLayerManagerType: OpenGL
  • windowUsingAdvancedLayers: False

Modified Preferences

Misc

  • User JS: No
  • Accessibility: No

Helpful Reply

Here is the screenshot:

Here is the screenshot:
FredMcD
  • Top 10 Contributor
4259 solutions 59633 answers
I don't know if this will help; https://support.mozilla.org/en-US/kb/fix-problems-images-not-show

Question owner

Hey Fred, Thanks for the article. Unfortunately, it does not directly address my issue as I do not have a problem viewing images; rather, the images just appear too saturated (I did try everything mentioned in the article that made sense like clearing the cache, etc.). I've attached another screenshot from the W3School HTML Color Picker that should make the issue very obvious (Firefox on left and Safari on right).

Hey Fred, Thanks for the article. Unfortunately, it does not directly address my issue as I do not have a problem viewing images; rather, the images just appear too saturated (I did try everything mentioned in the article that made sense like clearing the cache, etc.). I've attached another screenshot from the W3School HTML Color Picker that should make the issue very obvious (Firefox on left and Safari on right).
FredMcD
  • Top 10 Contributor
4259 solutions 59633 answers

I called for more help.

I called for more help.
cor-el
  • Top 10 Contributor
  • Moderator
17536 solutions 158564 answers

This can be caused by a problem with the color profile for your display monitor or color profiles embedded in images. Try to disable color management to test if it is caused by a problem with color management. You can set the gfx.color_management.mode pref to 0 on the about:config page to disable Color Management. You need to close and restart Firefox to make the change effective. See:

0: Disable color management. 1: Enable color management for rendered graphics. 2: Enable color management for tagged graphics only. (Default)

This can be caused by a problem with the color profile for your display monitor or color profiles embedded in images. Try to disable color management to test if it is caused by a problem with color management. You can set the gfx.color_management.mode pref to 0 on the about:config page to disable Color Management. You need to close and restart Firefox to make the change effective. See: * http://kb.mozillazine.org/gfx.color_management.mode 0: Disable color management. 1: Enable color management for rendered graphics. 2: Enable color management for tagged graphics only. (Default)

Question owner

I changed gfx.color_management.mode from 2 to 0 and restarted Firefox. The problem, however, remains unresolved. The #ff0000 color on W3's HTML Color Picker is still over-saturated.

I changed gfx.color_management.mode from 2 to 0 and restarted Firefox. The problem, however, remains unresolved. The #ff0000 color on W3's HTML Color Picker is still over-saturated.

Modified by kenrad

Question owner

I was able to reproduce the same color saturation discrepancy between Firefox and Safari on an iMac Retina 5k, 27-inch, 2017.

I was able to reproduce the same color saturation discrepancy between Firefox and Safari on an iMac Retina 5k, 27-inch, 2017.