Animation, Design & Life, Development, and Technology

Fundamentals of Color Spaces in UI Design

Ashish Bogawat

A color space is a range of colors on a spectrum that can be interpreted and displayed on a visual plane. Many of these displays are interpreted through a RGB (Red, Green, Blue) chromaticity diagram, then processed and displayed on digital/analog images. These are further broken down into ranges, or “gamuts.”

What is a Color Space?

A color space in simple terms is a range of colors. Another name for color space is color profile.
The 2 common color spaces for UI Design are sRGB and Display P3.
Another popular color space is Adobe RGB, which is used mainly in Photography and Print Design.

Screen Displays

Every screen or display has a color profile associated with it.
sRGB – Standard RGB. Every screen can display sRGB Colors. This color space is being used for more than a decade now
Display P3 is a new color space created by Apple. It can display 25% more colors than sRGB.

sRGB vs Display P3

The Red color is less bright on sRGB Display. But the RGB value remains the same in both displays.

Why does P3 have more colors?

Since Display P3 supports 16 bits per color channel, it can support more colors than sRGB.

Example 1 – sRGB Image

The image below has been exported with sRGB color profile.

Example 1 – Display P3 Image

The image below has been exported with P3 color profile.

Related Resources

User Interface

Layout Grids

‐
By Ashish Bogawat
‐
The key to every great design is the organization of its information. Spacing methods and layout grids define structure hierarchy and rhythm in your design. When correctly used, they reduce decision making and help establish a rational approach to type scales, positioning, sizing and spacing.
Read more Layout Grids