Framer Update, Layout & Design

Framer Update: P3 Colors

Benjamin

2:13

6.7K views

Apr 1, 2025

About this lesson

The March update brings P3 color support to Framer with a redesigned color picker. Display P3 offers a much wider color gamut than standard sRGB, unlocking a broader range of more vivid, vibrant colors. Back in 2020, studies showed that around 50% of web visitors had P3-capable displays, and that number is likely even higher today. Devices that support P3 include iPhones, iPads, MacBooks, Apple Studio Displays, and high-end monitors from brands like LG and Dell. Every modern browser has supported these P3 colors since 2023, and for older ones, Framer automatically renders fallback colors, so your websites will always display colors correctly. https://framer.com/updates/march-update-2025/

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Yo, my name is Benjamin and I'm very 0:03excited to introduce B3 color support in 0:08Framer. In this update, we have 0:10redesigned our color picker, ensuring 0:12that numeric values of any supported 0:15color format never gets cut off and that 0:18they all support scrubbing using these 0:21little stepper controls. And now we can 0:24switch directly to the P3 color format,0:28unlocking an entirely new world of 0:31richer, more vivid colors. If you are 0:34unfamiliar, display P3 is a color space 0:37that shows more vibrant colors than RGB,0:40especially on Apple screens. Studies 0:43done in the year 2020 showed that about 0:4650% of web users had devices that 0:49supported P3. And today that number is 0:53likely even higher. When working with P3 0:56in Framer, the color picker now has a 0:59line marking the region of colors now 1:02available to you in the P3 space.1:05Popular displays that support P3 include 1:08iPhones, iPads, MacBooks, Apple Studio 1:11displays, and other high-end monitors 1:14from LG, Dell, and others. And these 1:17colors are widely supported and have 1:20been for the last couple of years in all 1:22major browsers. And on older browsers,1:25Framer gracefully falls back to 1:28supported color formats, meaning your 1:30visitors never see broken colors. These 1:33new P3 colors also work with gradients 1:36in Framer, where the difference is even 1:39more striking. Unfortunately, the 1:42YouTube video here doesn't really do it 1:44justice. So, you'll have to give these a 1:46try for yourself on any supported 1:49display to really get a proper sense of 1:52the lovely vibrancy these colors 1:55provide. We can't wait to see your new 1:57designs using P3 colors. Thank you so 2:01much for watching and stay tuned for 2:04more updates coming soon.

TeachesColor Styles

Watch on YouTube ↗

‹ Understanding CMS Collections, Items & Fields in Framer (CMS Lesson 2)

Practice: Designing Fluid Layouts in Framer (Fundamentals Lesson 24) ›