Wide-Gamut Colors in Framer X
Do you have that nagging feeling there’s something missing in your life? Do you think being able to use a wider color range on Framer X would help with that? YES?! Then I have good news for you!
I first noticed the partial support for Display P3 on Framer X when I imported an iPhone screenshot and realized its colors were noticeably more vibrant than the other elements I had drawn on the canvas. When I tried the color picker on the screenshot, it became clear that while Framer renders P3-tagged images correctly, it can’t render the same colors on frame and shape properties.
Last month I found the CSS Colors Level 4 spec and was quickly disappointed to see that there didn’t seem to be any browser support yet. But last week the fine folks from Panic proved my research was shitty, because WebKit has supported P3 CSS colors for 2 years. And that’s how Colorful was born!
The Colorful package includes 2 components:
- Colorful is a styled Frame that allows you to use P3 colors for
fill,shadow, andborder. It also supports multi-step gradients, for those times where you really need to go crazy. - MakeColorful connects to other elements on the canvas and converts all colors to P3, including nested children and graphics.
The components check for browser support, so the colors fall back to the default browser color space if it doesn’t support P3 (like Chrome).
I’m sure Colorful won’t be relevant in a few months (…or years?) when the CSS color() function is more mature and widely adopted, but why wait when your prototypes (and your life) can be a lot more vibrant right now 🌈
