Published in Bootcamp ·

Color formula: A practical framework for UI designers and developers working with dynamic colors

By · ~7 min read on Bootcamp

In short

Jinson Johny proposes Color Formula, a framework for dynamic colours extracted from content such as images. Prompted by a client project and the lack of a shared standard, it defines the rule for choosing a colour rather than the colour itself, written as image ID, position and logic (for example cf-23313.top.vibrant), so designers and developers share the same logic.

News cards whose accent colours are picked from their images, with an eyedropper showing a colour-formula token.
Cover image from the original on Bootcamp

Key takeaways

  1. Dynamic colour is spreading. Spotify, Instagram Stories, the App Store Today tab, Apple Invites and Material 3 Expressive all derive UI colours from content or wallpapers.
  2. Picking is subjective. With manual colour pickers, two designers can pick different colours from one image, and handoff passes hex values when developers need logic.
  3. Rules, not hex values. Each formula has three parts: image ID, position (default full) and logic, with average, dominant, vibrant and muted in the first release.
  4. A standard, not a plugin. He frames it as a standard that means the same thing everywhere, like cubic-bezier for motion, released in public for others to adopt and contribute to.

This is a summary. The full article lives on Bootcamp, where it was first published.

Read the full article on Bootcamp

Related

Color Formula at colorformula.org