Dynamic Colors at RTL+

RTL+'s brand identity is unusual: the logo itself changes color to match whatever content it's promoting. The brand is the content. That's compelling in marketing, but it creates a real systems problem — how do you build a UI that dynamically adapts to thousands of different content pieces while staying accessible and consistent?

The obvious answer (pick the dominant color from each image) doesn't work. A color extraction algorithm will return skin tones, blown-out highlights, or background noise as often as it returns something usable. I needed something smarter.

I built ColoRTL+ (the name could need improvement, I know), a Figma plugin that extracts a background color, shadow, and highlight from any content image using a weighted averaging algorithm — informed by research from NRK on how luminance-based averaging outperforms single-color extraction. The plugin runs contrast correction automatically, ensuring WCAG compliance across both light and dark modes without manual intervention.

The result: what previously required minutes of manual color selection per content piece now takes seconds. ColoRTL+ was adopted into RTL+'s official design toolkit and is used across multiple teams. I presented the system at Into Design Systems 2024 — one of the largest design systems conferences globally.