Figma Color Profiles: sRGB vs. Display P3

WHY IT EXISTS Not all screens are created equal. The same hex code can look different on a phone, a laptop, and an external monitor due to variations in display technology. Color profiles are the solution, creating a standard to ensure a color appears the same everywhere.

THE MENTAL MODEL Think of a color profile as a dictionary that translates a color value (like #FF0000) into a specific, absolute shade of red. sRGB is a smaller, common dictionary that every device understands. Display P3 is a larger dictionary with more vibrant, expressive words (colors), but not every device has it.

HOW IT WORKS Figma offers two profiles. sRGB is the default and the web standard, ensuring maximum compatibility. Display P3 has a wider color gamut, representing 49% more visually distinct colors, which appear more vibrant. It's ideal for iOS devices and other modern retina screens. When you change a file's profile, you have two options. 'Assign' keeps the raw color values (e.g., #0000FF) but re-interprets them in the new profile, changing their appearance. 'Convert' keeps the visual appearance by calculating new color values that match the original look in the new profile.

WHEN TO USE IT Use sRGB for most web-based projects to guarantee consistency for the broadest possible audience. Use Display P3 when designing for specific platforms you know support it, like native iOS apps or marketing materials for modern screens, where color vibrancy is a key goal.

WHEN NOT TO USE IT Avoid using Display P3 if your target audience uses a wide range of older or non-retina displays, as the colors may look clipped or desaturated. Don't switch a file's profile without understanding the difference between 'Assign' and 'Convert,' as you can unintentionally shift your entire color palette.

ONE CANONICAL EXAMPLE A designer chooses a vibrant electric blue for an iOS app in a Display P3 file. To create a matching web banner, they must change the profile to sRGB. If they choose 'Assign', the hex code stays the same, but the blue on the web banner will look duller than in the app. If they choose 'Convert', Figma will calculate a new, slightly different hex code that produces the most vibrant blue possible within the smaller sRGB color space, preserving the intended appearance as closely as possible.