Color management

Pinwheel is fully color managed, and it has end-to-end support for sRGB, Display P3 and other color spaces.

Learning about color management can take some time. If you’re in a rush, the tips below should serve you well.

  • Always intentionally pick a color space for your project. Not picking one will almost certainly cause issues later.
  • If you don’t know which color space to pick, use sRGB.
  • If you want the most vivid colors and the platform you’re building for supports it, use Display P3. The web, iOS, and Android all have good Display P3 support.
  • Converting from a wide gamut color space to sRGB may make colors duller, if they’re outside sRGB’s gamut.
  • All Pinwheel documents support standard and wide gamut colors simultaneously. The colors themselves are assigned a profile, rather than the entire document having a profile.

If you’d like to learn more about what color management is, please read our series of articles on the topic. Understanding color management is important for working with colors in modern software.

The two most common color spaces for software are sRGB and Display P3. There are some considerations when choosing the color space for your project, and slightly different workflows.

sRGB workflow #

The S in sRGB stands for standard. It’s the most common gamut for web and app projects. It’s the default for CSS, SVG, and most image formats. To work in sRGB in Pinwheel, ensure all colors are set to sRGB in the inspector.

Display P3 workflow #

Display P3 is a color space created by Apple. It has the same primaries as the DCI-P3 color space that’s popular for video work. Display P3 is common on Apple’s devices and Android phones. It is a wide gamut color space that support more vibrant colors than sRGB, especially for reds and greens.

Display P3 can be used in many places, but it will require the color space is explicitly included with the color. Display P3 is possible with CSS colors. It’s also possible to use Display P3 colors in iOS, iPadOS, macOS, and Android projects.

To work in Display P3 in Pinwheel, ensure all colors are set to Display P3 in the inspector, and ensure exported formats also support Display P3.