# Color differences between on-screen and saved image (Mac)

**URL:** <https://discourse.processing.org/t/color-differences-between-on-screen-and-saved-image-mac/41680>\
**Category:** Processing\
**Created:** [April 11, 2023, 8:51am UTC](https://discourse.processing.org/t/color-differences-between-on-screen-and-saved-image-mac/41680 "2023-04-11T08:51:26Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![RichyHo](https://avatars.discourse-cdn.com/v4/letter/r/c0e974/32.png) [@RichyHo](https://discourse.processing.org/u/RichyHo)\
**Post date:** [April 11, 2023, 8:51am UTC](https://discourse.processing.org/t/color-differences-between-on-screen-and-saved-image-mac/41680/1 "2023-04-11T08:51:27Z")

</div>

Similar to [this](https://discourse.processing.org/t/png-save-and-screen-capture-producing-different-results/26296), I am experiencing color consistency problems on my M1 Macbook Pro using the latest version of Processing.

Image looks vibrant on screen. If I do a screen grab within the OS then the colors are maintained when the screengrab image is opened Gimp.

If I use save() to save the Processing window image to .png, .bmp OR .tif it loses some of its vibrancy when the saved file is opened in Gimp. The colors no longer ‘pop’ - It looks like a loss of saturation but is not correctable in post by increasing this setting.

The linked issue suggests it’s to do with color profiles - how do I prevent this from happening? When I create something I want to save, I need the saved result to be identical to the onscreen image. Screen capture is limiting in terms of resolution.

Any advice would be warmly welcomed

Thanks

Edit: I’m currently at work so am unable to add actual code, full version numbers or link to images that show this issue. I’ll add this detail tonight. Thanks for your patience.

---

<div class="post-metadata">

**Author:** ![micycle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micycle/32/201_2.png) [@micycle](https://discourse.processing.org/u/micycle)\
**Post date:** [April 11, 2023, 10:09am UTC](https://discourse.processing.org/t/color-differences-between-on-screen-and-saved-image-mac/41680/2 "2023-04-11T10:09:54Z")

</div>

Find out which color profile your mac uses, download its _.icc_ file, then use this code:

```auto
/**
 * Saves the current frame as an image file with the specified filename and
 * converts its color space to the given ICC profile.
 *
 * @param filename The name of the file to save the current frame to, including
 * the file extension (e.g., "example.png").
 * "example-srgb.png").
 * @throws IOException If an I/O error occurs while reading the ICC profile or
 * reading/writing the image files.
 */
@Override
public void save(String filename) {
	super.save(filename);

	ICC_Profile profile = null;
	try {
		profile = ICC_Profile.getInstance("srgb.icc"); // NOTE load profile of your choosing from file
	} catch (IOException e) {
		e.printStackTrace();
	}

	// Create the ICC_ColorSpace object
	ICC_ColorSpace colorSpace = new ICC_ColorSpace(profile);

	// Read the input image
	BufferedImage inputImage = null;
	try {
		inputImage = ImageIO.read(new File(filename));
	} catch (IOException e) {
		e.printStackTrace();
	}

	ColorConvertOp colorConvert = new ColorConvertOp(colorSpace, null);

	// Apply the color space conversion to the image
	BufferedImage outputImage = colorConvert.filter(inputImage, null);

	// Write the output image
	try {
		int dot = filename.lastIndexOf('.');
		String outputPath = filename.substring(0, dot) + "-srgb" + "." + filename.substring(dot + 1);
		ImageIO.write(outputImage, "PNG", new File(outputPath));
	} catch (IOException e) {
		e.printStackTrace();
	}
}

```

---

<div class="post-metadata">

**Author:** ![RichyHo](https://avatars.discourse-cdn.com/v4/letter/r/c0e974/32.png) [@RichyHo](https://discourse.processing.org/u/RichyHo)\
**Post date:** [April 11, 2023, 11:57am UTC](https://discourse.processing.org/t/color-differences-between-on-screen-and-saved-image-mac/41680/3 "2023-04-11T11:57:47Z")

</div>

Thanks @micycle - I’ll give this a try tonight.

---

<div class="post-metadata">

**Author:** ![RichyHo](https://avatars.discourse-cdn.com/v4/letter/r/c0e974/32.png) [@RichyHo](https://discourse.processing.org/u/RichyHo)\
**Post date:** [April 11, 2023, 8:12pm UTC](https://discourse.processing.org/t/color-differences-between-on-screen-and-saved-image-mac/41680/4 "2023-04-11T20:12:36Z")

</div>

@micyle I got rid of all of the red underlines by adding the following:

```auto
import java.awt.color.ICC_Profile;
import java.awt.color.ICC_ColorSpace;
import java.awt.image.ColorConvertOp;
import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;

```

I have found the icc file, renamed it to ‘lcd.icc’ and added it to the sketch folder (and also a subfolder called ‘data’ just in case) but get the following error…

```auto
java.io.IOException: Cannot open file Color LCD-37D8832A-2D66-02CA-B9F7-8F30A301B230.icc
	at java.desktop/java.awt.color.ICC_Profile.getInstance(ICC_Profile.java:888)
	at sketch_70sArches_010.save(sketch_70sArches_010.java:260)
	at sketch_70sArches_010.keyPressed(sketch_70sArches_010.java:235)
	at processing.core.PApplet.keyPressed(PApplet.java:2772)
	at processing.core.PApplet.handleKeyEvent(PApplet.java:2636)
	at processing.core.PApplet.dequeueEvents(PApplet.java:2262)
	at processing.core.PApplet.handleDraw(PApplet.java:2104)
	at processing.awt.PSurfaceAWT$9.callDraw(PSurfaceAWT.java:1388)
	at processing.core.PSurfaceNone$AnimationThread.run(PSurfaceNone.java:356)
NullPointerException

```

I set permissions on the fie to everyone read and write. Still no joy. Any ideas?

Thanks

---

<div class="post-metadata">

**Author:** ![RichyHo](https://avatars.discourse-cdn.com/v4/letter/r/c0e974/32.png) [@RichyHo](https://discourse.processing.org/u/RichyHo)\
**Post date:** [April 11, 2023, 8:29pm UTC](https://discourse.processing.org/t/color-differences-between-on-screen-and-saved-image-mac/41680/5 "2023-04-11T20:29:53Z")

</div>

@micycle I changed the file load line to this…

```auto
profile = ICC_Profile.getInstance(sketchPath() + "/lcd.icc"); // NOTE load profile of your choosing from file

```

Now I get a different ‘can’t read’ error (progress!!):

```auto
javax.imageio.IIOException: Can't read input file!
	at java.desktop/javax.imageio.ImageIO.read(ImageIO.java:1310)
	at sketch_70sArches_010.save(sketch_70sArches_010.java:269)
	at sketch_70sArches_010.keyPressed(sketch_70sArches_010.java:234)
	at processing.core.PApplet.keyPressed(PApplet.java:2772)
	at processing.core.PApplet.handleKeyEvent(PApplet.java:2636)
	at processing.core.PApplet.dequeueEvents(PApplet.java:2262)
	at processing.core.PApplet.handleDraw(PApplet.java:2104)
	at processing.awt.PSurfaceAWT$9.callDraw(PSurfaceAWT.java:1388)
	at processing.core.PSurfaceNone$AnimationThread.run(PSurfaceNone.java:356)
NullPointerException

```

---

<div class="post-metadata">

**Author:** ![RichyHo](https://avatars.discourse-cdn.com/v4/letter/r/c0e974/32.png) [@RichyHo](https://discourse.processing.org/u/RichyHo)\
**Post date:** [April 11, 2023, 8:35pm UTC](https://discourse.processing.org/t/color-differences-between-on-screen-and-saved-image-mac/41680/6 "2023-04-11T20:35:34Z")

</div>

@micycle I fixed it!

Needed to pass the full rather than local file path to ‘save’:

````auto
save(sketchPath() + "/" + filename);```
````

---

<div class="post-metadata">

**Author:** ![RichyHo](https://avatars.discourse-cdn.com/v4/letter/r/c0e974/32.png) [@RichyHo](https://discourse.processing.org/u/RichyHo)\
**Post date:** [April 11, 2023, 8:38pm UTC](https://discourse.processing.org/t/color-differences-between-on-screen-and-saved-image-mac/41680/7 "2023-04-11T20:38:03Z")

</div>

To summarise - in case I or someone else comes back here, the following combo fixes the issue AND creates lovely, vivid output!!!

Main code:

```auto
save(sketchPath() + "/" + filename);

```

New Save routine

```auto
import java.awt.color.*;
import java.awt.image.*;
import javax.imageio.*;

/**
 * Saves the current frame as an image file with the specified filename and
 * converts its color space to the given ICC profile.
 *
 * @param filename The name of the file to save the current frame to, including
 * the file extension (e.g., "example.png").
 * "example-srgb.png").
 * @throws IOException If an I/O error occurs while reading the ICC profile or
 * reading/writing the image files.
 */
 
@Override
public void save(String filename) {
  super.save(filename);

  ICC_Profile profile = null;
  try {
    profile = ICC_Profile.getInstance(sketchPath() + "/lcd.icc"); // NOTE load profile of your choosing from file
  } catch (IOException e) {
    e.printStackTrace();
  }

  // Create the ICC_ColorSpace object
  ICC_ColorSpace colorSpace = new ICC_ColorSpace(profile);

  // Read the input image
  BufferedImage inputImage = null;
  try {
    inputImage = ImageIO.read(new File(filename));
  } catch (IOException e) {
    e.printStackTrace();
  }

  ColorConvertOp colorConvert = new ColorConvertOp(colorSpace, null);

  // Apply the color space conversion to the image
  BufferedImage outputImage = colorConvert.filter(inputImage, null);

  // Write the output image
  try {
    int dot = filename.lastIndexOf('.');
    String outputPath = filename.substring(0, dot) + "-srgb" + "." + filename.substring(dot + 1);
    ImageIO.write(outputImage, "PNG", new File(outputPath));
    println("Written");
  } catch (IOException e) {
    e.printStackTrace();
  }
}

```

---

<div class="post-metadata">

**Author:** ![RichyHo](https://avatars.discourse-cdn.com/v4/letter/r/c0e974/32.png) [@RichyHo](https://discourse.processing.org/u/RichyHo)\
**Post date:** [April 11, 2023, 8:38pm UTC](https://discourse.processing.org/t/color-differences-between-on-screen-and-saved-image-mac/41680/8 "2023-04-11T20:38:40Z")

</div>

Thanks for your help

---

<div class="post-metadata">

**Author:** ![RichyHo](https://avatars.discourse-cdn.com/v4/letter/r/c0e974/32.png) [@RichyHo](https://discourse.processing.org/u/RichyHo)\
**Post date:** [April 11, 2023, 8:54pm UTC](https://discourse.processing.org/t/color-differences-between-on-screen-and-saved-image-mac/41680/9 "2023-04-11T20:54:15Z")

</div>

@micycle I spoke too soon ☹

the saved imaged is actually darker than the result I was getting before implementing this change (see pic)

 ![problem](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/e/2e1cb7978236897f49efedd0daa35edbd0e75322.jpeg)